• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Button - accent

Component status
Contribution
Current version@spectrum-css/button@12.0.2
ReleasedMarch 7, 2024
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Usage notes

The call to action button communicates strong emphasis and is reserved for encouraging critical actions.

Variants

Sizing
Contribution

S

M (default)

L

XL

Show markup
<div class="spectrum-Examples">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>

    <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeS">
      <span class="spectrum-Button-label">Edit</span>
    </button>

    <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeS">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Edit" />
      </svg>
      <span class="spectrum-Button-label">Edit</span>
    </button>

    <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeS spectrum-Button--iconOnly" aria-label="Edit">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Edit" />
      </svg>
    </button>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4>

    <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM">
      <span class="spectrum-Button-label">Edit</span>
    </button>

    <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM">
      <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Edit" />
      </svg>
      <span class="spectrum-Button-label">Edit</span>
    </button>

    <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM spectrum-Button--iconOnly" aria-label="Edit">
      <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Edit" />
      </svg>
    </button>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>

    <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeL">
      <span class="spectrum-Button-label">Edit</span>
    </button>

    <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeL">
      <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Edit" />
      </svg>
      <span class="spectrum-Button-label">Edit</span>
    </button>

    <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeL spectrum-Button--iconOnly" aria-label="Edit">
      <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Edit" />
      </svg>
    </button>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>

    <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeXL">
      <span class="spectrum-Button-label">Edit</span>
    </button>

    <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeXL">
      <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Edit" />
      </svg>
      <span class="spectrum-Button-label">Edit</span>
    </button>

    <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeXL spectrum-Button--iconOnly" aria-label="Edit">
      <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Edit" />
      </svg>
    </button>
  </div>
</div>

Disabled
Contribution

Show markup
<div class="spectrum-Examples">
  <div class="spectrum-Examples-item">
    <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--accent" disabled>
      <span class="spectrum-Button-label">Button</span>
    </button>

    <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--accent" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Edit" />
      </svg>
      <span class="spectrum-Button-label">Edit</span>
    </button>

    <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--accent spectrum-Button--iconOnly" aria-label="Edit" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Edit" />
      </svg>
    </button>
  </div>
</div>

Outline
Contribution

S

M (default)

L

XL

Show markup
<div class="spectrum-Examples">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>

    <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeS">
      <span class="spectrum-Button-label">Edit</span>
    </button>

    <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeS">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Edit" />
      </svg>
      <span class="spectrum-Button-label">Edit</span>
    </button>

    <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeS spectrum-Button--iconOnly" aria-label="Edit">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Edit" />
      </svg>
    </button>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4>

    <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeM">
      <span class="spectrum-Button-label">Edit</span>
    </button>

    <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeM">
      <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Edit" />
      </svg>
      <span class="spectrum-Button-label">Edit</span>
    </button>

    <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeM spectrum-Button--iconOnly" aria-label="Edit">
      <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Edit" />
      </svg>
    </button>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>

    <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeL">
      <span class="spectrum-Button-label">Edit</span>
    </button>

    <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeL">
      <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Edit" />
      </svg>
      <span class="spectrum-Button-label">Edit</span>
    </button>

    <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeL spectrum-Button--iconOnly" aria-label="Edit">
      <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Edit" />
      </svg>
    </button>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>

    <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeXL">
      <span class="spectrum-Button-label">Edit</span>
    </button>

    <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeXL">
      <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Edit" />
      </svg>
      <span class="spectrum-Button-label">Edit</span>
    </button>

    <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeXL spectrum-Button--iconOnly" aria-label="Edit">
      <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Edit" />
      </svg>
    </button>
  </div>
</div>

Outline- Disabled
Contribution

Show markup
<div class="spectrum-Examples">
  <div class="spectrum-Examples-item">
    <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--accent" disabled>
      <span class="spectrum-Button-label">Button</span>
    </button>

    <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--accent" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Edit" />
      </svg>
      <span class="spectrum-Button-label">Edit</span>
    </button>

    <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--accent spectrum-Button--iconOnly" aria-label="Edit" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Edit" />
      </svg>
    </button>
  </div>
</div>

Custom Properties API

This component can be modified via its --mod-* prefixed custom properties. A list of those prefixed custom properties can be found here.

Migration Guide

Fill or Outline class required

All buttons now require either the .spectrum-Button--fill or .spectrum-Button--outline class.

CTA replaced by Accent with Fill

Replace all .spectrum-Button--cta with .spectrum-Button--accent .spectrum-Button--fill.

Icon Only

Add the .spectrum-Button--iconOnly class to apply the correct styling when an icon is used without a label.
Provide an aria-label on the button itself when using this variant for accessibility.

T-shirt sizing

Button now supports t-shirt sizing and requires that you specify the size of button by adding a .spectrum-Button--size* class.

Change workflow icon size

Previously, all Buttons used .spectrum-Icon--sizeS. This has changed:

Button classname Workflow icon classname
.spectrum-Button--sizeS .spectrum-Icon--sizeS
.spectrum-Button--sizeM .spectrum-Icon--sizeM
.spectrum-Button--sizeL .spectrum-Icon--sizeL
.spectrum-Button--sizeXL .spectrum-Icon--sizeXL

Remove focus-ring class

We’ve migrated away from the focus-ring class in favor of the native :focus-visible pseudo-class due to changes in browser support.