- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
- Default
- Express
Button - static color
Component status | Contribution |
---|---|
Current version | @spectrum-css/button@13.4.0 |
Released | October 4, 2024 |
S2-foundations | @spectrum-css/button@14.0.0-s2-foundations.18 |
Released | October 4, 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 WhiteContribution
S
M (default)
L
XL
<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 - DisabledContribution
<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 - SecondaryContribution
<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 BlackContribution
S
M (default)
L
XL
<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 - DisabledContribution
<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 - SecondaryContribution
<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 - OutlineContribution
S
M (default)
L
XL
<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, DisabledContribution
<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, SecondaryContribution
<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 - OutlineContribution
S
M (default)
L
XL
<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, DisabledContribution
<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, SecondaryContribution
<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.