sp-button
NPM
1.0.0
Storybook
View Storybook
Try it on
webcomponents.dev
Attributes and Properties #
active
active
boolean
false
disabled
disabled
boolean
false
download
download
string | undefined
href
href
string | undefined
label
label
string | undefined
noWrap
no-wrap
boolean
false
pending
pending
boolean
false
pendingLabel
pending-label
string
'Pending'
quiet
quiet
boolean
referrerpolicy
referrerpolicy
| 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url' | undefined
rel
rel
string | undefined
staticColor
static-color
'black' | 'white' | undefined
tabIndex
tabIndex
number
target
target
'_blank' | '_parent' | '_self' | '_top' | undefined
treatment
treatment
ButtonTreatments
'fill'
type
type
'button' | 'submit' | 'reset'
'button'
variant
variant
ButtonVariants
Slots #
default slot
icon
1.0.0 (2024-10-31) #
BREAKING CHANGES #
- remove deprecated 'static' references (
#4818 )
0.49.0 (2024-10-15) #
Features #
- add
static-color
to replacestatic
(#4808 ) (43cf086 ) - button: add noWrap property (
#4779 ) (6760ec2 )
0.48.1 (2024-10-01) #
Note: Version bump only for package @spectrum-web-components/button
0.48.0 (2024-09-17) #
Features #
- reactive-controller: new pending state controller (
#4605 ) (68baf94 )
0.47.2 (2024-09-03) #
Note: Version bump only for package @spectrum-web-components/button
0.47.1 (2024-08-27) #
Note: Version bump only for package @spectrum-web-components/button
0.47.0 (2024-08-20) #
Note: Version bump only for package @spectrum-web-components/button
0.46.0 (2024-08-08) #
Note: Version bump only for package @spectrum-web-components/button
0.45.0 (2024-07-30) #
Note: Version bump only for package @spectrum-web-components/button
0.44.0 (2024-07-15) #
Note: Version bump only for package @spectrum-web-components/button
0.43.0 (2024-06-11) #
Note: Version bump only for package @spectrum-web-components/button
0.42.5 (2024-05-24) #
Note: Version bump only for package @spectrum-web-components/button
0.42.4 (2024-05-14) #
Note: Version bump only for package @spectrum-web-components/button
0.42.3 (2024-05-01) #
Note: Version bump only for package @spectrum-web-components/button
0.42.2 (2024-04-03) #
Note: Version bump only for package @spectrum-web-components/button
0.42.1 (2024-04-02) #
Bug Fixes #
- shared: ensure the "updateComplete" in Focusable is stable (
885b4a5 )
0.42.0 (2024-03-19) #
Bug Fixes #
- button: prevent pointer interaction of child/slotted content (
2cd5823 ) - styles, theme: surface exports that omit Spectrum Vars proactively (
#4142 ) (5b524c1 )
0.41.2 (2024-03-05) #
Bug Fixes #
- button: add missing progress-circle dependency (
#4086 ) (2dfeeb3 )
0.41.1 (2024-02-22) #
Bug Fixes #
- progress-circle: ensure size can be applied to non-"size" attribute bearing elements (
2bc1065 )
0.41.0 (2024-02-13) #
Features #
- icon: use core tokens (
a11ef6b )
0.40.5 (2024-02-05) #
Bug Fixes #
- button: use larger icons in Close Button (
c4aa02c )
0.40.4 (2024-01-29) #
Bug Fixes #
- shared: update and expand attribute coverage in likeAnchor (
5cb5f1d )
0.40.3 (2024-01-11) #
Bug Fixes #
- button: adds pending button, fixes
#3162 (#3163 ) (71254ec )
0.40.2 (2023-12-18) #
Note: Version bump only for package @spectrum-web-components/button
0.40.1 (2023-12-05) #
Note: Version bump only for package @spectrum-web-components/button
0.40.0 (2023-11-16) #
Bug Fixes #
- button: support [icon-only] delivery (
#3716 ) (e236a50 )
0.39.4 (2023-11-02) #
Note: Version bump only for package @spectrum-web-components/button
0.39.3 (2023-10-18) #
Note: Version bump only for package @spectrum-web-components/button
0.39.2 (2023-10-13) #
Note: Version bump only for package @spectrum-web-components/button
0.39.1 (2023-10-06) #
Note: Version bump only for package @spectrum-web-components/button
0.39.0 (2023-09-25) #
Note: Version bump only for package @spectrum-web-components/button
0.38.0 (2023-09-05) #
Note: Version bump only for package @spectrum-web-components/button
0.37.0 (2023-08-18) #
Bug Fixes #
- handle longpress and over filter overlays (
483e52d )
0.36.0 (2023-08-18) #
Note: Version bump only for package @spectrum-web-components/button
0.35.0 (2023-07-31) #
Features #
- action-bar: use core tokens (
4e21edf )
0.34.0 (2023-07-11) #
Bug Fixes #
- added role for href button (
5a4ad98 ) - text fixes (
0121fd6 )
0.33.2 (2023-06-14) #
Note: Version bump only for package @spectrum-web-components/button
0.33.0 (2023-06-08) #
Note: Version bump only for package @spectrum-web-components/button
0.32.0 (2023-06-01) #
Note: Version bump only for package @spectrum-web-components/button
0.31.0 (2023-05-17) #
Bug Fixes #
- shared: allow "disabled" first to return to "tabindex=0" in "focusable" (
160bc59 )
0.30.0 (2023-05-03) #
Bug Fixes #
- 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 )
Features #
- 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 )
Performance Improvements #
- 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 )
Reverts #
- Revert "chore: release new versions" (
a6d655d )
0.20.5 (2023-04-24) #
Note: Version bump only for package @spectrum-web-components/button
0.20.4 (2023-04-05) #
Note: Version bump only for package @spectrum-web-components/button
0.20.3 (2023-03-22) #
Bug Fixes #
- prevent default hoisting of custom pseudo elements (
7f66346 )
Performance Improvements #
- accept new Spectrum CSS featuring simpler DOM structure (
a0b042b )
0.20.2 (2023-03-08) #
Bug Fixes #
- docs button variant usage (
894282c )
0.20.1 (2023-02-13) #
Bug Fixes #
- button: revert default "variant" application when missing (
fab993e )
0.20.0 (2023-02-08) #
Bug Fixes #
- updating spectrum-config to support new label styles (
cefeaad ) - work around icon positioning error in CSS source (
ef5271c )
Features #
- button: move "white" and "black" out of "variant" and into "static" (
5cf51df ) - button: using core-tokens for button (
a4a6d42 )
0.19.10 (2023-01-23) #
Note: Version bump only for package @spectrum-web-components/button
0.19.9 (2023-01-09) #
Note: Version bump only for package @spectrum-web-components/button
0.19.8 (2022-12-08) #
Note: Version bump only for package @spectrum-web-components/button
0.19.7 (2022-11-21) #
Note: Version bump only for package @spectrum-web-components/button
0.19.6 (2022-11-14) #
Note: Version bump only for package @spectrum-web-components/button
0.19.5 (2022-10-28) #
Bug Fixes #
- button: minor docs spelling fix (
a7a1359 )
0.19.4 (2022-10-17) #
Note: Version bump only for package @spectrum-web-components/button
0.19.3 (2022-10-10) #
Bug Fixes #
- match "pointerup" listeners with "pointercancel" for full coverage (
7f2ce92 )
0.19.2 (2022-09-14) #
Note: Version bump only for package @spectrum-web-components/button
0.19.1 (2022-08-24) #
Note: Version bump only for package @spectrum-web-components/button
0.19.0 (2022-08-09) #
Features #
- include all Dev Mode files in side effects (
f70817c )
0.18.1 (2022-08-04) #
Note: Version bump only for package @spectrum-web-components/button
0.18.0 (2022-07-18) #
Features #
- support Spectrum Token consumption and update Action Button to use them (
743ab16 )
0.17.7 (2022-06-29) #
Note: Version bump only for package @spectrum-web-components/button
0.17.6 (2022-06-07) #
Note: Version bump only for package @spectrum-web-components/button
0.17.5 (2022-05-27) #
Bug Fixes #
- update consumption of Spectrum CSS for latest version (
ed2305b )
0.17.4 (2022-05-12) #
Note: Version bump only for package @spectrum-web-components/button
0.17.3 (2022-04-21) #
Bug Fixes #
- button: add multiple ui icon imports to sp-button (
2f17fa9 )
0.17.2 (2022-03-30) #
Note: Version bump only for package @spectrum-web-components/button
0.17.1 (2022-03-08) #
Note: Version bump only for package @spectrum-web-components/button
0.17.0 (2022-03-04) #
Features #
- close-button: add Close Button pattern (
8e9e1ad ) - leverage latest Spectrum button API (
9caf2f6 ) - support static white and static black variants of Action Button (
7f1e25b )
0.16.4 (2022-02-22) #
Note: Version bump only for package @spectrum-web-components/button
0.16.3 (2022-01-26) #
Note: Version bump only for package @spectrum-web-components/button
0.16.2 (2022-01-07) #
Note: Version bump only for package @spectrum-web-components/button
0.16.1 (2021-12-13) #
Bug Fixes #
- add t-shirt sizing to Thumbnail and support for "xxs"/"xs" sizes (
520a642 )
0.16.0 (2021-11-08) #
Features #
- update lit-* dependencies, wip (
377f3c8 )
0.15.1 (2021-11-08) #
Note: Version bump only for package @spectrum-web-components/button
0.15.0 (2021-11-02) #
Features #
- adopt DNA@7 base Spectrum CSS (
e08cafd )
0.14.9 (2021-10-12) #
Note: Version bump only for package @spectrum-web-components/button
0.14.8 (2021-09-20) #
Bug Fixes #
- ensure "click" on "NumpadEnter" key press (
450fa01 )
0.14.7 (2021-09-13) #
Note: Version bump only for package @spectrum-web-components/button
0.14.6 (2021-08-24) #
Bug Fixes #
- correct
@element jsDoc listing across library (c97a632 )
0.14.5 (2021-08-03) #
Note: Version bump only for package @spectrum-web-components/button
0.14.4 (2021-07-22) #
Note: Version bump only for package @spectrum-web-components/button
0.14.3 (2021-07-01) #
Note: Version bump only for package @spectrum-web-components/button
0.14.2 (2021-06-16) #
Bug Fixes #
- update role application logic to not overwrite menu* roles (
94b6aec )
0.14.1 (2021-06-07) #
Note: Version bump only for package @spectrum-web-components/button
0.14.0 (2021-05-24) #
Features #
- tabs: add sp-tab-panel element (
b17d276 )
0.13.7 (2021-05-12) #
Bug Fixes #
- allow rendered anchors to be aria-hidden (
2e9aa23 )
0.13.6 (2021-04-15) #
Bug Fixes #
- button: no double link clicks (
02d576c )
0.13.5 (2021-04-09) #
Note: Version bump only for package @spectrum-web-components/button
0.13.4 (2021-03-29) #
Bug Fixes #
- button: prevent default on "space" based activations (
708d587 )
0.13.3 (2021-03-22) #
Note: Version bump only for package @spectrum-web-components/button
0.13.2 (2021-03-22) #
Bug Fixes #
- correctly delivery visuals and mouse interactions for litAnchor and extensions (
0ae889a )
0.13.1 (2021-03-05) #
Note: Version bump only for package @spectrum-web-components/button
0.13.0 (2021-03-04) #
Bug Fixes #
- button: include "pointerleave" in management of the "active" state (
2e702e4 )
Features #
- use latest exports specification (
a7ecf4b )
0.12.0 (2021-02-11) #
Bug Fixes #
- update to latest spectrum-css packages (
a5ca19f )
Features #
- allow activation of longpress content (
55e71fd )
Performance Improvements #
- button: recentralize shared styles in base (
85d3d0a )
0.11.2 (2021-02-02) #
Note: Version bump only for package @spectrum-web-components/button
0.11.1 (2021-01-28) #
Bug Fixes #
- button: remove old package export listings (
32e8573 )
0.11.0 (2021-01-21) #
Bug Fixes #
- 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 )
Features #
- 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 )
0.10.0 (2021-01-13) #
Bug Fixes #
- 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 )
Features #
- 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 )
0.9.4 (2020-10-12) #
Note: Version bump only for package @spectrum-web-components/button
0.9.3 (2020-10-12) #
Bug Fixes #
- include default export in the "exports" fields (
f32407d )
0.9.2 (2020-09-25) #
Note: Version bump only for package @spectrum-web-components/button
0.9.1 (2020-09-14) #
Note: Version bump only for package @spectrum-web-components/button
0.9.0 (2020-08-31) #
Features #
- action-group: add action-group pattern (
d2de766 ) - card: upgrade to Spectrum CSS v3.0.0 (
84cf1a9 ) - split-button: add split-button pattern (
4833a59 )
0.8.4 (2020-08-19) #
Note: Version bump only for package @spectrum-web-components/button
0.8.3 (2020-07-27) #
Note: Version bump only for package @spectrum-web-components/button
0.8.2 (2020-07-24) #
Bug Fixes #
- ensure browser understandable extensions (
f4e59f7 )
0.8.1 (2020-07-22) #
Note: Version bump only for package @spectrum-web-components/button
0.8.0 (2020-07-17) #
Features #
- leverage "exports" field in package.json (
321abd7 )
0.7.0 (2020-06-08) #
Features #
- button-group: add ButtonGroup pattern (
c4d85b5 )
0.6.0 (2020-05-12) #
Features #
- add dialog, dialog-wrapped, and underlay elements (
3df9050 )
0.5.2 (2020-05-08) #
Bug Fixes #
- button: clean up clear button for reuse across elements (
4c71eb1 ) - remove errant readme content, correct icon selector (
3dd1fb1 )
0.5.1 (2020-04-21) #
Note: Version bump only for package @spectrum-web-components/button
0.5.0 (2020-04-16) #
Bug Fixes #
- button: add excludeSourceSelector to reduce duplication of styles (
683e88e )
Features #
- add and use icons-ui package (
d9c3ab2 )
Performance Improvements #
- use "sideEffects" listing in package.json (
7271614 )
0.4.8 (2020-04-10) #
Note: Version bump only for package @spectrum-web-components/button
0.4.7 (2020-04-07) #
Bug Fixes #
- button: add "toggles" attribute to action button (
3e2d80c )
0.4.6 (2020-03-11) #
Bug Fixes #
- dropdown: correctly support "quiet" variant (
2a51a2b )
0.4.5 (2020-02-05) #
Note: Version bump only for package @spectrum-web-components/button
0.4.4 (2020-02-01) #
Note: Version bump only for package @spectrum-web-components/button
0.4.3 (2020-01-30) #
Note: Version bump only for package @spectrum-web-components/button
0.4.2 (2020-01-06) #
Note: Version bump only for package @spectrum-web-components/button
0.4.1 (2019-12-12) #
Note: Version bump only for package @spectrum-web-components/button
0.4.0 (2019-12-09) #
Features #
- button: add support for "sp-clear-button" (
9028b6d )
0.3.2 (2019-12-02) #
Note: Version bump only for package @spectrum-web-components/button
0.3.1 (2019-11-27) #
Bug Fixes #
- include "type" in package.json, generate custom-elements.json (
1a8d716 )
0.3.0 (2019-11-19) #
Features #
- use :focus-visable (via polyfill) instead of :focus (
11c6fc7 ) - use @adobe/spectrum-css@2.15.1 (
3918888 )
0.2.2 (2019-11-01) #
Bug Fixes #
- button: use slot text observer pattern (
a7288c3 ) - shared: make Focusable pass disabled always (
a339d6f )
0.2.1 (2019-10-16) #
Bug Fixes #
- button: allow element content in the default/label slot (
7b0ef58 )
0.2.0 (2019-10-14) #
Bug Fixes #
- button: apply icon as slotted content in action-button styles (
3b1487b )
Features #
- 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 )
Performance Improvements #
- use imported TypeScript helpers instead of inlining them (
cc2bd0a )
0.1.3 (2019-10-03) #
Note: Version bump only for package @spectrum-web-components/button
Description #
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.
Usage #
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';
Sizes #
<sp-button size="s">Small</sp-button>
<sp-button size="m">Medium</sp-button>
<sp-button size="l">Large</sp-button>
<sp-button size="xl">Extra Large</sp-button>
Content #
<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>
Variants #
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:
<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>
<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>
<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>
<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>
<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>
<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>
Treatment #
The treatment
attribute accepts fill
and outline
as values, and defaults to fill
. These display as follows:
<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>
<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>
<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>
<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>
States #
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.
Disabled #
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>
Pending #
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>
Handling events #
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>
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>
Autofocus #
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>