Theme

Scale

Direction

Vars Version

Button - static color

Component status	Contribution
Current version	@spectrum-css/button@12.0.2
Released	March 7, 2024

Usage notes

When a button needs to be placed on top of a colored background or a visual, use the over background button. In order to implement this button, you must set the CSS color property of a parent element to the same value as the background the button is placed against.

Variants

Static White
Contribution

S

M (default)

L

XL

Show markup

<div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); --spectrum-alias-heading-text-color: white; padding: 15px 20px;">
  <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--staticWhite spectrum-Button--sizeS">
        <span class="spectrum-Button-label">Edit</span>
      </button>

      <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticWhite 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--staticWhite 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--staticWhite spectrum-Button--sizeM">
        <span class="spectrum-Button-label">Edit</span>
      </button>

      <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticWhite 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--staticWhite 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--staticWhite spectrum-Button--sizeL">
        <span class="spectrum-Button-label">Edit</span>
      </button>

      <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticWhite 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--staticWhite 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--staticWhite spectrum-Button--sizeXL">
        <span class="spectrum-Button-label">Edit</span>
      </button>

      <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticWhite 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--staticWhite 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>
</div>

Static White - Disabled
Contribution

Show markup

<div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); padding: 15px 20px;">
  <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--staticWhite" disabled>
    <span class="spectrum-Button-label">Edit</span>
  </button>

  <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--staticWhite" disabled>
    <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--sizeM spectrum-Button--fill spectrum-Button--staticWhite spectrum-Button--iconOnly" aria-label="Edit" disabled>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Edit" />
    </svg>
  </button>
</div>

Static White - Secondary
Contribution

Show markup

<div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); padding: 15px 20px;">
  <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--staticWhite spectrum-Button--secondary">
    <span class="spectrum-Button-label">Edit</span>
  </button>

  <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--staticWhite spectrum-Button--secondary">
    <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--sizeM spectrum-Button--fill spectrum-Button--staticWhite spectrum-Button--secondary 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>

Static Black
Contribution

S

M (default)

L

XL

Show markup

<div style="background-color: rgb(181, 209, 211); color: rgb(181, 209, 211); padding: 15px 20px;">
  <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--staticBlack spectrum-Button--sizeS">
        <span class="spectrum-Button-label">Edit</span>
      </button>

      <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticBlack 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--staticBlack 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--staticBlack spectrum-Button--sizeM">
        <span class="spectrum-Button-label">Edit</span>
      </button>

      <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticBlack 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--staticBlack 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--staticBlack spectrum-Button--sizeL">
        <span class="spectrum-Button-label">Edit</span>
      </button>

      <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticBlack 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--staticBlack 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--staticBlack spectrum-Button--sizeXL">
        <span class="spectrum-Button-label">Edit</span>
      </button>

      <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticBlack 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--staticBlack 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>
</div>

Static Black - Disabled
Contribution

Show markup

<div style="background-color: rgb(181, 209, 211); color: rgb(181, 209, 211); padding: 15px 20px;">
  <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--staticBlack" disabled>
    <span class="spectrum-Button-label">Edit</span>
  </button>

  <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--staticBlack" disabled>
    <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--sizeM spectrum-Button--fill spectrum-Button--staticBlack spectrum-Button--iconOnly" aria-label="Edit" disabled>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Edit" />
    </svg>
  </button>
</div>

Static Black - Secondary
Contribution

Show markup

<div style="background-color: rgb(181, 209, 211); color: rgb(181, 209, 211); padding: 15px 20px;">
  <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--staticBlack spectrum-Button--secondary">
    <span class="spectrum-Button-label">Edit</span>
  </button>

  <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--staticBlack spectrum-Button--secondary">
    <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--sizeM spectrum-Button--fill spectrum-Button--staticBlack spectrum-Button--secondary 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>

Static White - Outline
Contribution

S

M (default)

L

XL

Show markup

<div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); --spectrum-alias-heading-text-color: white; padding: 15px 20px;">
  <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--staticWhite spectrum-Button--sizeS">
        <span class="spectrum-Button-label">Edit</span>
      </button>

      <button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticWhite 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--staticWhite 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--staticWhite spectrum-Button--sizeM">
        <span class="spectrum-Button-label">Edit</span>
      </button>

      <button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticWhite 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--staticWhite 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--staticWhite spectrum-Button--sizeL">
        <span class="spectrum-Button-label">Edit</span>
      </button>

      <button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticWhite 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--staticWhite 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--staticWhite spectrum-Button--sizeXL">
        <span class="spectrum-Button-label">Edit</span>
      </button>

      <button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticWhite 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--staticWhite 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>
</div>

Static White - Outline, Disabled
Contribution

Show markup

<div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); padding: 15px 20px;">
  <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--staticWhite" disabled>
    <span class="spectrum-Button-label">Edit</span>
  </button>

  <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--staticWhite" disabled>
    <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--sizeM spectrum-Button--outline spectrum-Button--staticWhite spectrum-Button--iconOnly" aria-label="Edit" disabled>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Edit" />
    </svg>
  </button>
</div>

Static White - Outline, Secondary
Contribution

Show markup

<div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); padding: 15px 20px;">
  <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--staticWhite spectrum-Button--secondary">
    <span class="spectrum-Button-label">Edit</span>
  </button>

  <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--staticWhite spectrum-Button--secondary">
    <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--sizeM spectrum-Button--outline spectrum-Button--staticWhite spectrum-Button--secondary 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>

Static Black - Outline
Contribution

S

M (default)

L

XL

Show markup

<div style="background-color: rgb(181, 209, 211); color: rgb(181, 209, 211); padding: 15px 20px;">
  <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--staticBlack spectrum-Button--sizeS">
        <span class="spectrum-Button-label">Edit</span>
      </button>

      <button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticBlack 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--staticBlack 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--staticBlack spectrum-Button--sizeM">
        <span class="spectrum-Button-label">Edit</span>
      </button>

      <button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticBlack 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--staticBlack 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--staticBlack spectrum-Button--sizeL">
        <span class="spectrum-Button-label">Edit</span>
      </button>

      <button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticBlack 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--staticBlack 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--staticBlack spectrum-Button--sizeXL">
        <span class="spectrum-Button-label">Edit</span>
      </button>

      <button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticBlack 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--staticBlack 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>
</div>

Static Black - Outline, Disabled
Contribution

Show markup

<div style="background-color: rgb(181, 209, 211); color: rgb(181, 209, 211); padding: 15px 20px;">
  <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--staticBlack" disabled>
    <span class="spectrum-Button-label">Edit</span>
  </button>

  <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--staticBlack" disabled>
    <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--sizeM spectrum-Button--outline spectrum-Button--staticBlack spectrum-Button--iconOnly" aria-label="Edit" disabled>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Edit" />
    </svg>
  </button>
</div>

Static Black - Outline, Secondary
Contribution

Show markup

<div style="background-color: rgb(181, 209, 211); color: rgb(181, 209, 211); padding: 15px 20px;">
  <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--staticBlack spectrum-Button--secondary">
    <span class="spectrum-Button-label">Edit</span>
  </button>

  <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--staticBlack spectrum-Button--secondary">
    <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--sizeM spectrum-Button--outline spectrum-Button--staticBlack spectrum-Button--secondary 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>

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.

Over background replaced by StaticWhite with Outline

Replace all .spectrum-Button--overBackground with .spectrum-Button--staticWhite .spectrum-Button--outline.

Over background Quiet replaced by StaticWhite with Outline

Replace all .spectrum-Button--overBackground .spectrum-Button--quiet with .spectrum-Button--staticWhite .spectrum-Button--outline.

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.

Spectrum CSS

Static WhiteContribution

S

M (default)

L

XL

Static White - DisabledContribution

Static White - SecondaryContribution

Static BlackContribution

S

M (default)

L

XL

Static Black - DisabledContribution

Static Black - SecondaryContribution

Static White - OutlineContribution

S

M (default)

L

XL

Static White - Outline, DisabledContribution

Static White - Outline, SecondaryContribution

Static Black - OutlineContribution

S

M (default)

L

XL

Static Black - Outline, DisabledContribution

Static Black - Outline, SecondaryContribution

Static White
Contribution

Static White - Disabled
Contribution

Static White - Secondary
Contribution

Static Black
Contribution

Static Black - Disabled
Contribution

Static Black - Secondary
Contribution

Static White - Outline
Contribution

Static White - Outline, Disabled
Contribution

Static White - Outline, Secondary
Contribution

Static Black - Outline
Contribution

Static Black - Outline, Disabled
Contribution

Static Black - Outline, Secondary
Contribution