sp-button
Attributes and Properties #
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
active | active | boolean | false | |
autofocus | autofocus | boolean | false | When this control is rendered, focus it automatically |
dir | dir | 'ltr' | 'rtl' | 'ltr' | |
disabled | disabled | boolean | false | Disable this control. It will not receive focus or events |
download | download | string | undefined | | |
href | href | string | undefined | | |
label | label | string | undefined | | |
quiet | quiet | boolean | false | Style this button to be less obvious |
rel | rel | string | undefined | | |
size | size | ElementSize | | |
tabIndex | tabIndex | number | | The tab index to apply to this control. See general documentation about the tabindex HTML property |
target | target | '_blank' | '_parent' | '_self' | '_top' | undefined | | |
type | type | 'button' | 'submit' | 'reset' | 'button' | |
variant | variant | ButtonVariants | 'cta' | The visual variant to apply to this button. |
warning | warning | boolean | false | There is a warning in place for this control |
Slots #
| Name | Description |
|---|---|
default slot | text label of the Button |
icon | The icon to use for Button |
CSS Custom Properties #
| Name | Default |
|---|---|
--spectrum-alias-body-text-font-family | var(--spectrum-global-font-family-base) |
--spectrum-alias-component-text-line-height | var(--spectrum-global-font-line-height-small) |
--spectrum-alias-focus-ring-gap | var(--spectrum-global-dimension-static-size-25) |
--spectrum-alias-focus-ring-size | var(--spectrum-global-dimension-static-size-25) |
--spectrum-alias-icon-color-overbackground | var(--spectrum-global-color-static-white) |
--spectrum-alias-icon-color-overbackground-disabled | rgba(255,255,255,0.2) |
--spectrum-button-l-primary-texticon-border-radius | var(--spectrum-global-dimension-size-250) |
--spectrum-button-l-primary-texticon-border-size | var(--spectrum-alias-border-size-thick) |
--spectrum-button-l-primary-texticon-focus-ring-size | var(--spectrum-alias-focus-ring-size) |
--spectrum-button-l-primary-texticon-icon-gap | var(--spectrum-global-dimension-size-115) |
--spectrum-button-l-primary-texticon-padding-left | var(--spectrum-global-dimension-size-225) |
--spectrum-button-l-primary-texticon-text-font-weight | var(--spectrum-global-font-weight-bold) |
--spectrum-button-l-primary-texticon-text-line-height | var(--spectrum-alias-component-text-line-height) |
--spectrum-button-l-primary-texticon-text-size | var(--spectrum-global-dimension-font-size-200) |
--spectrum-button-l-primary-textonly-border-size | var(--spectrum-alias-border-size-thick) |
--spectrum-button-l-primary-textonly-height | var(--spectrum-global-dimension-size-500) |
--spectrum-button-l-primary-textonly-min-width | var(--spectrum-global-dimension-size-1125) |
--spectrum-button-l-primary-textonly-padding-left | var(--spectrum-global-dimension-size-250) |
--spectrum-button-l-primary-textonly-padding-right | var(--spectrum-global-dimension-size-250) |
--spectrum-button-l-primary-textonly-text-padding-bottom | var(--spectrum-global-dimension-size-130) |
--spectrum-button-l-primary-textonly-text-padding-top | undefined |
--spectrum-button-m-cta-texticon-background-color | var(--spectrum-semantic-cta-background-color-default) |
--spectrum-button-m-cta-texticon-background-color-disabled | var(--spectrum-global-color-gray-200) |
--spectrum-button-m-cta-texticon-background-color-down | var(--spectrum-semantic-cta-background-color-down) |
--spectrum-button-m-cta-texticon-background-color-hover | var(--spectrum-semantic-cta-background-color-hover) |
--spectrum-button-m-cta-texticon-background-color-key-focus | var(--spectrum-semantic-cta-background-color-hover) |
--spectrum-button-m-cta-texticon-border-color | var(--spectrum-semantic-cta-background-color-default) |
--spectrum-button-m-cta-texticon-border-color-disabled | var(--spectrum-global-color-gray-200) |
--spectrum-button-m-cta-texticon-border-color-down | var(--spectrum-semantic-cta-background-color-down) |
--spectrum-button-m-cta-texticon-border-color-hover | var(--spectrum-semantic-cta-background-color-hover) |
--spectrum-button-m-cta-texticon-border-color-key-focus | var(--spectrum-semantic-cta-background-color-hover) |
--spectrum-button-m-cta-texticon-text-color | var(--spectrum-global-color-static-white) |
--spectrum-button-m-cta-texticon-text-color-disabled | var(--spectrum-global-color-gray-500) |
--spectrum-button-m-cta-texticon-text-color-down | var(--spectrum-global-color-static-white) |
--spectrum-button-m-cta-texticon-text-color-hover | var(--spectrum-global-color-static-white) |
--spectrum-button-m-cta-texticon-text-color-key-focus | var(--spectrum-global-color-static-white) |
--spectrum-button-m-negative-quiet-texticon-background-color | var(--spectrum-alias-background-color-transparent) |
--spectrum-button-m-negative-quiet-texticon-background-color-disabled | var(--spectrum-alias-background-color-transparent) |
--spectrum-button-m-negative-quiet-texticon-background-color-down | var(--spectrum-global-color-gray-300) |
--spectrum-button-m-negative-quiet-texticon-background-color-hover | var(--spectrum-global-color-gray-200) |
--spectrum-button-m-negative-quiet-texticon-background-color-key-focus | var(--spectrum-global-color-gray-200) |
--spectrum-button-m-negative-quiet-texticon-border-color | var(--spectrum-alias-background-color-transparent) |
--spectrum-button-m-negative-quiet-texticon-border-color-disabled | var(--spectrum-alias-border-color-transparent) |
--spectrum-button-m-negative-quiet-texticon-border-color-down | var(--spectrum-global-color-gray-300) |
--spectrum-button-m-negative-quiet-texticon-border-color-hover | var(--spectrum-global-color-gray-200) |
--spectrum-button-m-negative-quiet-texticon-border-color-key-focus | var(--spectrum-global-color-gray-200) |
--spectrum-button-m-negative-quiet-texticon-text-color | var(--spectrum-semantic-negative-text-color-small) |
--spectrum-button-m-negative-quiet-texticon-text-color-disabled | var(--spectrum-global-color-gray-500) |
--spectrum-button-m-negative-quiet-texticon-text-color-down | var(--spectrum-global-color-red-700) |
--spectrum-button-m-negative-quiet-texticon-text-color-hover | var(--spectrum-global-color-red-700) |
--spectrum-button-m-negative-quiet-texticon-text-color-key-focus | var(--spectrum-global-color-red-700) |
--spectrum-button-m-negative-texticon-background-color | var(--spectrum-alias-button-negative-background-color-default) |
--spectrum-button-m-negative-texticon-background-color-disabled | var(--spectrum-global-color-gray-200) |
--spectrum-button-m-negative-texticon-background-color-down | var(--spectrum-alias-button-negative-background-color-down) |
--spectrum-button-m-negative-texticon-background-color-hover | var(--spectrum-alias-button-negative-background-color-hover) |
--spectrum-button-m-negative-texticon-background-color-key-focus | var(--spectrum-alias-button-negative-background-color-key-focus) |
--spectrum-button-m-negative-texticon-border-color | var(--spectrum-alias-button-negative-border-color-default) |
--spectrum-button-m-negative-texticon-border-color-disabled | var(--spectrum-global-color-gray-200) |
--spectrum-button-m-negative-texticon-border-color-down | var(--spectrum-alias-button-negative-border-color-down) |
--spectrum-button-m-negative-texticon-border-color-hover | var(--spectrum-alias-button-negative-border-color-hover) |
--spectrum-button-m-negative-texticon-border-color-key-focus | var(--spectrum-alias-button-negative-border-color-key-focus) |
--spectrum-button-m-negative-texticon-text-color | var(--spectrum-alias-button-negative-text-color-default) |
--spectrum-button-m-negative-texticon-text-color-disabled | var(--spectrum-global-color-gray-500) |
--spectrum-button-m-negative-texticon-text-color-down | var(--spectrum-alias-button-negative-text-color-down) |
--spectrum-button-m-negative-texticon-text-color-hover | var(--spectrum-alias-button-negative-text-color-hover) |
--spectrum-button-m-negative-texticon-text-color-key-focus | var(--spectrum-alias-button-negative-text-color-key-focus) |
--spectrum-button-m-primary-overbackground-texticon-background-color | var(--spectrum-alias-background-color-transparent) |
--spectrum-button-m-primary-overbackground-texticon-background-color-disabled | var(--spectrum-alias-background-color-overbackground-disabled) |
--spectrum-button-m-primary-overbackground-texticon-background-color-down | var(--spectrum-global-color-static-white) |
--spectrum-button-m-primary-overbackground-texticon-background-color-hover | var(--spectrum-global-color-static-white) |
--spectrum-button-m-primary-overbackground-texticon-border-color | var(--spectrum-global-color-static-white) |
--spectrum-button-m-primary-overbackground-texticon-border-color-disabled | var(--spectrum-alias-border-color-transparent) |
--spectrum-button-m-primary-overbackground-texticon-border-color-down | var(--spectrum-global-color-static-white) |
--spectrum-button-m-primary-overbackground-texticon-border-color-hover | var(--spectrum-global-color-static-white) |
--spectrum-button-m-primary-overbackground-texticon-border-color-key-focus | var(--spectrum-global-color-static-white) |
--spectrum-button-m-primary-overbackground-texticon-text-color | var(--spectrum-global-color-static-white) |
--spectrum-button-m-primary-overbackground-texticon-text-color-disabled | var(--spectrum-alias-text-color-overbackground-disabled) |
--spectrum-button-m-primary-quiet-overbackground-texticon-background-color | var(--spectrum-alias-background-color-transparent) |
--spectrum-button-m-primary-quiet-overbackground-texticon-background-color-disabled | var(--spectrum-alias-background-color-transparent) |
--spectrum-button-m-primary-quiet-overbackground-texticon-background-color-down | var(--spectrum-alias-background-color-quiet-overbackground-down) |
--spectrum-button-m-primary-quiet-overbackground-texticon-background-color-hover | var(--spectrum-alias-background-color-quiet-overbackground-hover) |
--spectrum-button-m-primary-quiet-overbackground-texticon-border-color | var(--spectrum-alias-background-color-transparent) |
--spectrum-button-m-primary-quiet-overbackground-texticon-border-color-disabled | var(--spectrum-alias-border-color-transparent) |
--spectrum-button-m-primary-quiet-overbackground-texticon-border-color-down | var(--spectrum-alias-border-color-transparent) |
--spectrum-button-m-primary-quiet-overbackground-texticon-border-color-hover | var(--spectrum-alias-border-color-transparent) |
--spectrum-button-m-primary-quiet-overbackground-texticon-text-color | var(--spectrum-global-color-static-white) |
--spectrum-button-m-primary-quiet-overbackground-texticon-text-color-disabled | var(--spectrum-alias-text-color-quiet-overbackground-disabled) |
--spectrum-button-m-primary-quiet-overbackground-texticon-text-color-down | var(--spectrum-global-color-static-white) |
--spectrum-button-m-primary-quiet-overbackground-texticon-text-color-hover | var(--spectrum-global-color-static-white) |
--spectrum-button-m-primary-quiet-texticon-background-color | var(--spectrum-alias-background-color-transparent) |
--spectrum-button-m-primary-quiet-texticon-background-color-disabled | var(--spectrum-alias-background-color-transparent) |
--spectrum-button-m-primary-quiet-texticon-background-color-down | var(--spectrum-global-color-gray-300) |
--spectrum-button-m-primary-quiet-texticon-background-color-hover | var(--spectrum-global-color-gray-200) |
--spectrum-button-m-primary-quiet-texticon-background-color-key-focus | var(--spectrum-global-color-gray-200) |
--spectrum-button-m-primary-quiet-texticon-border-color | var(--spectrum-alias-background-color-transparent) |
--spectrum-button-m-primary-quiet-texticon-border-color-disabled | var(--spectrum-alias-border-color-transparent) |
--spectrum-button-m-primary-quiet-texticon-border-color-down | var(--spectrum-global-color-gray-300) |
--spectrum-button-m-primary-quiet-texticon-border-color-hover | var(--spectrum-global-color-gray-200) |
--spectrum-button-m-primary-quiet-texticon-border-color-key-focus | var(--spectrum-global-color-gray-200) |
--spectrum-button-m-primary-quiet-texticon-text-color | var(--spectrum-global-color-gray-800) |
--spectrum-button-m-primary-quiet-texticon-text-color-disabled | var(--spectrum-global-color-gray-500) |
--spectrum-button-m-primary-quiet-texticon-text-color-down | var(--spectrum-global-color-gray-900) |
--spectrum-button-m-primary-quiet-texticon-text-color-hover | var(--spectrum-global-color-gray-900) |
--spectrum-button-m-primary-quiet-texticon-text-color-key-focus | var(--spectrum-global-color-gray-900) |
--spectrum-button-m-primary-texticon-background-color | var(--spectrum-alias-button-primary-background-color-default) |
--spectrum-button-m-primary-texticon-background-color-disabled | var(--spectrum-global-color-gray-200) |
--spectrum-button-m-primary-texticon-background-color-down | var(--spectrum-alias-button-primary-background-color-down) |
--spectrum-button-m-primary-texticon-background-color-hover | var(--spectrum-alias-button-primary-background-color-hover) |
--spectrum-button-m-primary-texticon-background-color-key-focus | var(--spectrum-alias-button-primary-background-color-key-focus) |
--spectrum-button-m-primary-texticon-border-color | var(--spectrum-alias-button-primary-border-color-default) |
--spectrum-button-m-primary-texticon-border-color-disabled | var(--spectrum-global-color-gray-200) |
--spectrum-button-m-primary-texticon-border-color-down | var(--spectrum-alias-button-primary-border-color-down) |
--spectrum-button-m-primary-texticon-border-color-hover | var(--spectrum-alias-button-primary-border-color-hover) |
--spectrum-button-m-primary-texticon-border-color-key-focus | var(--spectrum-alias-button-primary-border-color-key-focus) |
--spectrum-button-m-primary-texticon-border-radius | var(--spectrum-global-dimension-size-200) |
--spectrum-button-m-primary-texticon-border-size | var(--spectrum-alias-border-size-thick) |
--spectrum-button-m-primary-texticon-focus-ring-color-key-focus | var(--spectrum-alias-focus-ring-color) |
--spectrum-button-m-primary-texticon-focus-ring-size | var(--spectrum-alias-focus-ring-size) |
--spectrum-button-m-primary-texticon-icon-gap | var(--spectrum-global-dimension-size-100) |
--spectrum-button-m-primary-texticon-padding-left | undefined |
--spectrum-button-m-primary-texticon-text-color | var(--spectrum-alias-button-primary-text-color-default) |
--spectrum-button-m-primary-texticon-text-color-disabled | var(--spectrum-global-color-gray-500) |
--spectrum-button-m-primary-texticon-text-color-down | var(--spectrum-alias-button-primary-text-color-down) |
--spectrum-button-m-primary-texticon-text-color-hover | var(--spectrum-alias-button-primary-text-color-hover) |
--spectrum-button-m-primary-texticon-text-color-key-focus | var(--spectrum-alias-button-primary-text-color-key-focus) |
--spectrum-button-m-primary-texticon-text-font-weight | var(--spectrum-global-font-weight-bold) |
--spectrum-button-m-primary-texticon-text-line-height | var(--spectrum-alias-component-text-line-height) |
--spectrum-button-m-primary-texticon-text-size | var(--spectrum-global-dimension-font-size-100) |
--spectrum-button-m-primary-textonly-border-size | var(--spectrum-alias-border-size-thick) |
--spectrum-button-m-primary-textonly-height | var(--spectrum-global-dimension-size-400) |
--spectrum-button-m-primary-textonly-min-width | var(--spectrum-global-dimension-size-900) |
--spectrum-button-m-primary-textonly-padding-left | var(--spectrum-global-dimension-size-200) |
--spectrum-button-m-primary-textonly-padding-right | var(--spectrum-global-dimension-size-200) |
--spectrum-button-m-primary-textonly-text-padding-bottom | var(--spectrum-global-dimension-size-115) |
--spectrum-button-m-primary-textonly-text-padding-top | var(--spectrum-global-dimension-size-75) |
--spectrum-button-m-secondary-quiet-texticon-background-color | var(--spectrum-alias-background-color-transparent) |
--spectrum-button-m-secondary-quiet-texticon-background-color-disabled | var(--spectrum-alias-background-color-transparent) |
--spectrum-button-m-secondary-quiet-texticon-background-color-down | var(--spectrum-global-color-gray-300) |
--spectrum-button-m-secondary-quiet-texticon-background-color-hover | var(--spectrum-global-color-gray-200) |
--spectrum-button-m-secondary-quiet-texticon-background-color-key-focus | var(--spectrum-global-color-gray-200) |
--spectrum-button-m-secondary-quiet-texticon-border-color | var(--spectrum-alias-background-color-transparent) |
--spectrum-button-m-secondary-quiet-texticon-border-color-disabled | var(--spectrum-alias-border-color-transparent) |
--spectrum-button-m-secondary-quiet-texticon-border-color-down | var(--spectrum-global-color-gray-300) |
--spectrum-button-m-secondary-quiet-texticon-border-color-hover | var(--spectrum-global-color-gray-200) |
--spectrum-button-m-secondary-quiet-texticon-border-color-key-focus | var(--spectrum-global-color-gray-200) |
--spectrum-button-m-secondary-quiet-texticon-text-color | var(--spectrum-global-color-gray-700) |
--spectrum-button-m-secondary-quiet-texticon-text-color-disabled | var(--spectrum-global-color-gray-500) |
--spectrum-button-m-secondary-quiet-texticon-text-color-down | var(--spectrum-global-color-gray-800) |
--spectrum-button-m-secondary-quiet-texticon-text-color-hover | var(--spectrum-global-color-gray-800) |
--spectrum-button-m-secondary-quiet-texticon-text-color-key-focus | var(--spectrum-global-color-gray-800) |
--spectrum-button-m-secondary-texticon-background-color | var(--spectrum-alias-button-secondary-background-color-default) |
--spectrum-button-m-secondary-texticon-background-color-disabled | var(--spectrum-global-color-gray-200) |
--spectrum-button-m-secondary-texticon-background-color-down | var(--spectrum-alias-button-secondary-background-color-down) |
--spectrum-button-m-secondary-texticon-background-color-hover | var(--spectrum-alias-button-secondary-background-color-hover) |
--spectrum-button-m-secondary-texticon-background-color-key-focus | var(--spectrum-alias-button-secondary-background-color-key-focus) |
--spectrum-button-m-secondary-texticon-border-color | var(--spectrum-alias-button-secondary-border-color-default) |
--spectrum-button-m-secondary-texticon-border-color-disabled | var(--spectrum-global-color-gray-200) |
--spectrum-button-m-secondary-texticon-border-color-down | var(--spectrum-alias-button-secondary-border-color-down) |
--spectrum-button-m-secondary-texticon-border-color-hover | var(--spectrum-alias-button-secondary-border-color-hover) |
--spectrum-button-m-secondary-texticon-border-color-key-focus | var(--spectrum-alias-button-secondary-border-color-key-focus) |
--spectrum-button-m-secondary-texticon-text-color | var(--spectrum-alias-button-secondary-text-color-default) |
--spectrum-button-m-secondary-texticon-text-color-disabled | var(--spectrum-global-color-gray-500) |
--spectrum-button-m-secondary-texticon-text-color-down | var(--spectrum-alias-button-secondary-text-color-down) |
--spectrum-button-m-secondary-texticon-text-color-hover | var(--spectrum-alias-button-secondary-text-color-hover) |
--spectrum-button-m-secondary-texticon-text-color-key-focus | var(--spectrum-alias-button-secondary-text-color-key-focus) |
--spectrum-button-s-primary-texticon-border-radius | var(--spectrum-global-dimension-size-150) |
--spectrum-button-s-primary-texticon-border-size | var(--spectrum-alias-border-size-thick) |
--spectrum-button-s-primary-texticon-focus-ring-size | var(--spectrum-alias-focus-ring-size) |
--spectrum-button-s-primary-texticon-icon-gap | var(--spectrum-global-dimension-size-85) |
--spectrum-button-s-primary-texticon-padding-left | var(--spectrum-global-dimension-size-125) |
--spectrum-button-s-primary-texticon-text-font-weight | var(--spectrum-global-font-weight-bold) |
--spectrum-button-s-primary-texticon-text-line-height | var(--spectrum-alias-component-text-line-height) |
--spectrum-button-s-primary-texticon-text-size | var(--spectrum-global-dimension-font-size-75) |
--spectrum-button-s-primary-textonly-border-size | var(--spectrum-alias-border-size-thick) |
--spectrum-button-s-primary-textonly-height | var(--spectrum-global-dimension-size-300) |
--spectrum-button-s-primary-textonly-min-width | var(--spectrum-global-dimension-size-675) |
--spectrum-button-s-primary-textonly-padding-left | var(--spectrum-global-dimension-size-150) |
--spectrum-button-s-primary-textonly-padding-right | var(--spectrum-global-dimension-size-150) |
--spectrum-button-s-primary-textonly-text-padding-bottom | undefined |
--spectrum-button-s-primary-textonly-text-padding-top | var(--spectrum-global-dimension-static-size-50) |
--spectrum-button-xl-primary-texticon-border-radius | var(--spectrum-global-dimension-size-300) |
--spectrum-button-xl-primary-texticon-border-size | var(--spectrum-alias-border-size-thick) |
--spectrum-button-xl-primary-texticon-focus-ring-size | var(--spectrum-alias-focus-ring-size) |
--spectrum-button-xl-primary-texticon-icon-gap | var(--spectrum-global-dimension-size-125) |
--spectrum-button-xl-primary-texticon-padding-left | undefined |
--spectrum-button-xl-primary-texticon-text-font-weight | var(--spectrum-global-font-weight-bold) |
--spectrum-button-xl-primary-texticon-text-line-height | var(--spectrum-alias-component-text-line-height) |
--spectrum-button-xl-primary-texticon-text-size | var(--spectrum-global-dimension-font-size-300) |
--spectrum-button-xl-primary-textonly-border-size | var(--spectrum-alias-border-size-thick) |
--spectrum-button-xl-primary-textonly-height | var(--spectrum-global-dimension-size-600) |
--spectrum-button-xl-primary-textonly-min-width | var(--spectrum-global-dimension-size-1250) |
--spectrum-button-xl-primary-textonly-padding-left | var(--spectrum-global-dimension-size-300) |
--spectrum-button-xl-primary-textonly-padding-right | var(--spectrum-global-dimension-size-300) |
--spectrum-button-xl-primary-textonly-text-padding-bottom | var(--spectrum-global-dimension-size-175) |
--spectrum-button-xl-primary-textonly-text-padding-top | var(--spectrum-global-dimension-size-150) |
--spectrum-clearbutton-l-fill-background-color | var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default) |
--spectrum-clearbutton-l-fill-background-color-disabled | var(--spectrum-alias-background-color-transparent) |
--spectrum-clearbutton-l-fill-background-color-down | var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down) |
--spectrum-clearbutton-l-fill-background-color-hover | var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover) |
--spectrum-clearbutton-l-fill-background-color-key-focus | var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus) |
--spectrum-clearbutton-l-fill-height | var(--spectrum-alias-infieldbutton-full-height-l) |
--spectrum-clearbutton-l-fill-uiicon-color | var(--spectrum-alias-component-icon-color-default) |
--spectrum-clearbutton-l-fill-uiicon-color-disabled | var(--spectrum-alias-component-icon-color-disabled) |
--spectrum-clearbutton-l-fill-uiicon-color-down | var(--spectrum-alias-component-icon-color-down) |
--spectrum-clearbutton-l-fill-uiicon-color-key-focus | var(--spectrum-alias-component-icon-color-key-focus) |
--spectrum-clearbutton-l-fill-width | var(--spectrum-alias-infieldbutton-full-height-l) |
--spectrum-clearbutton-l-padding | var(--spectrum-alias-infieldbutton-padding-l) |
--spectrum-clearbutton-m-fill-background-color | var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default) |
--spectrum-clearbutton-m-fill-background-color-disabled | var(--spectrum-alias-background-color-transparent) |
--spectrum-clearbutton-m-fill-background-color-down | var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down) |
--spectrum-clearbutton-m-fill-background-color-hover | var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover) |
--spectrum-clearbutton-m-fill-background-color-key-focus | var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus) |
--spectrum-clearbutton-m-fill-height | var(--spectrum-alias-infieldbutton-full-height-m) |
--spectrum-clearbutton-m-fill-uiicon-color | var(--spectrum-alias-component-icon-color-default) |
--spectrum-clearbutton-m-fill-uiicon-color-disabled | var(--spectrum-alias-component-icon-color-disabled) |
--spectrum-clearbutton-m-fill-uiicon-color-down | var(--spectrum-alias-component-icon-color-down) |
--spectrum-clearbutton-m-fill-uiicon-color-key-focus | var(--spectrum-alias-component-icon-color-key-focus) |
--spectrum-clearbutton-m-fill-width | var(--spectrum-alias-infieldbutton-full-height-m) |
--spectrum-clearbutton-m-padding | var(--spectrum-alias-infieldbutton-padding-m) |
--spectrum-clearbutton-s-fill-background-color | var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default) |
--spectrum-clearbutton-s-fill-background-color-disabled | var(--spectrum-alias-background-color-transparent) |
--spectrum-clearbutton-s-fill-background-color-down | var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down) |
--spectrum-clearbutton-s-fill-background-color-hover | var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover) |
--spectrum-clearbutton-s-fill-background-color-key-focus | var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus) |
--spectrum-clearbutton-s-fill-height | var(--spectrum-alias-infieldbutton-full-height-s) |
--spectrum-clearbutton-s-fill-uiicon-color | var(--spectrum-alias-component-icon-color-default) |
--spectrum-clearbutton-s-fill-uiicon-color-disabled | var(--spectrum-alias-component-icon-color-disabled) |
--spectrum-clearbutton-s-fill-uiicon-color-down | var(--spectrum-alias-component-icon-color-down) |
--spectrum-clearbutton-s-fill-uiicon-color-key-focus | var(--spectrum-alias-component-icon-color-key-focus) |
--spectrum-clearbutton-s-fill-width | var(--spectrum-alias-infieldbutton-full-height-s) |
--spectrum-clearbutton-s-padding | var(--spectrum-alias-infieldbutton-padding-s) |
--spectrum-clearbutton-xl-fill-background-color | var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default) |
--spectrum-clearbutton-xl-fill-background-color-disabled | var(--spectrum-alias-background-color-transparent) |
--spectrum-clearbutton-xl-fill-background-color-down | var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down) |
--spectrum-clearbutton-xl-fill-background-color-hover | var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover) |
--spectrum-clearbutton-xl-fill-background-color-key-focus | var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus) |
--spectrum-clearbutton-xl-fill-height | var(--spectrum-alias-infieldbutton-full-height-xl) |
--spectrum-clearbutton-xl-fill-uiicon-color | var(--spectrum-alias-component-icon-color-default) |
--spectrum-clearbutton-xl-fill-uiicon-color-disabled | var(--spectrum-alias-component-icon-color-disabled) |
--spectrum-clearbutton-xl-fill-uiicon-color-down | var(--spectrum-alias-component-icon-color-down) |
--spectrum-clearbutton-xl-fill-uiicon-color-key-focus | var(--spectrum-alias-component-icon-color-key-focus) |
--spectrum-clearbutton-xl-fill-width | var(--spectrum-alias-infieldbutton-full-height-xl) |
--spectrum-clearbutton-xl-padding | var(--spectrum-alias-infieldbutton-padding-xl) |
--spectrum-logicbutton-and-background-color | var(--spectrum-global-color-blue-500) |
--spectrum-logicbutton-and-background-color-disabled | var(--spectrum-global-color-gray-200) |
--spectrum-logicbutton-and-background-color-hover | var(--spectrum-global-color-blue-700) |
--spectrum-logicbutton-and-border-color | var(--spectrum-global-color-blue-500) |
--spectrum-logicbutton-and-border-color-disabled | var(--spectrum-global-color-gray-200) |
--spectrum-logicbutton-and-border-color-hover | var(--spectrum-global-color-blue-700) |
--spectrum-logicbutton-and-border-radius | var(--spectrum-alias-border-radius-regular) |
--spectrum-logicbutton-and-border-size | var(--spectrum-alias-border-size-thick) |
--spectrum-logicbutton-and-height | var(--spectrum-global-dimension-static-size-300) |
--spectrum-logicbutton-and-padding-x | var(--spectrum-global-dimension-size-100) |
--spectrum-logicbutton-and-text-color | var(--spectrum-global-color-static-white) |
--spectrum-logicbutton-and-text-color-disabled | var(--spectrum-alias-text-color-disabled) |
--spectrum-logicbutton-and-text-font-weight | var(--spectrum-global-font-weight-bold) |
--spectrum-logicbutton-and-text-size | var(--spectrum-global-dimension-font-size-100) |
--spectrum-logicbutton-or-background-color | var(--spectrum-global-color-magenta-500) |
--spectrum-logicbutton-or-background-color-hover | var(--spectrum-global-color-magenta-700) |
--spectrum-logicbutton-or-border-color | var(--spectrum-global-color-magenta-500) |
--spectrum-logicbutton-or-border-color-hover | var(--spectrum-global-color-magenta-700) |
--spectrum-logicbutton-or-text-color | var(--spectrum-global-color-static-white) |
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';
When looking to leverage the Button or ClearButton base classes as a type and/or for extension purposes, do so via:
import { Button, ClearButton } 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>
Variants #
There are many button variants to choose from in Spectrum. The variant attribute controls the main variant of the button, and a few other boolean attributes can be combined to apply sub-variants, e.g. quiet.
Normal #
<sp-button-group>
<sp-button variant="cta">CTA</sp-button>
<sp-button variant="primary">Primary</sp-button>
<sp-button variant="secondary">Secondary</sp-button>
<sp-button variant="negative">Negative</sp-button>
</sp-button-group>
Quiet #
<sp-button-group>
<sp-button quiet variant="primary">Quiet Primary</sp-button>
<sp-button quiet variant="secondary">Quiet Secondary</sp-button>
<sp-button quiet variant="negative">Quiet Negative</sp-button>
</sp-button-group>
Content #
<sp-buttons> can have a label, or a label with an icon. An icon is provided by placing an icon component to the icon slot. The icon may be an sp-icon or an SVG.
<sp-icons-medium></sp-icons-medium>
<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-group>
States #
In addition to the variant, <sp-buttons> have a disabled state visual state which can be applied by adding the attribute disabled. All spectrum-button variants support the In addition to affectng the visual state, the disabled attribute prevents focus and disallows click events.
<sp-button-group>
<sp-button variant="primary">Normal</sp-button>
<sp-button variant="primary" disabled>Disabled</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>
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>