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

Button - accent

Component status
Contribution
Current version@spectrum-css/button@13.4.0
ReleasedOctober 4, 2024
S2-foundations@spectrum-css/button@14.0.0-s2-foundations.18
ReleasedOctober 4, 2024

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.