Note: Version bump only for package @spectrum-web-components/button
Note: Version bump only for package @spectrum-web-components/button
- lock prerelease versions for Spectrum CSS (#5014) (8aa7734)
- overlay: make :focus-visible consistent when using overlay type modal (#4912) (7a5f786), closes #5021
- action-button: action-button with href can be perceived by screen reader (#4927) (2a0b3a5)
Note: Version bump only for package @spectrum-web-components/button
- remove deprecated 'static' references (#4818)
- add
static-color
to replace static
(#4808) (43cf086) - button: add noWrap property (#4779) (6760ec2)
Note: Version bump only for package @spectrum-web-components/button
- reactive-controller: new pending state controller (#4605) (68baf94)
Note: Version bump only for package @spectrum-web-components/button
Note: Version bump only for package @spectrum-web-components/button
Note: Version bump only for package @spectrum-web-components/button
Note: Version bump only for package @spectrum-web-components/button
Note: Version bump only for package @spectrum-web-components/button
Note: Version bump only for package @spectrum-web-components/button
Note: Version bump only for package @spectrum-web-components/button
Note: Version bump only for package @spectrum-web-components/button
Note: Version bump only for package @spectrum-web-components/button
Note: Version bump only for package @spectrum-web-components/button
Note: Version bump only for package @spectrum-web-components/button
- shared: ensure the "updateComplete" in Focusable is stable (885b4a5)
- button: prevent pointer interaction of child/slotted content (2cd5823)
- styles, theme: surface exports that omit Spectrum Vars proactively (#4142) (5b524c1)
- button: add missing progress-circle dependency (#4086) (2dfeeb3)
- progress-circle: ensure size can be applied to non-"size" attribute bearing elements (2bc1065)
- icon: use core tokens (a11ef6b)
- button: use larger icons in Close Button (c4aa02c)
- shared: update and expand attribute coverage in likeAnchor (5cb5f1d)
- button: adds pending button, fixes #3162 (#3163) (71254ec)
Note: Version bump only for package @spectrum-web-components/button
Note: Version bump only for package @spectrum-web-components/button
- button: support [icon-only] delivery (#3716) (e236a50)
Note: Version bump only for package @spectrum-web-components/button
Note: Version bump only for package @spectrum-web-components/button
Note: Version bump only for package @spectrum-web-components/button
Note: Version bump only for package @spectrum-web-components/button
Note: Version bump only for package @spectrum-web-components/button
Note: Version bump only for package @spectrum-web-components/button
- handle longpress and over filter overlays (483e52d)
Note: Version bump only for package @spectrum-web-components/button
- action-bar: use core tokens (4e21edf)
- added role for href button (5a4ad98)
- text fixes (0121fd6)
Note: Version bump only for package @spectrum-web-components/button
Note: Version bump only for package @spectrum-web-components/button
Note: Version bump only for package @spectrum-web-components/button
- shared: allow "disabled" first to return to "tabindex=0" in "focusable" (160bc59)
- add t-shirt sizing to Thumbnail and support for "xxs"/"xs" sizes (520a642)
- allow rendered anchors to be aria-hidden (2e9aa23)
- allow sp-dropdown to accept focus visibly from sp-field-label (134bafc)
- button: add "toggles" attribute to action button (3e2d80c)
- button: add excludeSourceSelector to reduce duplication of styles (683e88e)
- button: add multiple ui icon imports to sp-button (2f17fa9)
- button: allow element content in the default/label slot (7b0ef58)
- button: apply icon as slotted content in action-button styles (3b1487b)
- button: clean up clear button for reuse across elements (4c71eb1)
- button: delivery hold affordance when attribute available (aecc6fe)
- button: include "pointerleave" in management of the "active" state (2e702e4)
- button: minor docs spelling fix (a7a1359)
- button: no double link clicks (02d576c)
- button: prevent default on "space" based activations (708d587)
- button: relate to this.href correctly (fade3ea)
- button: remove old package export listings (32e8573)
- button: revert default "variant" application when missing (fab993e)
- button: use slot text observer pattern (a7288c3)
- correct @element jsDoc listing across library (c97a632)
- correct specificity of webkit appearance work around (f0d06bf)
- correctly delivery visuals and mouse interactions for litAnchor and extensions (0ae889a)
- docs button variant usage (894282c)
- dropdown: correctly support "quiet" variant (2a51a2b)
- ensure "click" on "NumpadEnter" key press (450fa01)
- ensure browser understandable extensions (f4e59f7)
- final prerelease review of canary builds (1fc032f)
- implement "emphasized" styles (750bbe7)
- include "type" in package.json, generate custom-elements.json (1a8d716)
- include default export in the "exports" fields (f32407d)
- include the "types" entry in package.json files (b432f59)
- match "pointerup" listeners with "pointercancel" for full coverage (7f2ce92)
- prevent default hoisting of custom pseudo elements (7f66346)
- remove errant readme content, correct icon selector (3dd1fb1)
- shared: make Focusable pass disabled always (a339d6f)
- stop merging selectors in a way that alters the cascade (369388f)
- update consumption of Spectrum CSS for latest version (ed2305b)
- update file path access (8898bf7)
- update latest Spectrum CSS beta releases (d8d3acc)
- update role application logic to not overwrite menu* roles (94b6aec)
- update to latest spectrum-css packages (a5ca19f)
- updating spectrum-config to support new label styles (cefeaad)
- use icons without "size" values (3fc7c91)
- use the "browsers" listing in postcss-preset-env (4eaf6a2)
- work around icon positioning error in CSS source (ef5271c)
- action-button: add action button pattern (03ac00a)
- action-group: add action-group pattern (d2de766)
- action-group: manage "one" and "multiple" selections (6fad59e)
- add and use icons-ui package (d9c3ab2)
- add dialog, dialog-wrapped, and underlay elements (3df9050)
- adopt DNA@7 base Spectrum CSS (e08cafd)
- allow activation of longpress content (55e71fd)
- apply sizedMixin for t-shirt sizing (d7b63fb)
- button-group: add ButtonGroup pattern (c4d85b5)
- button: accept update Spectrum Tokens (d6d6db1)
- button: action-buttons with icons AND text (aa788b1)
- button: add support for "sp-clear-button" (9028b6d)
- button: allow icon only buttons (25623d6)
- button: move "white" and "black" out of "variant" and into "static" (5cf51df)
- button: pass "label" property to "aria-label" (78ae59d)
- button: update spectrum css input (7b5b200)
- button: use latest @spectrum-css/button beta (b3b20ed)
- button: use synthetic button instead of native (49e94bc)
- button: using core-tokens for button (a4a6d42)
- card: upgrade to Spectrum CSS v3.0.0 (84cf1a9)
- close-button: add Close Button pattern (8e9e1ad)
- deprecate "icon-right" in buttons as per Spectrum (064a775)
- icons-workflow: vend fully registered icon components (941f3a4)
- include all Dev Mode files in side effects (f70817c)
- leverage "exports" field in package.json (321abd7)
- leverage latest Spectrum button API (9caf2f6)
- search: adds sp-search element (d484fc2)
- shared pkg versions, devmode define warning, registry-conflicts docs (6e49565)
- split-button: add split-button pattern (4833a59)
- support Spectrum Token consumption and update Action Button to use them (743ab16)
- support static white and static black variants of Action Button (7f1e25b)
- tabs: add sp-tab-panel element (b17d276)
- update lit-* dependencies, wip (377f3c8)
- use :focus-visable (via polyfill) instead of :focus (11c6fc7)
- use @adobe/spectrum-css@2.15.1 (3918888)
- use latest exports specification (a7ecf4b)
- use SixedMixin to manage "size" property (8819821)
- accept new Spectrum CSS featuring simpler DOM structure (a0b042b)
- button: recentralize shared styles in base (85d3d0a)
- use "sideEffects" listing in package.json (7271614)
- use imported TypeScript helpers instead of inlining them (cc2bd0a)
- Revert "chore: release new versions" (a6d655d)
Note: Version bump only for package @spectrum-web-components/button
Note: Version bump only for package @spectrum-web-components/button
- prevent default hoisting of custom pseudo elements (7f66346)
- accept new Spectrum CSS featuring simpler DOM structure (a0b042b)
- docs button variant usage (894282c)
- button: revert default "variant" application when missing (fab993e)
- updating spectrum-config to support new label styles (cefeaad)
- work around icon positioning error in CSS source (ef5271c)
- button: move "white" and "black" out of "variant" and into "static" (5cf51df)
- button: using core-tokens for button (a4a6d42)
Note: Version bump only for package @spectrum-web-components/button
Note: Version bump only for package @spectrum-web-components/button
Note: Version bump only for package @spectrum-web-components/button
Note: Version bump only for package @spectrum-web-components/button
Note: Version bump only for package @spectrum-web-components/button
- button: minor docs spelling fix (a7a1359)
Note: Version bump only for package @spectrum-web-components/button
- match "pointerup" listeners with "pointercancel" for full coverage (7f2ce92)
Note: Version bump only for package @spectrum-web-components/button
Note: Version bump only for package @spectrum-web-components/button
- include all Dev Mode files in side effects (f70817c)
Note: Version bump only for package @spectrum-web-components/button
- support Spectrum Token consumption and update Action Button to use them (743ab16)
Note: Version bump only for package @spectrum-web-components/button
Note: Version bump only for package @spectrum-web-components/button
- update consumption of Spectrum CSS for latest version (ed2305b)
Note: Version bump only for package @spectrum-web-components/button
- button: add multiple ui icon imports to sp-button (2f17fa9)
Note: Version bump only for package @spectrum-web-components/button
Note: Version bump only for package @spectrum-web-components/button
- close-button: add Close Button pattern (8e9e1ad)
- leverage latest Spectrum button API (9caf2f6)
- support static white and static black variants of Action Button (7f1e25b)
Note: Version bump only for package @spectrum-web-components/button
Note: Version bump only for package @spectrum-web-components/button
Note: Version bump only for package @spectrum-web-components/button
- add t-shirt sizing to Thumbnail and support for "xxs"/"xs" sizes (520a642)
- update lit-* dependencies, wip (377f3c8)
Note: Version bump only for package @spectrum-web-components/button
- adopt DNA@7 base Spectrum CSS (e08cafd)
Note: Version bump only for package @spectrum-web-components/button
- ensure "click" on "NumpadEnter" key press (450fa01)
Note: Version bump only for package @spectrum-web-components/button
- correct @element jsDoc listing across library (c97a632)
Note: Version bump only for package @spectrum-web-components/button
Note: Version bump only for package @spectrum-web-components/button
Note: Version bump only for package @spectrum-web-components/button
- update role application logic to not overwrite menu* roles (94b6aec)
Note: Version bump only for package @spectrum-web-components/button
- tabs: add sp-tab-panel element (b17d276)
- allow rendered anchors to be aria-hidden (2e9aa23)
- button: no double link clicks (02d576c)
Note: Version bump only for package @spectrum-web-components/button
- button: prevent default on "space" based activations (708d587)
Note: Version bump only for package @spectrum-web-components/button
- correctly delivery visuals and mouse interactions for litAnchor and extensions (0ae889a)
Note: Version bump only for package @spectrum-web-components/button
- button: include "pointerleave" in management of the "active" state (2e702e4)
- use latest exports specification (a7ecf4b)
- update to latest spectrum-css packages (a5ca19f)
- allow activation of longpress content (55e71fd)
- button: recentralize shared styles in base (85d3d0a)
Note: Version bump only for package @spectrum-web-components/button
- button: remove old package export listings (32e8573)
- allow sp-dropdown to accept focus visibly from sp-field-label (134bafc)
- correct specificity of webkit appearance work around (f0d06bf)
- final prerelease review of canary builds (1fc032f)
- implement "emphasized" styles (750bbe7)
- include the "types" entry in package.json files (b432f59)
- stop merging selectors in a way that alters the cascade (369388f)
- update file path access (8898bf7)
- update latest Spectrum CSS beta releases (d8d3acc)
- use icons without "size" values (3fc7c91)
- use the "browsers" listing in postcss-preset-env (4eaf6a2)
- button: delivery hold affordance when attribute available (aecc6fe)
- button: relate to this.href correctly (fade3ea)
- apply sizedMixin for t-shirt sizing (d7b63fb)
- deprecate "icon-right" in buttons as per Spectrum (064a775)
- use SixedMixin to manage "size" property (8819821)
- action-button: add action button pattern (03ac00a)
- action-group: manage "one" and "multiple" selections (6fad59e)
- button: update spectrum css input (7b5b200)
- button: use latest @spectrum-css/button beta (b3b20ed)
- button: use synthetic button instead of native (49e94bc)
- icons-workflow: vend fully registered icon components (941f3a4)
- final prerelease review of canary builds (1fc032f)
- use icons without "size" values (3fc7c91)
- button: relate to this.href correctly (fade3ea)
- allow sp-dropdown to accept focus visibly from sp-field-label (134bafc)
- implement "emphasized" styles (750bbe7)
- include the "types" entry in package.json files (b432f59)
- stop merging selectors in a way that alters the cascade (369388f)
- update file path access (8898bf7)
- button: delivery hold affordance when attribute available (aecc6fe)
- update latest Spectrum CSS beta releases (d8d3acc)
- apply sizedMixin for t-shirt sizing (d7b63fb)
- use SixedMixin to manage "size" property (8819821)
- action-button: add action button pattern (03ac00a)
- action-group: manage "one" and "multiple" selections (6fad59e)
- button: update spectrum css input (7b5b200)
- button: use latest @spectrum-css/button beta (b3b20ed)
- button: use synthetic button instead of native (49e94bc)
- icons-workflow: vend fully registered icon components (941f3a4)
Note: Version bump only for package @spectrum-web-components/button
- include default export in the "exports" fields (f32407d)
Note: Version bump only for package @spectrum-web-components/button
Note: Version bump only for package @spectrum-web-components/button
- action-group: add action-group pattern (d2de766)
- card: upgrade to Spectrum CSS v3.0.0 (84cf1a9)
- split-button: add split-button pattern (4833a59)
Note: Version bump only for package @spectrum-web-components/button
Note: Version bump only for package @spectrum-web-components/button
- ensure browser understandable extensions (f4e59f7)
Note: Version bump only for package @spectrum-web-components/button
- leverage "exports" field in package.json (321abd7)
- button-group: add ButtonGroup pattern (c4d85b5)
- add dialog, dialog-wrapped, and underlay elements (3df9050)
- button: clean up clear button for reuse across elements (4c71eb1)
- remove errant readme content, correct icon selector (3dd1fb1)
Note: Version bump only for package @spectrum-web-components/button
- button: add excludeSourceSelector to reduce duplication of styles (683e88e)
- add and use icons-ui package (d9c3ab2)
- use "sideEffects" listing in package.json (7271614)
Note: Version bump only for package @spectrum-web-components/button
- button: add "toggles" attribute to action button (3e2d80c)
- dropdown: correctly support "quiet" variant (2a51a2b)
Note: Version bump only for package @spectrum-web-components/button
Note: Version bump only for package @spectrum-web-components/button
Note: Version bump only for package @spectrum-web-components/button
Note: Version bump only for package @spectrum-web-components/button
Note: Version bump only for package @spectrum-web-components/button
- button: add support for "sp-clear-button" (9028b6d)
Note: Version bump only for package @spectrum-web-components/button
- include "type" in package.json, generate custom-elements.json (1a8d716)
- use :focus-visable (via polyfill) instead of :focus (11c6fc7)
- use @adobe/spectrum-css@2.15.1 (3918888)
- button: use slot text observer pattern (a7288c3)
- shared: make Focusable pass disabled always (a339d6f)
- button: allow element content in the default/label slot (7b0ef58)
- button: apply icon as slotted content in action-button styles (3b1487b)
- button: action-buttons with icons AND text (aa788b1)
- button: allow icon only buttons (25623d6)
- button: pass "label" property to "aria-label" (78ae59d)
- search: adds sp-search element (d484fc2)
- use imported TypeScript helpers instead of inlining them (cc2bd0a)
Note: Version bump only for package @spectrum-web-components/button
An <sp-button>
represents an action a user can take. sp-buttons can be clicked or tapped to perform an action or to navigate to another page. sp-buttons in Spectrum have several variations for different uses and multiple levels of loudness for various attention-getting needs.

yarn add @spectrum-web-components/button
Import the side effectful registration of <sp-button>
or <sp-clear-button>
as follows:
import '@spectrum-web-components/button/sp-button.js';
import '@spectrum-web-components/button/sp-clear-button.js';
import '@spectrum-web-components/button/sp-close-button.js';
When looking to leverage the Button
, ClearButton
, or CloseButton
base classes as a type and/or for extension purposes, do so via:
import { Button, ClearButton, CloseButton } from '@spectrum-web-components/button';
Small <sp-button size="s">Small</sp-button>
Medium <sp-button size="m">Medium</sp-button>
Large <sp-button size="l">Large</sp-button>
Extra Large <sp-button size="xl">Extra Large</sp-button>
<sp-button>
elements can be provided a visible label, a label with an icon, or just an icon (a non-visible label can be prived via the label
attribute on an <sp-button>
or on an <sp-icon*>
element child to appropriately fulfill the accessibility contract of the button). An icon is provided by placing an icon element to the icon
slot.
<sp-button-group>
<sp-button variant="primary">Label only</sp-button>
<sp-button variant="primary">
<sp-icon-help slot="icon"></sp-icon-help>
Icon + Label
</sp-button>
<sp-button variant="primary">
<svg
slot="icon"
viewBox="0 0 36 36"
focusable="false"
aria-hidden="true"
role="img"
>
<path
d="M16 36a4.407 4.407 0 0 0 4-4h-8a4.407 4.407 0 0 0 4 4zm9.143-24.615c0-3.437-3.206-4.891-7.143-5.268V3a1.079 1.079 0 0 0-1.143-1h-1.714A1.079 1.079 0 0 0 14 3v3.117c-3.937.377-7.143 1.831-7.143 5.268C6.857 26.8 2 26.111 2 28.154V30h28v-1.846C30 26 25.143 26.8 25.143 11.385z"
></path>
</svg>
SVG Icon + Label
</sp-button>
<sp-button variant="primary" label="Icon only" icon-only>
<sp-icon-help slot="icon"></sp-icon-help>
</sp-button>
</sp-button-group>
There are many button variants to choose from in Spectrum. The variant
attribute defaults to accent
but also accepts the following value: accent
, primary
, secondary
, negative
, white
, and black
. They display as follows:
Accent <sp-button-group style="min-width: max-content">
<sp-button variant="accent">Label only</sp-button>
<sp-button variant="accent">
<sp-icon-help slot="icon"></sp-icon-help>
Icon + Label
</sp-button>
<sp-button variant="accent" label="Icon only" icon-only>
<sp-icon-help slot="icon"></sp-icon-help>
</sp-button>
</sp-button-group>
Primary <sp-button-group style="min-width: max-content">
<sp-button variant="primary">Label only</sp-button>
<sp-button variant="primary">
<sp-icon-help slot="icon"></sp-icon-help>
Icon + Label
</sp-button>
<sp-button variant="primary" label="Icon only" icon-only>
<sp-icon-help slot="icon"></sp-icon-help>
</sp-button>
</sp-button-group>
Secondary <sp-button-group style="min-width: max-content">
<sp-button variant="secondary">Label only</sp-button>
<sp-button variant="secondary">
<sp-icon-help slot="icon"></sp-icon-help>
Icon + Label
</sp-button>
<sp-button variant="secondary" label="Icon only" icon-only>
<sp-icon-help slot="icon"></sp-icon-help>
</sp-button>
</sp-button-group>
Negative <sp-button-group style="min-width: max-content">
<sp-button variant="negative">Label only</sp-button>
<sp-button variant="negative">
<sp-icon-help slot="icon"></sp-icon-help>
Icon + Label
</sp-button>
<sp-button variant="negative" label="Icon only" icon-only>
<sp-icon-help slot="icon"></sp-icon-help>
</sp-button>
</sp-button-group>
Black <sp-button-group style="min-width: max-content">
<sp-button static-color="black">Label only</sp-button>
<sp-button static-color="black">
<sp-icon-help slot="icon"></sp-icon-help>
Icon + Label
</sp-button>
<sp-button static-color="black" label="Icon only" icon-only>
<sp-icon-help slot="icon"></sp-icon-help>
</sp-button>
</sp-button-group>
White <sp-button-group style="min-width: max-content">
<sp-button static-color="white">Label only</sp-button>
<sp-button static-color="white">
<sp-icon-help slot="icon"></sp-icon-help>
Icon + Label
</sp-button>
<sp-button static-color="white" label="Icon only" icon-only>
<sp-icon-help slot="icon"></sp-icon-help>
</sp-button>
</sp-button-group>
The treatment
attribute accepts fill
and outline
as values, and defaults to fill
. These display as follows:
Fill <sp-button-group style="min-width: max-content">
<sp-button treatment="fill" variant="primary">Primary, Fill</sp-button>
<sp-button treatment="fill" variant="secondary">Secondary, Fill</sp-button>
<sp-button treatment="fill" variant="negative">Negative, Fill</sp-button>
</sp-button-group>
Outline <sp-button-group style="min-width: max-content">
<sp-button treatment="outline" variant="primary">
Primary, Outline
</sp-button>
<sp-button treatment="outline" variant="secondary">
Secondary, Outline
</sp-button>
<sp-button treatment="outline" variant="negative">
Negative, Outline
</sp-button>
</sp-button-group>
Outline, black <sp-button-group
style="background: var(--spectrum-seafoam-600); padding: 0.5em; min-width: max-content"
>
<sp-button treatment="outline" static-color="black">Label only</sp-button>
<sp-button treatment="outline" static-color="black">
<sp-icon-help slot="icon"></sp-icon-help>
Icon + Label
</sp-button>
<sp-button
treatment="outline"
static-color="black"
label="Icon only"
icon-only
>
<sp-icon-help slot="icon"></sp-icon-help>
</sp-button>
</sp-button-group>
Outline, white <sp-button-group
style="background: var(--spectrum-seafoam-600); padding: 0.5em; min-width: max-content"
>
<sp-button treatment="outline" static-color="white">Label only</sp-button>
<sp-button treatment="outline" static-color="white">
<sp-icon-help slot="icon"></sp-icon-help>
Icon + Label
</sp-button>
<sp-button
treatment="outline"
static-color="white"
label="Icon only"
icon-only
>
<sp-icon-help slot="icon"></sp-icon-help>
</sp-button>
</sp-button-group>
In addition to the variant, <sp-button>
elements support two different visual states, disabled and pending, which can be applied by adding the attribute disabled
or pending
respectively. All <sp-button>
variants support these states.
While disabled, <sp-button>
elements will not respond to click events and will appear faded.
<sp-button-group>
<sp-button variant="primary">Normal</sp-button>
<sp-button variant="primary" disabled>Disabled</sp-button>
</sp-button-group>
While in pending state, <sp-button>
elements will not respond to click events and will appear faded with an indeterminent <sp-progress-circle>
. <sp-button>
elements label and icon will be hidden while in pending state.
Note: pending
state of the <sp-button>
element is applied after 1s delay to avoid flashing the pending state for quick actions. You can override the delay by adding custom css var --pending-delay
to your css.
<sp-button-group>
<sp-button variant="primary">Normal</sp-button>
<sp-button variant="primary" pending>Pending</sp-button>
</sp-button-group>
Events handlers for clicks and other user actions can be registered on a <sp-button>
as on a standard HTML <button>
element.
<sp-button onclick="spAlert(this, '<sp-button> clicked!')">Click me</sp-button>
In addition to handling events like a native <button>
HTML element, one can also use a <sp-button>
in place of the <a>
HTML element by using the href
and optional target
attribute.
<sp-button
href="https://github.com/adobe/spectrum-web-components"
target="_blank"
>
Click me
</sp-button>
The autofocus
attribute sets focus to the <sp-button>
when the component mounts. This is useful for setting focus to a specific sp-button when a popover or dialog opens.
<sp-button autofocus>Confirm</sp-button>