role button
Button draft v0.22.1
Triggers an action or event when activated.
A button lets people perform an action with a single activation: submit a form, open a dialog, confirm a choice. Its emphasis communicates how important the action is on the screen; its intent communicates what kind of action it is. Buttons never navigate; use a link for navigation.
Tokens
From packages/tokens/src/components/button.tokens.json. Path grammar: button.<part>.<property>[.<option>][.<state>]. Every value aliases a semantic token.
No token matches.
Part container (94)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
button.container.background.accent.neutral.default
|
color |
{global.bg.accent.neutral.default}
|
light
#201E1F
dark
#E8E3E4
|
--button-container-background-accent-neutral-default
|
button.container.background.accent.neutral.hover
|
color |
{global.bg.accent.neutral.hover}
|
light
#323031
dark
#D2CECF
|
--button-container-background-accent-neutral-hover
|
button.container.background.accent.neutral.active
|
color |
{global.bg.accent.neutral.active}
|
light
#4C4A4A
dark
#B9B7B7
|
--button-container-background-accent-neutral-active
|
button.container.background.accent.brand.default
|
color |
{global.bg.accent.brand.default}
|
light
#175DD6
dark
#9EE7FA
|
--button-container-background-accent-brand-default
|
button.container.background.accent.brand.hover
|
color |
{global.bg.accent.brand.hover}
|
light
#1148A9
dark
#53D6F2
|
--button-container-background-accent-brand-hover
|
button.container.background.accent.brand.active
|
color |
{global.bg.accent.brand.active}
|
light
#0B2A69
dark
#41B9D3
|
--button-container-background-accent-brand-active
|
button.container.background.accent.error.default
|
color |
{global.bg.accent.functional.error.default}
|
#E12A23
|
--button-container-background-accent-error-default
|
button.container.background.accent.error.hover
|
color |
{global.bg.accent.functional.error.hover}
|
#C01619
|
--button-container-background-accent-error-hover
|
button.container.background.accent.error.active
|
color |
{global.bg.accent.functional.error.active}
|
#940E11
|
--button-container-background-accent-error-active
|
button.container.background.accent.disabled
|
color |
{global.bg.state.disabled.default}
|
light
#B6B4B41a
dark
#7676764d
|
--button-container-background-accent-disabled
|
button.container.background.subtle.neutral.default
|
color |
{global.bg.subtle.neutral.default}
|
light
#B6B4B41a
dark
#7676761a
|
--button-container-background-subtle-neutral-default
|
button.container.background.subtle.neutral.hover
|
color |
{global.bg.subtle.neutral.hover}
|
light
#B6B4B426
dark
#7676764d
|
--button-container-background-subtle-neutral-hover
|
button.container.background.subtle.neutral.active
|
color |
{global.bg.subtle.neutral.active}
|
light
#B6B4B433
dark
#76767680
|
--button-container-background-subtle-neutral-active
|
button.container.background.subtle.brand.default
|
color |
{global.bg.subtle.brand.default}
|
light
#EEF1F7
dark
#09191D
|
--button-container-background-subtle-brand-default
|
button.container.background.subtle.brand.hover
|
color |
{global.bg.subtle.brand.hover}
|
light
#DDE6F5
dark
#0D272E
|
--button-container-background-subtle-brand-hover
|
button.container.background.subtle.brand.active
|
color |
{global.bg.subtle.brand.active}
|
light
#BFD1F1
dark
#10363E
|
--button-container-background-subtle-brand-active
|
button.container.background.subtle.error.default
|
color |
{global.bg.subtle.functional.error.default}
|
light
#FEECEA
dark
#2B0B08
|
--button-container-background-subtle-error-default
|
button.container.background.subtle.error.hover
|
color |
{global.bg.subtle.functional.error.hover}
|
light
#FCCDC6
dark
#3E130F
|
--button-container-background-subtle-error-hover
|
button.container.background.subtle.error.active
|
color |
{global.bg.subtle.functional.error.active}
|
light
#FAA79D
dark
#531A16
|
--button-container-background-subtle-error-active
|
button.container.background.subtle.disabled
|
color |
{global.bg.state.disabled.default}
|
light
#B6B4B41a
dark
#7676764d
|
--button-container-background-subtle-disabled
|
button.container.background.ghost.neutral.default
|
color |
{color.transparent}
|
color(srgb 0 0 0 / 0)
|
--button-container-background-ghost-neutral-default
|
button.container.background.ghost.neutral.hover
|
color |
{global.bg.subtle.neutral.default}
|
light
#B6B4B41a
dark
#7676761a
|
--button-container-background-ghost-neutral-hover
|
button.container.background.ghost.neutral.active
|
color |
{global.bg.subtle.neutral.hover}
|
light
#B6B4B426
dark
#7676764d
|
--button-container-background-ghost-neutral-active
|
button.container.background.ghost.brand.default
|
color |
{color.transparent}
|
color(srgb 0 0 0 / 0)
|
--button-container-background-ghost-brand-default
|
button.container.background.ghost.brand.hover
|
color |
{global.bg.subtle.brand.default}
|
light
#EEF1F7
dark
#09191D
|
--button-container-background-ghost-brand-hover
|
button.container.background.ghost.brand.active
|
color |
{global.bg.subtle.brand.hover}
|
light
#DDE6F5
dark
#0D272E
|
--button-container-background-ghost-brand-active
|
button.container.background.ghost.error.default
|
color |
{color.transparent}
|
color(srgb 0 0 0 / 0)
|
--button-container-background-ghost-error-default
|
button.container.background.ghost.error.hover
|
color |
{global.bg.subtle.functional.error.default}
|
light
#FEECEA
dark
#2B0B08
|
--button-container-background-ghost-error-hover
|
button.container.background.ghost.error.active
|
color |
{global.bg.subtle.functional.error.hover}
|
light
#FCCDC6
dark
#3E130F
|
--button-container-background-ghost-error-active
|
button.container.background.ghost.disabled
|
color |
{global.bg.state.disabled.default}
|
light
#B6B4B41a
dark
#7676764d
|
--button-container-background-ghost-disabled
|
button.container.border-color.accent.neutral.default
|
color |
{global.border.accent.neutral.default}
|
light
#323031
dark
#B9B7B7
|
--button-container-border-color-accent-neutral-default
|
button.container.border-color.accent.neutral.hover
|
color |
{global.border.accent.neutral.hover}
|
light
#4C4A4A
dark
#B9B7B7
|
--button-container-border-color-accent-neutral-hover
|
button.container.border-color.accent.neutral.active
|
color |
{global.border.accent.neutral.active}
|
light
#616161
dark
#9D9B9C
|
--button-container-border-color-accent-neutral-active
|
button.container.border-color.accent.brand.default
|
color |
{global.border.accent.brand.default}
|
light
#1148A9
dark
#53D6F2
|
--button-container-border-color-accent-brand-default
|
button.container.border-color.accent.brand.hover
|
color |
{global.border.accent.brand.hover}
|
light
#0B2A69
dark
#41B9D3
|
--button-container-border-color-accent-brand-hover
|
button.container.border-color.accent.brand.active
|
color |
{global.border.accent.brand.active}
|
light
#0B204D
dark
#3499AF
|
--button-container-border-color-accent-brand-active
|
button.container.border-color.accent.error.default
|
color |
{global.border.accent.functional.error.default}
|
#C01619
|
--button-container-border-color-accent-error-default
|
button.container.border-color.accent.error.hover
|
color |
{global.border.accent.functional.error.hover}
|
#940E11
|
--button-container-border-color-accent-error-hover
|
button.container.border-color.accent.error.active
|
color |
{global.border.accent.functional.error.active}
|
#531A16
|
--button-container-border-color-accent-error-active
|
button.container.border-color.accent.disabled
|
color |
{global.border.state.disabled.default}
|
light
#B6B4B466
dark
#363636b2
|
--button-container-border-color-accent-disabled
|
button.container.border-color.subtle.neutral.default
|
color |
{global.border.subtle.neutral.default}
|
light
#DFDBDC
dark
#36363680
|
--button-container-border-color-subtle-neutral-default
|
button.container.border-color.subtle.neutral.hover
|
color |
{global.border.subtle.neutral.hover}
|
light
#D7D3D4
dark
#363636
|
--button-container-border-color-subtle-neutral-hover
|
button.container.border-color.subtle.neutral.active
|
color |
{global.border.subtle.neutral.active}
|
light
#B6B4B4
dark
#767676
|
--button-container-border-color-subtle-neutral-active
|
button.container.border-color.subtle.brand.default
|
color |
{global.border.subtle.brand.default}
|
light
#DDE6F5
dark
#0D272E
|
--button-container-border-color-subtle-brand-default
|
button.container.border-color.subtle.brand.hover
|
color |
{global.border.subtle.brand.hover}
|
light
#BFD1F1
dark
#10363E
|
--button-container-border-color-subtle-brand-hover
|
button.container.border-color.subtle.brand.active
|
color |
{global.border.subtle.brand.active}
|
light
#9BB9EC
dark
#1F606E
|
--button-container-border-color-subtle-brand-active
|
button.container.border-color.subtle.error.default
|
color |
{global.border.subtle.functional.error.default}
|
light
#FCCDC6
dark
#3E130F
|
--button-container-border-color-subtle-error-default
|
button.container.border-color.subtle.error.hover
|
color |
{global.border.subtle.functional.error.hover}
|
light
#FAA79D
dark
#531A16
|
--button-container-border-color-subtle-error-hover
|
button.container.border-color.subtle.error.active
|
color |
{global.border.subtle.functional.error.active}
|
light
#F88275
dark
#940E11
|
--button-container-border-color-subtle-error-active
|
button.container.border-color.subtle.disabled
|
color |
{global.border.state.disabled.default}
|
light
#B6B4B466
dark
#363636b2
|
--button-container-border-color-subtle-disabled
|
button.container.border-color.ghost.neutral.default
|
color |
{color.transparent}
|
color(srgb 0 0 0 / 0)
|
--button-container-border-color-ghost-neutral-default
|
button.container.border-color.ghost.neutral.hover
|
color |
{global.border.subtle.neutral.default}
|
light
#DFDBDC
dark
#36363680
|
--button-container-border-color-ghost-neutral-hover
|
button.container.border-color.ghost.neutral.active
|
color |
{global.border.subtle.neutral.hover}
|
light
#D7D3D4
dark
#363636
|
--button-container-border-color-ghost-neutral-active
|
button.container.border-color.ghost.brand.default
|
color |
{color.transparent}
|
color(srgb 0 0 0 / 0)
|
--button-container-border-color-ghost-brand-default
|
button.container.border-color.ghost.brand.hover
|
color |
{global.border.subtle.brand.default}
|
light
#DDE6F5
dark
#0D272E
|
--button-container-border-color-ghost-brand-hover
|
button.container.border-color.ghost.brand.active
|
color |
{global.border.subtle.brand.hover}
|
light
#BFD1F1
dark
#10363E
|
--button-container-border-color-ghost-brand-active
|
button.container.border-color.ghost.error.default
|
color |
{color.transparent}
|
color(srgb 0 0 0 / 0)
|
--button-container-border-color-ghost-error-default
|
button.container.border-color.ghost.error.hover
|
color |
{global.border.subtle.functional.error.default}
|
light
#FCCDC6
dark
#3E130F
|
--button-container-border-color-ghost-error-hover
|
button.container.border-color.ghost.error.active
|
color |
{global.border.subtle.functional.error.hover}
|
light
#FAA79D
dark
#531A16
|
--button-container-border-color-ghost-error-active
|
button.container.border-color.ghost.disabled
|
color |
{global.border.state.disabled.default}
|
light
#B6B4B466
dark
#363636b2
|
--button-container-border-color-ghost-disabled
|
button.container.border-width
|
dimension |
{stroke-width.sm}
|
0.6px
|
--button-container-border-width
|
button.container.border-radius.xsmall
|
dimension |
{corner-radius.2xs}
|
2px
|
--button-container-border-radius-xsmall
|
button.container.border-radius.small
|
dimension |
{corner-radius.2xs}
|
2px
|
--button-container-border-radius-small
|
button.container.border-radius.medium
|
dimension |
{corner-radius.xs}
|
4px
|
--button-container-border-radius-medium
|
button.container.border-radius.large
|
dimension |
{corner-radius.xs}
|
4px
|
--button-container-border-radius-large
|
button.container.padding-inline.xsmall
|
dimension |
{space.6}
|
6px
|
--button-container-padding-inline-xsmall
|
button.container.padding-inline.small
|
dimension |
{space.8}
|
8px
|
--button-container-padding-inline-small
|
button.container.padding-inline.medium
|
dimension |
{space.12}
|
12px
|
--button-container-padding-inline-medium
|
button.container.padding-inline.large
|
dimension |
{space.16}
|
16px
|
--button-container-padding-inline-large
|
button.container.padding-inline.icon-side.xsmall
|
dimension |
{space.2}
|
2px
|
--button-container-padding-inline-icon-side-xsmall
|
button.container.padding-inline.icon-side.small
|
dimension |
{space.6}
|
6px
|
--button-container-padding-inline-icon-side-small
|
button.container.padding-inline.icon-side.medium
|
dimension |
{space.6}
|
6px
|
--button-container-padding-inline-icon-side-medium
|
button.container.padding-inline.icon-side.large
|
dimension |
{space.8}
|
8px
|
--button-container-padding-inline-icon-side-large
|
button.container.padding-inline.label-side.xsmall
|
dimension |
{space.6}
|
6px
|
--button-container-padding-inline-label-side-xsmall
|
button.container.padding-inline.label-side.small
|
dimension |
{space.8}
|
8px
|
--button-container-padding-inline-label-side-small
|
button.container.padding-inline.label-side.medium
|
dimension |
{space.8}
|
8px
|
--button-container-padding-inline-label-side-medium
|
button.container.padding-inline.label-side.large
|
dimension |
{space.10}
|
10px
|
--button-container-padding-inline-label-side-large
|
button.container.min-height.xsmall
|
dimension |
{space.24}
|
24px
|
--button-container-min-height-xsmall
|
button.container.min-height.small
|
dimension |
{space.28}
|
28px
|
--button-container-min-height-small
|
button.container.min-height.medium
|
dimension |
{space.36}
|
36px
|
--button-container-min-height-medium
|
button.container.min-height.large
|
dimension |
{space.44}
|
44px
|
--button-container-min-height-large
|
button.container.padding-block.xsmall
|
dimension |
{space.2}
|
2px
|
--button-container-padding-block-xsmall
|
button.container.padding-block.small
|
dimension |
{space.3}
|
3px
|
--button-container-padding-block-small
|
button.container.padding-block.medium
|
dimension |
{space.5}
|
5px
|
--button-container-padding-block-medium
|
button.container.padding-block.large
|
dimension |
{space.8}
|
8px
|
--button-container-padding-block-large
|
button.container.gap.xsmall
|
dimension |
{space.2}
|
2px
|
--button-container-gap-xsmall
|
button.container.gap.small
|
dimension |
{space.2}
|
2px
|
--button-container-gap-small
|
button.container.gap.medium
|
dimension |
{space.4}
|
4px
|
--button-container-gap-medium
|
button.container.gap.large
|
dimension |
{space.4}
|
4px
|
--button-container-gap-large
|
button.container.outline-width.focus-visible
|
dimension |
{focus.ring.width}
|
2.4px
|
--button-container-outline-width-focus-visible
|
button.container.outline-offset.focus-visible
|
dimension |
{focus.ring.offset}
|
4px
|
--button-container-outline-offset-focus-visible
|
button.container.outline-color.focus-visible
|
color |
{color.focus.ring}
|
light
#175DD6
dark
#9EE7FA
|
--button-container-outline-color-focus-visible
|
button.container.transition.duration
|
duration |
{duration.fast}
|
150ms
|
--button-container-transition-duration
|
button.container.transition.easing
|
cubicBezier |
{easing.standard}
|
cubic-bezier(0.2, 0, 0, 1)
|
--button-container-transition-easing
|
Part icon (9)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
button.icon.font-family
|
fontFamily |
{font.icon.family}
|
"Material Symbols Outlined"
|
--button-icon-font-family
|
button.icon.font-weight
|
fontWeight |
{font.icon.weight.light}
|
300
|
--button-icon-font-weight
|
button.icon.fill
|
number |
{font.icon.fill.off}
|
0
|
--button-icon-fill
|
button.icon.grade
|
number |
{font.icon.grade.normal}
|
0
|
--button-icon-grade
|
button.icon.optical-size
|
number |
{font.icon.optical-size.20}
|
20
|
--button-icon-optical-size
|
button.icon.size.xsmall
|
dimension |
{size.2}
|
16px
|
--button-icon-size-xsmall
|
button.icon.size.small
|
dimension |
{size.3}
|
20px
|
--button-icon-size-small
|
button.icon.size.medium
|
dimension |
{size.4}
|
24px
|
--button-icon-size-medium
|
button.icon.size.large
|
dimension |
{size.4}
|
24px
|
--button-icon-size-large
|
Part label (34)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
button.label.color.accent.neutral.default
|
color |
{global.text.on-accent.neutral.primary}
|
light
#FDFDFD
dark
#191919
|
--button-label-color-accent-neutral-default
|
button.label.color.accent.neutral.hover
|
color |
{global.text.on-accent.neutral.primary}
|
light
#FDFDFD
dark
#191919
|
--button-label-color-accent-neutral-hover
|
button.label.color.accent.neutral.active
|
color |
{global.text.on-accent.neutral.primary}
|
light
#FDFDFD
dark
#191919
|
--button-label-color-accent-neutral-active
|
button.label.color.accent.brand.default
|
color |
{global.text.on-accent.brand.default}
|
light
#FBFCFD
dark
#09191D
|
--button-label-color-accent-brand-default
|
button.label.color.accent.brand.hover
|
color |
{global.text.on-accent.brand.default}
|
light
#FBFCFD
dark
#09191D
|
--button-label-color-accent-brand-hover
|
button.label.color.accent.brand.active
|
color |
{global.text.on-accent.brand.default}
|
light
#FBFCFD
dark
#09191D
|
--button-label-color-accent-brand-active
|
button.label.color.accent.error.default
|
color |
{global.text.on-accent.functional.error.default}
|
#FEFBFA
|
--button-label-color-accent-error-default
|
button.label.color.accent.error.hover
|
color |
{global.text.on-accent.functional.error.default}
|
#FEFBFA
|
--button-label-color-accent-error-hover
|
button.label.color.accent.error.active
|
color |
{global.text.on-accent.functional.error.default}
|
#FEFBFA
|
--button-label-color-accent-error-active
|
button.label.color.accent.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--button-label-color-accent-disabled
|
button.label.color.subtle.neutral.default
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--button-label-color-subtle-neutral-default
|
button.label.color.subtle.neutral.hover
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--button-label-color-subtle-neutral-hover
|
button.label.color.subtle.neutral.active
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--button-label-color-subtle-neutral-active
|
button.label.color.subtle.brand.default
|
color |
{global.text.on-subtle.brand.default}
|
light
#1148A9
dark
#9EE7FA
|
--button-label-color-subtle-brand-default
|
button.label.color.subtle.brand.hover
|
color |
{global.text.on-subtle.brand.default}
|
light
#1148A9
dark
#9EE7FA
|
--button-label-color-subtle-brand-hover
|
button.label.color.subtle.brand.active
|
color |
{global.text.on-subtle.brand.default}
|
light
#1148A9
dark
#9EE7FA
|
--button-label-color-subtle-brand-active
|
button.label.color.subtle.error.default
|
color |
{global.text.on-subtle.functional.error.default}
|
light
#C01619
dark
#FAA79D
|
--button-label-color-subtle-error-default
|
button.label.color.subtle.error.hover
|
color |
{global.text.on-subtle.functional.error.default}
|
light
#C01619
dark
#FAA79D
|
--button-label-color-subtle-error-hover
|
button.label.color.subtle.error.active
|
color |
{global.text.on-subtle.functional.error.default}
|
light
#C01619
dark
#FAA79D
|
--button-label-color-subtle-error-active
|
button.label.color.subtle.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--button-label-color-subtle-disabled
|
button.label.color.ghost.neutral.default
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--button-label-color-ghost-neutral-default
|
button.label.color.ghost.neutral.hover
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--button-label-color-ghost-neutral-hover
|
button.label.color.ghost.neutral.active
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--button-label-color-ghost-neutral-active
|
button.label.color.ghost.brand.default
|
color |
{global.text.on-base.brand.default}
|
light
#175DD6
dark
#9EE7FA
|
--button-label-color-ghost-brand-default
|
button.label.color.ghost.brand.hover
|
color |
{global.text.on-subtle.brand.default}
|
light
#1148A9
dark
#9EE7FA
|
--button-label-color-ghost-brand-hover
|
button.label.color.ghost.brand.active
|
color |
{global.text.on-subtle.brand.default}
|
light
#1148A9
dark
#9EE7FA
|
--button-label-color-ghost-brand-active
|
button.label.color.ghost.error.default
|
color |
{global.text.on-subtle.functional.error.default}
|
light
#C01619
dark
#FAA79D
|
--button-label-color-ghost-error-default
|
button.label.color.ghost.error.hover
|
color |
{global.text.on-subtle.functional.error.default}
|
light
#C01619
dark
#FAA79D
|
--button-label-color-ghost-error-hover
|
button.label.color.ghost.error.active
|
color |
{global.text.on-subtle.functional.error.default}
|
light
#C01619
dark
#FAA79D
|
--button-label-color-ghost-error-active
|
button.label.color.ghost.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--button-label-color-ghost-disabled
|
button.label.typography.xsmall
|
typography |
{body.family}{body.size.xs}{body.weight.medium}{font.line-height.compact}{font.letter-spacing.tight.xs}
|
{"fontFamily":"Inter","fontSize":{"value":12,"unit":"px"},"fontWeight":500,"lineHeight":1,"letterSpacing":{"value":-0.24,"unit":"px"}}
|
--button-label-typography-xsmall-font-family--button-label-typography-xsmall-font-size--button-label-typography-xsmall-font-weight--button-label-typography-xsmall-line-height--button-label-typography-xsmall-letter-spacing
|
button.label.typography.small
|
typography |
{body.family}{body.size.sm}{body.weight.medium}{font.line-height.compact}{font.letter-spacing.tight.sm}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":500,"lineHeight":1,"letterSpacing":{"value":-0.28,"unit":"px"}}
|
--button-label-typography-small-font-family--button-label-typography-small-font-size--button-label-typography-small-font-weight--button-label-typography-small-line-height--button-label-typography-small-letter-spacing
|
button.label.typography.medium
|
typography |
{body.family}{body.size.md}{body.weight.medium}{font.line-height.compact}{font.letter-spacing.tight.md}
|
{"fontFamily":"Inter","fontSize":{"value":16,"unit":"px"},"fontWeight":500,"lineHeight":1,"letterSpacing":{"value":-0.48,"unit":"px"}}
|
--button-label-typography-medium-font-family--button-label-typography-medium-font-size--button-label-typography-medium-font-weight--button-label-typography-medium-line-height--button-label-typography-medium-letter-spacing
|
button.label.typography.large
|
typography |
{body.family}{body.size.md}{body.weight.medium}{font.line-height.compact}{font.letter-spacing.tight.md}
|
{"fontFamily":"Inter","fontSize":{"value":16,"unit":"px"},"fontWeight":500,"lineHeight":1,"letterSpacing":{"value":-0.48,"unit":"px"}}
|
--button-label-typography-large-font-family--button-label-typography-large-font-size--button-label-typography-large-font-weight--button-label-typography-large-line-height--button-label-typography-large-letter-spacing
|