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.
Playground
Token inspector
Part container
Not rendered in this configuration.
-
background
accent.neutral.defaultfrom default{global.bg.accent.neutral.default}Details
- Resolves through
light-switch.base.900 rawneutral.light.ash.900 raw- Value
-
#201E1Fdark:#E8E3E4 - CSS
--button-container-background-accent-neutral-default- Token
button.container.background.accent.neutral.default- Decisions
-
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
background
accent.neutral.hoverfrom default{global.bg.accent.neutral.hover}Details
- Resolves through
light-switch.base.800 rawneutral.light.ash.800 raw- Value
-
#323031dark:#D2CECF - CSS
--button-container-background-accent-neutral-hover- Token
button.container.background.accent.neutral.hover- Decisions
-
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
background
accent.neutral.activefrom default{global.bg.accent.neutral.active}Details
- Resolves through
light-switch.base.700 rawneutral.light.ash.700 raw- Value
-
#4C4A4Adark:#B9B7B7 - CSS
--button-container-background-accent-neutral-active- Token
button.container.background.accent.neutral.active- Decisions
-
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
background
accent.brand.defaultfrom default{global.bg.accent.brand.default}Details
- Resolves through
brand.light.600 raw- Value
-
#175DD6dark:#9EE7FA - CSS
--button-container-background-accent-brand-default- Token
button.container.background.accent.brand.default- Decisions
-
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
background
accent.brand.hoverfrom default{global.bg.accent.brand.hover}Details
- Resolves through
brand.light.700 raw- Value
-
#1148A9dark:#53D6F2 - CSS
--button-container-background-accent-brand-hover- Token
button.container.background.accent.brand.hover- Decisions
-
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
background
accent.brand.activefrom default{global.bg.accent.brand.active}Details
- Resolves through
brand.light.800 raw- Value
-
#0B2A69dark:#41B9D3 - CSS
--button-container-background-accent-brand-active- Token
button.container.background.accent.brand.active- Decisions
-
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
background
accent.error.defaultfrom default{global.bg.accent.functional.error.default}Details
- Resolves through
functional.error.500 raw- Value
-
#E12A23 - CSS
--button-container-background-accent-error-default- Token
button.container.background.accent.error.default- Decisions
-
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
background
accent.error.hoverfrom default{global.bg.accent.functional.error.hover}Details
- Resolves through
functional.error.600 raw- Value
-
#C01619 - CSS
--button-container-background-accent-error-hover- Token
button.container.background.accent.error.hover- Decisions
-
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
background
accent.error.activefrom default{global.bg.accent.functional.error.active}Details
- Resolves through
functional.error.700 raw- Value
-
#940E11 - CSS
--button-container-background-accent-error-active- Token
button.container.background.accent.error.active- Decisions
-
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
background
accent.disabledfrom default{global.bg.state.disabled.default}Details
- Value
-
#B6B4B41adark:#7676764d - CSS
--button-container-background-accent-disabled- Token
button.container.background.accent.disabled- Decisions
-
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
background
subtle.neutral.defaultfrom default{global.bg.subtle.neutral.default}Details
- Value
-
#B6B4B41adark:#7676761a - CSS
--button-container-background-subtle-neutral-default- Token
button.container.background.subtle.neutral.default- Decisions
-
- The subtle neutral fill stays translucent, global.bg.subtle.neutral.* (and ghost neutral borrows it one step behind on hover and press), with the global.border.subtle.neutral.* border. The Figma prototype uses opaque greys (#f7f7f7 / #eaeaea / #dddddd, closest to global.bg.base.neutral.2 / 3 / 4) and a #d5d5d5 border.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
background
subtle.neutral.hoverfrom default{global.bg.subtle.neutral.hover}Details
- Value
-
#B6B4B426dark:#7676764d - CSS
--button-container-background-subtle-neutral-hover- Token
button.container.background.subtle.neutral.hover- Decisions
-
- The subtle neutral fill stays translucent, global.bg.subtle.neutral.* (and ghost neutral borrows it one step behind on hover and press), with the global.border.subtle.neutral.* border. The Figma prototype uses opaque greys (#f7f7f7 / #eaeaea / #dddddd, closest to global.bg.base.neutral.2 / 3 / 4) and a #d5d5d5 border.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
background
subtle.neutral.activefrom default{global.bg.subtle.neutral.active}Details
- Value
-
#B6B4B433dark:#76767680 - CSS
--button-container-background-subtle-neutral-active- Token
button.container.background.subtle.neutral.active- Decisions
-
- The subtle neutral fill stays translucent, global.bg.subtle.neutral.* (and ghost neutral borrows it one step behind on hover and press), with the global.border.subtle.neutral.* border. The Figma prototype uses opaque greys (#f7f7f7 / #eaeaea / #dddddd, closest to global.bg.base.neutral.2 / 3 / 4) and a #d5d5d5 border.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
background
subtle.brand.defaultfrom default{global.bg.subtle.brand.default}Details
- Resolves through
brand.light.50 raw- Value
-
#EEF1F7dark:#09191D - CSS
--button-container-background-subtle-brand-default- Token
button.container.background.subtle.brand.default- Decisions
-
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
background
subtle.brand.hoverfrom default{global.bg.subtle.brand.hover}Details
- Resolves through
brand.light.100 raw- Value
-
#DDE6F5dark:#0D272E - CSS
--button-container-background-subtle-brand-hover- Token
button.container.background.subtle.brand.hover- Decisions
-
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
background
subtle.brand.activefrom default{global.bg.subtle.brand.active}Details
- Resolves through
brand.light.200 raw- Value
-
#BFD1F1dark:#10363E - CSS
--button-container-background-subtle-brand-active- Token
button.container.background.subtle.brand.active- Decisions
-
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
background
subtle.error.defaultfrom default{global.bg.subtle.functional.error.default}Details
- Resolves through
functional.error.50 raw- Value
-
#FEECEAdark:#2B0B08 - CSS
--button-container-background-subtle-error-default- Token
button.container.background.subtle.error.default- Decisions
-
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
background
subtle.error.hoverfrom default{global.bg.subtle.functional.error.hover}Details
- Resolves through
functional.error.100 raw- Value
-
#FCCDC6dark:#3E130F - CSS
--button-container-background-subtle-error-hover- Token
button.container.background.subtle.error.hover- Decisions
-
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
background
subtle.error.activefrom default{global.bg.subtle.functional.error.active}Details
- Resolves through
functional.error.200 raw- Value
-
#FAA79Ddark:#531A16 - CSS
--button-container-background-subtle-error-active- Token
button.container.background.subtle.error.active- Decisions
-
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
background
subtle.disabledfrom default{global.bg.state.disabled.default}Details
- Value
-
#B6B4B41adark:#7676764d - CSS
--button-container-background-subtle-disabled- Token
button.container.background.subtle.disabled- Decisions
-
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
background
ghost.neutral.defaultfrom default{color.transparent}Details
- Value
-
color(srgb 0 0 0 / 0) - CSS
--button-container-background-ghost-neutral-default- Token
button.container.background.ghost.neutral.default- Decisions
-
- The subtle neutral fill stays translucent, global.bg.subtle.neutral.* (and ghost neutral borrows it one step behind on hover and press), with the global.border.subtle.neutral.* border. The Figma prototype uses opaque greys (#f7f7f7 / #eaeaea / #dddddd, closest to global.bg.base.neutral.2 / 3 / 4) and a #d5d5d5 border.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- A ghost button takes the subtle tint one step behind: no fill at rest, the subtle rest fill on hover, the subtle hover fill on press.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
background
ghost.neutral.hoverfrom default{global.bg.subtle.neutral.default}Details
- Value
-
#B6B4B41adark:#7676761a - CSS
--button-container-background-ghost-neutral-hover- Token
button.container.background.ghost.neutral.hover- Decisions
-
- The subtle neutral fill stays translucent, global.bg.subtle.neutral.* (and ghost neutral borrows it one step behind on hover and press), with the global.border.subtle.neutral.* border. The Figma prototype uses opaque greys (#f7f7f7 / #eaeaea / #dddddd, closest to global.bg.base.neutral.2 / 3 / 4) and a #d5d5d5 border.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- A ghost button takes the subtle tint one step behind: no fill at rest, the subtle rest fill on hover, the subtle hover fill on press.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
background
ghost.neutral.activefrom default{global.bg.subtle.neutral.hover}Details
- Value
-
#B6B4B426dark:#7676764d - CSS
--button-container-background-ghost-neutral-active- Token
button.container.background.ghost.neutral.active- Decisions
-
- The subtle neutral fill stays translucent, global.bg.subtle.neutral.* (and ghost neutral borrows it one step behind on hover and press), with the global.border.subtle.neutral.* border. The Figma prototype uses opaque greys (#f7f7f7 / #eaeaea / #dddddd, closest to global.bg.base.neutral.2 / 3 / 4) and a #d5d5d5 border.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- A ghost button takes the subtle tint one step behind: no fill at rest, the subtle rest fill on hover, the subtle hover fill on press.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
background
ghost.brand.defaultfrom default{color.transparent}Details
- Value
-
color(srgb 0 0 0 / 0) - CSS
--button-container-background-ghost-brand-default- Token
button.container.background.ghost.brand.default- Decisions
-
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- A ghost button takes the subtle tint one step behind: no fill at rest, the subtle rest fill on hover, the subtle hover fill on press.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
background
ghost.brand.hoverfrom default{global.bg.subtle.brand.default}Details
- Resolves through
brand.light.50 raw- Value
-
#EEF1F7dark:#09191D - CSS
--button-container-background-ghost-brand-hover- Token
button.container.background.ghost.brand.hover- Decisions
-
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- A ghost button takes the subtle tint one step behind: no fill at rest, the subtle rest fill on hover, the subtle hover fill on press.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
background
ghost.brand.activefrom default{global.bg.subtle.brand.hover}Details
- Resolves through
brand.light.100 raw- Value
-
#DDE6F5dark:#0D272E - CSS
--button-container-background-ghost-brand-active- Token
button.container.background.ghost.brand.active- Decisions
-
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- A ghost button takes the subtle tint one step behind: no fill at rest, the subtle rest fill on hover, the subtle hover fill on press.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
background
ghost.error.defaultfrom default{color.transparent}Details
- Value
-
color(srgb 0 0 0 / 0) - CSS
--button-container-background-ghost-error-default- Token
button.container.background.ghost.error.default- Decisions
-
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- A ghost button takes the subtle tint one step behind: no fill at rest, the subtle rest fill on hover, the subtle hover fill on press.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
background
ghost.error.hoverfrom default{global.bg.subtle.functional.error.default}Details
- Resolves through
functional.error.50 raw- Value
-
#FEECEAdark:#2B0B08 - CSS
--button-container-background-ghost-error-hover- Token
button.container.background.ghost.error.hover- Decisions
-
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- A ghost button takes the subtle tint one step behind: no fill at rest, the subtle rest fill on hover, the subtle hover fill on press.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
background
ghost.error.activefrom default{global.bg.subtle.functional.error.hover}Details
- Resolves through
functional.error.100 raw- Value
-
#FCCDC6dark:#3E130F - CSS
--button-container-background-ghost-error-active- Token
button.container.background.ghost.error.active- Decisions
-
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- A ghost button takes the subtle tint one step behind: no fill at rest, the subtle rest fill on hover, the subtle hover fill on press.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
background
ghost.disabledfrom default{global.bg.state.disabled.default}Details
- Value
-
#B6B4B41adark:#7676764d - CSS
--button-container-background-ghost-disabled- Token
button.container.background.ghost.disabled- Decisions
-
- A disabled ghost button takes the shared disabled fill and border, global.bg.state.disabled.default and global.border.state.disabled.default, like accent and subtle buttons, as in the Figma prototype: every disabled button looks the same whatever its emphasis.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- A ghost button takes the subtle tint one step behind: no fill at rest, the subtle rest fill on hover, the subtle hover fill on press.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
border-color
accent.neutral.defaultfrom default{global.border.accent.neutral.default}Details
- Resolves through
light-switch.base.800 rawneutral.light.ash.800 raw- Value
-
#323031dark:#B9B7B7 - CSS
--button-container-border-color-accent-neutral-default- Token
button.container.border-color.accent.neutral.default- Decisions
-
- On hover and press, the border of accent and subtle buttons moves one step along the intent ramp with the fill, so it stays one step darker than the fill in every state. The Figma prototype keeps the resting border on most intents, and not on all of them.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
border-color
accent.neutral.hoverfrom default{global.border.accent.neutral.hover}Details
- Resolves through
light-switch.base.700 rawneutral.light.ash.700 raw- Value
-
#4C4A4Adark:#B9B7B7 - CSS
--button-container-border-color-accent-neutral-hover- Token
button.container.border-color.accent.neutral.hover- Decisions
-
- On hover and press, the border of accent and subtle buttons moves one step along the intent ramp with the fill, so it stays one step darker than the fill in every state. The Figma prototype keeps the resting border on most intents, and not on all of them.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
border-color
accent.neutral.activefrom default{global.border.accent.neutral.active}Details
- Resolves through
light-switch.base.600 rawneutral.light.ash.600 raw- Value
-
#616161dark:#9D9B9C - CSS
--button-container-border-color-accent-neutral-active- Token
button.container.border-color.accent.neutral.active- Decisions
-
- On hover and press, the border of accent and subtle buttons moves one step along the intent ramp with the fill, so it stays one step darker than the fill in every state. The Figma prototype keeps the resting border on most intents, and not on all of them.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
border-color
accent.brand.defaultfrom default{global.border.accent.brand.default}Details
- Resolves through
brand.light.700 raw- Value
-
#1148A9dark:#53D6F2 - CSS
--button-container-border-color-accent-brand-default- Token
button.container.border-color.accent.brand.default- Decisions
-
- On hover and press, the border of accent and subtle buttons moves one step along the intent ramp with the fill, so it stays one step darker than the fill in every state. The Figma prototype keeps the resting border on most intents, and not on all of them.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
border-color
accent.brand.hoverfrom default{global.border.accent.brand.hover}Details
- Resolves through
brand.light.800 raw- Value
-
#0B2A69dark:#41B9D3 - CSS
--button-container-border-color-accent-brand-hover- Token
button.container.border-color.accent.brand.hover- Decisions
-
- On hover and press, the border of accent and subtle buttons moves one step along the intent ramp with the fill, so it stays one step darker than the fill in every state. The Figma prototype keeps the resting border on most intents, and not on all of them.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
border-color
accent.brand.activefrom default{global.border.accent.brand.active}Details
- Resolves through
brand.light.900 raw- Value
-
#0B204Ddark:#3499AF - CSS
--button-container-border-color-accent-brand-active- Token
button.container.border-color.accent.brand.active- Decisions
-
- On hover and press, the border of accent and subtle buttons moves one step along the intent ramp with the fill, so it stays one step darker than the fill in every state. The Figma prototype keeps the resting border on most intents, and not on all of them.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
border-color
accent.error.defaultfrom default{global.border.accent.functional.error.default}Details
- Resolves through
functional.error.600 raw- Value
-
#C01619 - CSS
--button-container-border-color-accent-error-default- Token
button.container.border-color.accent.error.default- Decisions
-
- On hover and press, the border of accent and subtle buttons moves one step along the intent ramp with the fill, so it stays one step darker than the fill in every state. The Figma prototype keeps the resting border on most intents, and not on all of them.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
border-color
accent.error.hoverfrom default{global.border.accent.functional.error.hover}Details
- Resolves through
functional.error.700 raw- Value
-
#940E11 - CSS
--button-container-border-color-accent-error-hover- Token
button.container.border-color.accent.error.hover- Decisions
-
- On hover and press, the border of accent and subtle buttons moves one step along the intent ramp with the fill, so it stays one step darker than the fill in every state. The Figma prototype keeps the resting border on most intents, and not on all of them.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
border-color
accent.error.activefrom default{global.border.accent.functional.error.active}Details
- Resolves through
functional.error.800 raw- Value
-
#531A16 - CSS
--button-container-border-color-accent-error-active- Token
button.container.border-color.accent.error.active- Decisions
-
- On hover and press, the border of accent and subtle buttons moves one step along the intent ramp with the fill, so it stays one step darker than the fill in every state. The Figma prototype keeps the resting border on most intents, and not on all of them.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
border-color
accent.disabledfrom default{global.border.state.disabled.default}Details
- Value
-
#B6B4B466dark:#363636b2 - CSS
--button-container-border-color-accent-disabled- Token
button.container.border-color.accent.disabled- Decisions
-
- On hover and press, the border of accent and subtle buttons moves one step along the intent ramp with the fill, so it stays one step darker than the fill in every state. The Figma prototype keeps the resting border on most intents, and not on all of them.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
border-color
subtle.neutral.defaultfrom default{global.border.subtle.neutral.default}Details
- Resolves through
light-switch.base.200 rawneutral.light.ash.200 raw- Value
-
#DFDBDCdark:#36363680 - CSS
--button-container-border-color-subtle-neutral-default- Token
button.container.border-color.subtle.neutral.default- Decisions
-
- A ghost button has no border at rest; on hover and press it takes the subtle border one step behind, as its fill does (decision ghost-tint-one-step-behind) and as in the Figma prototype: the subtle resting border on hover, the subtle hover border on press (global.border.subtle.<family>.default / hover).
- The subtle neutral fill stays translucent, global.bg.subtle.neutral.* (and ghost neutral borrows it one step behind on hover and press), with the global.border.subtle.neutral.* border. The Figma prototype uses opaque greys (#f7f7f7 / #eaeaea / #dddddd, closest to global.bg.base.neutral.2 / 3 / 4) and a #d5d5d5 border.
- On hover and press, the border of accent and subtle buttons moves one step along the intent ramp with the fill, so it stays one step darker than the fill in every state. The Figma prototype keeps the resting border on most intents, and not on all of them.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
border-color
subtle.neutral.hoverfrom default{global.border.subtle.neutral.hover}Details
- Resolves through
light-switch.base.300 rawneutral.light.ash.300 raw- Value
-
#D7D3D4dark:#363636 - CSS
--button-container-border-color-subtle-neutral-hover- Token
button.container.border-color.subtle.neutral.hover- Decisions
-
- A ghost button has no border at rest; on hover and press it takes the subtle border one step behind, as its fill does (decision ghost-tint-one-step-behind) and as in the Figma prototype: the subtle resting border on hover, the subtle hover border on press (global.border.subtle.<family>.default / hover).
- The subtle neutral fill stays translucent, global.bg.subtle.neutral.* (and ghost neutral borrows it one step behind on hover and press), with the global.border.subtle.neutral.* border. The Figma prototype uses opaque greys (#f7f7f7 / #eaeaea / #dddddd, closest to global.bg.base.neutral.2 / 3 / 4) and a #d5d5d5 border.
- On hover and press, the border of accent and subtle buttons moves one step along the intent ramp with the fill, so it stays one step darker than the fill in every state. The Figma prototype keeps the resting border on most intents, and not on all of them.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
border-color
subtle.neutral.activefrom default{global.border.subtle.neutral.active}Details
- Resolves through
light-switch.base.400 rawneutral.light.ash.400 raw- Value
-
#B6B4B4dark:#767676 - CSS
--button-container-border-color-subtle-neutral-active- Token
button.container.border-color.subtle.neutral.active- Decisions
-
- A ghost button has no border at rest; on hover and press it takes the subtle border one step behind, as its fill does (decision ghost-tint-one-step-behind) and as in the Figma prototype: the subtle resting border on hover, the subtle hover border on press (global.border.subtle.<family>.default / hover).
- The subtle neutral fill stays translucent, global.bg.subtle.neutral.* (and ghost neutral borrows it one step behind on hover and press), with the global.border.subtle.neutral.* border. The Figma prototype uses opaque greys (#f7f7f7 / #eaeaea / #dddddd, closest to global.bg.base.neutral.2 / 3 / 4) and a #d5d5d5 border.
- On hover and press, the border of accent and subtle buttons moves one step along the intent ramp with the fill, so it stays one step darker than the fill in every state. The Figma prototype keeps the resting border on most intents, and not on all of them.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
border-color
subtle.brand.defaultfrom default{global.border.subtle.brand.default}Details
- Resolves through
brand.light.100 raw- Value
-
#DDE6F5dark:#0D272E - CSS
--button-container-border-color-subtle-brand-default- Token
button.container.border-color.subtle.brand.default- Decisions
-
- A ghost button has no border at rest; on hover and press it takes the subtle border one step behind, as its fill does (decision ghost-tint-one-step-behind) and as in the Figma prototype: the subtle resting border on hover, the subtle hover border on press (global.border.subtle.<family>.default / hover).
- On hover and press, the border of accent and subtle buttons moves one step along the intent ramp with the fill, so it stays one step darker than the fill in every state. The Figma prototype keeps the resting border on most intents, and not on all of them.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
border-color
subtle.brand.hoverfrom default{global.border.subtle.brand.hover}Details
- Resolves through
brand.light.200 raw- Value
-
#BFD1F1dark:#10363E - CSS
--button-container-border-color-subtle-brand-hover- Token
button.container.border-color.subtle.brand.hover- Decisions
-
- A ghost button has no border at rest; on hover and press it takes the subtle border one step behind, as its fill does (decision ghost-tint-one-step-behind) and as in the Figma prototype: the subtle resting border on hover, the subtle hover border on press (global.border.subtle.<family>.default / hover).
- On hover and press, the border of accent and subtle buttons moves one step along the intent ramp with the fill, so it stays one step darker than the fill in every state. The Figma prototype keeps the resting border on most intents, and not on all of them.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
border-color
subtle.brand.activefrom default{global.border.subtle.brand.active}Details
- Resolves through
brand.light.300 raw- Value
-
#9BB9ECdark:#1F606E - CSS
--button-container-border-color-subtle-brand-active- Token
button.container.border-color.subtle.brand.active- Decisions
-
- A ghost button has no border at rest; on hover and press it takes the subtle border one step behind, as its fill does (decision ghost-tint-one-step-behind) and as in the Figma prototype: the subtle resting border on hover, the subtle hover border on press (global.border.subtle.<family>.default / hover).
- On hover and press, the border of accent and subtle buttons moves one step along the intent ramp with the fill, so it stays one step darker than the fill in every state. The Figma prototype keeps the resting border on most intents, and not on all of them.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
border-color
subtle.error.defaultfrom default{global.border.subtle.functional.error.default}Details
- Resolves through
functional.error.100 raw- Value
-
#FCCDC6dark:#3E130F - CSS
--button-container-border-color-subtle-error-default- Token
button.container.border-color.subtle.error.default- Decisions
-
- A ghost button has no border at rest; on hover and press it takes the subtle border one step behind, as its fill does (decision ghost-tint-one-step-behind) and as in the Figma prototype: the subtle resting border on hover, the subtle hover border on press (global.border.subtle.<family>.default / hover).
- On hover and press, the border of accent and subtle buttons moves one step along the intent ramp with the fill, so it stays one step darker than the fill in every state. The Figma prototype keeps the resting border on most intents, and not on all of them.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
border-color
subtle.error.hoverfrom default{global.border.subtle.functional.error.hover}Details
- Resolves through
functional.error.200 raw- Value
-
#FAA79Ddark:#531A16 - CSS
--button-container-border-color-subtle-error-hover- Token
button.container.border-color.subtle.error.hover- Decisions
-
- A ghost button has no border at rest; on hover and press it takes the subtle border one step behind, as its fill does (decision ghost-tint-one-step-behind) and as in the Figma prototype: the subtle resting border on hover, the subtle hover border on press (global.border.subtle.<family>.default / hover).
- On hover and press, the border of accent and subtle buttons moves one step along the intent ramp with the fill, so it stays one step darker than the fill in every state. The Figma prototype keeps the resting border on most intents, and not on all of them.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
border-color
subtle.error.activefrom default{global.border.subtle.functional.error.active}Details
- Resolves through
functional.error.300 raw- Value
-
#F88275dark:#940E11 - CSS
--button-container-border-color-subtle-error-active- Token
button.container.border-color.subtle.error.active- Decisions
-
- A ghost button has no border at rest; on hover and press it takes the subtle border one step behind, as its fill does (decision ghost-tint-one-step-behind) and as in the Figma prototype: the subtle resting border on hover, the subtle hover border on press (global.border.subtle.<family>.default / hover).
- On hover and press, the border of accent and subtle buttons moves one step along the intent ramp with the fill, so it stays one step darker than the fill in every state. The Figma prototype keeps the resting border on most intents, and not on all of them.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
border-color
subtle.disabledfrom default{global.border.state.disabled.default}Details
- Value
-
#B6B4B466dark:#363636b2 - CSS
--button-container-border-color-subtle-disabled- Token
button.container.border-color.subtle.disabled- Decisions
-
- On hover and press, the border of accent and subtle buttons moves one step along the intent ramp with the fill, so it stays one step darker than the fill in every state. The Figma prototype keeps the resting border on most intents, and not on all of them.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
border-color
ghost.neutral.defaultfrom default{color.transparent}Details
- Value
-
color(srgb 0 0 0 / 0) - CSS
--button-container-border-color-ghost-neutral-default- Token
button.container.border-color.ghost.neutral.default- Decisions
-
- A ghost button has no border at rest; on hover and press it takes the subtle border one step behind, as its fill does (decision ghost-tint-one-step-behind) and as in the Figma prototype: the subtle resting border on hover, the subtle hover border on press (global.border.subtle.<family>.default / hover).
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
border-color
ghost.neutral.hoverfrom default{global.border.subtle.neutral.default}Details
- Resolves through
light-switch.base.200 rawneutral.light.ash.200 raw- Value
-
#DFDBDCdark:#36363680 - CSS
--button-container-border-color-ghost-neutral-hover- Token
button.container.border-color.ghost.neutral.hover- Decisions
-
- A ghost button has no border at rest; on hover and press it takes the subtle border one step behind, as its fill does (decision ghost-tint-one-step-behind) and as in the Figma prototype: the subtle resting border on hover, the subtle hover border on press (global.border.subtle.<family>.default / hover).
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
border-color
ghost.neutral.activefrom default{global.border.subtle.neutral.hover}Details
- Resolves through
light-switch.base.300 rawneutral.light.ash.300 raw- Value
-
#D7D3D4dark:#363636 - CSS
--button-container-border-color-ghost-neutral-active- Token
button.container.border-color.ghost.neutral.active- Decisions
-
- A ghost button has no border at rest; on hover and press it takes the subtle border one step behind, as its fill does (decision ghost-tint-one-step-behind) and as in the Figma prototype: the subtle resting border on hover, the subtle hover border on press (global.border.subtle.<family>.default / hover).
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
border-color
ghost.brand.defaultfrom default{color.transparent}Details
- Value
-
color(srgb 0 0 0 / 0) - CSS
--button-container-border-color-ghost-brand-default- Token
button.container.border-color.ghost.brand.default- Decisions
-
- A ghost button has no border at rest; on hover and press it takes the subtle border one step behind, as its fill does (decision ghost-tint-one-step-behind) and as in the Figma prototype: the subtle resting border on hover, the subtle hover border on press (global.border.subtle.<family>.default / hover).
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
border-color
ghost.brand.hoverfrom default{global.border.subtle.brand.default}Details
- Resolves through
brand.light.100 raw- Value
-
#DDE6F5dark:#0D272E - CSS
--button-container-border-color-ghost-brand-hover- Token
button.container.border-color.ghost.brand.hover- Decisions
-
- A ghost button has no border at rest; on hover and press it takes the subtle border one step behind, as its fill does (decision ghost-tint-one-step-behind) and as in the Figma prototype: the subtle resting border on hover, the subtle hover border on press (global.border.subtle.<family>.default / hover).
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
border-color
ghost.brand.activefrom default{global.border.subtle.brand.hover}Details
- Resolves through
brand.light.200 raw- Value
-
#BFD1F1dark:#10363E - CSS
--button-container-border-color-ghost-brand-active- Token
button.container.border-color.ghost.brand.active- Decisions
-
- A ghost button has no border at rest; on hover and press it takes the subtle border one step behind, as its fill does (decision ghost-tint-one-step-behind) and as in the Figma prototype: the subtle resting border on hover, the subtle hover border on press (global.border.subtle.<family>.default / hover).
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
border-color
ghost.error.defaultfrom default{color.transparent}Details
- Value
-
color(srgb 0 0 0 / 0) - CSS
--button-container-border-color-ghost-error-default- Token
button.container.border-color.ghost.error.default- Decisions
-
- A ghost button has no border at rest; on hover and press it takes the subtle border one step behind, as its fill does (decision ghost-tint-one-step-behind) and as in the Figma prototype: the subtle resting border on hover, the subtle hover border on press (global.border.subtle.<family>.default / hover).
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
border-color
ghost.error.hoverfrom default{global.border.subtle.functional.error.default}Details
- Resolves through
functional.error.100 raw- Value
-
#FCCDC6dark:#3E130F - CSS
--button-container-border-color-ghost-error-hover- Token
button.container.border-color.ghost.error.hover- Decisions
-
- A ghost button has no border at rest; on hover and press it takes the subtle border one step behind, as its fill does (decision ghost-tint-one-step-behind) and as in the Figma prototype: the subtle resting border on hover, the subtle hover border on press (global.border.subtle.<family>.default / hover).
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
border-color
ghost.error.activefrom default{global.border.subtle.functional.error.hover}Details
- Resolves through
functional.error.200 raw- Value
-
#FAA79Ddark:#531A16 - CSS
--button-container-border-color-ghost-error-active- Token
button.container.border-color.ghost.error.active- Decisions
-
- A ghost button has no border at rest; on hover and press it takes the subtle border one step behind, as its fill does (decision ghost-tint-one-step-behind) and as in the Figma prototype: the subtle resting border on hover, the subtle hover border on press (global.border.subtle.<family>.default / hover).
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
border-color
ghost.disabledfrom default{global.border.state.disabled.default}Details
- Value
-
#B6B4B466dark:#363636b2 - CSS
--button-container-border-color-ghost-disabled- Token
button.container.border-color.ghost.disabled- Decisions
-
- A disabled ghost button takes the shared disabled fill and border, global.bg.state.disabled.default and global.border.state.disabled.default, like accent and subtle buttons, as in the Figma prototype: every disabled button looks the same whatever its emphasis.
- A ghost button has no border at rest; on hover and press it takes the subtle border one step behind, as its fill does (decision ghost-tint-one-step-behind) and as in the Figma prototype: the subtle resting border on hover, the subtle hover border on press (global.border.subtle.<family>.default / hover).
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
border-width from default
{stroke-width.sm}Details
- Value
-
0.6px - CSS
--button-container-border-width- Token
button.container.border-width- Decisions
-
border-radius
xsmallfrom default{corner-radius.2xs}Details
- Value
-
2px - CSS
--button-container-border-radius-xsmall- Token
button.container.border-radius.xsmall- Decisions
-
border-radius
smallfrom default{corner-radius.2xs}Details
- Value
-
2px - CSS
--button-container-border-radius-small- Token
button.container.border-radius.small- Decisions
-
border-radius
mediumfrom default{corner-radius.xs}Details
- Value
-
4px - CSS
--button-container-border-radius-medium- Token
button.container.border-radius.medium- Decisions
-
border-radius
largefrom default{corner-radius.xs}Details
- Value
-
4px - CSS
--button-container-border-radius-large- Token
button.container.border-radius.large- Decisions
-
padding-inline
xsmallfrom default{space.6}Details
- Value
-
6px - CSS
--button-container-padding-inline-xsmall- Token
button.container.padding-inline.xsmall- Decisions
-
- With an icon, the inline padding narrows on both sides, as in the Figma prototype: the side that holds an icon takes space.2 / 6 / 6 / 8 between the border and the icon, and the label side of a button with an icon on the other side only takes space.6 / 8 / 8 / 10, extra small to large. A button without an icon keeps space.6 / 8 / 12 / 16 on both sides.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The size property offers four sizes: xsmall, small, medium and large.
-
padding-inline
smallfrom default{space.8}Details
- Value
-
8px - CSS
--button-container-padding-inline-small- Token
button.container.padding-inline.small- Decisions
-
- With an icon, the inline padding narrows on both sides, as in the Figma prototype: the side that holds an icon takes space.2 / 6 / 6 / 8 between the border and the icon, and the label side of a button with an icon on the other side only takes space.6 / 8 / 8 / 10, extra small to large. A button without an icon keeps space.6 / 8 / 12 / 16 on both sides.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The size property offers four sizes: xsmall, small, medium and large.
-
padding-inline
mediumfrom default{space.12}Details
- Value
-
12px - CSS
--button-container-padding-inline-medium- Token
button.container.padding-inline.medium- Decisions
-
- With an icon, the inline padding narrows on both sides, as in the Figma prototype: the side that holds an icon takes space.2 / 6 / 6 / 8 between the border and the icon, and the label side of a button with an icon on the other side only takes space.6 / 8 / 8 / 10, extra small to large. A button without an icon keeps space.6 / 8 / 12 / 16 on both sides.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The size property offers four sizes: xsmall, small, medium and large.
-
padding-inline
largefrom default{space.16}Details
- Value
-
16px - CSS
--button-container-padding-inline-large- Token
button.container.padding-inline.large- Decisions
-
- With an icon, the inline padding narrows on both sides, as in the Figma prototype: the side that holds an icon takes space.2 / 6 / 6 / 8 between the border and the icon, and the label side of a button with an icon on the other side only takes space.6 / 8 / 8 / 10, extra small to large. A button without an icon keeps space.6 / 8 / 12 / 16 on both sides.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The size property offers four sizes: xsmall, small, medium and large.
-
padding-inline.icon-side
xsmallfrom default{space.2}Details
- Value
-
2px - CSS
--button-container-padding-inline-icon-side-xsmall- Token
button.container.padding-inline.icon-side.xsmall- Decisions
-
- With an icon, the inline padding narrows on both sides, as in the Figma prototype: the side that holds an icon takes space.2 / 6 / 6 / 8 between the border and the icon, and the label side of a button with an icon on the other side only takes space.6 / 8 / 8 / 10, extra small to large. A button without an icon keeps space.6 / 8 / 12 / 16 on both sides.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The size property offers four sizes: xsmall, small, medium and large.
-
padding-inline.icon-side
smallfrom default{space.6}Details
- Value
-
6px - CSS
--button-container-padding-inline-icon-side-small- Token
button.container.padding-inline.icon-side.small- Decisions
-
- With an icon, the inline padding narrows on both sides, as in the Figma prototype: the side that holds an icon takes space.2 / 6 / 6 / 8 between the border and the icon, and the label side of a button with an icon on the other side only takes space.6 / 8 / 8 / 10, extra small to large. A button without an icon keeps space.6 / 8 / 12 / 16 on both sides.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The size property offers four sizes: xsmall, small, medium and large.
-
padding-inline.icon-side
mediumfrom default{space.6}Details
- Value
-
6px - CSS
--button-container-padding-inline-icon-side-medium- Token
button.container.padding-inline.icon-side.medium- Decisions
-
- With an icon, the inline padding narrows on both sides, as in the Figma prototype: the side that holds an icon takes space.2 / 6 / 6 / 8 between the border and the icon, and the label side of a button with an icon on the other side only takes space.6 / 8 / 8 / 10, extra small to large. A button without an icon keeps space.6 / 8 / 12 / 16 on both sides.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The size property offers four sizes: xsmall, small, medium and large.
-
padding-inline.icon-side
largefrom default{space.8}Details
- Value
-
8px - CSS
--button-container-padding-inline-icon-side-large- Token
button.container.padding-inline.icon-side.large- Decisions
-
- With an icon, the inline padding narrows on both sides, as in the Figma prototype: the side that holds an icon takes space.2 / 6 / 6 / 8 between the border and the icon, and the label side of a button with an icon on the other side only takes space.6 / 8 / 8 / 10, extra small to large. A button without an icon keeps space.6 / 8 / 12 / 16 on both sides.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The size property offers four sizes: xsmall, small, medium and large.
-
padding-inline.label-side
xsmallfrom default{space.6}Details
- Value
-
6px - CSS
--button-container-padding-inline-label-side-xsmall- Token
button.container.padding-inline.label-side.xsmall- Decisions
-
- With an icon, the inline padding narrows on both sides, as in the Figma prototype: the side that holds an icon takes space.2 / 6 / 6 / 8 between the border and the icon, and the label side of a button with an icon on the other side only takes space.6 / 8 / 8 / 10, extra small to large. A button without an icon keeps space.6 / 8 / 12 / 16 on both sides.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The size property offers four sizes: xsmall, small, medium and large.
-
padding-inline.label-side
smallfrom default{space.8}Details
- Value
-
8px - CSS
--button-container-padding-inline-label-side-small- Token
button.container.padding-inline.label-side.small- Decisions
-
- With an icon, the inline padding narrows on both sides, as in the Figma prototype: the side that holds an icon takes space.2 / 6 / 6 / 8 between the border and the icon, and the label side of a button with an icon on the other side only takes space.6 / 8 / 8 / 10, extra small to large. A button without an icon keeps space.6 / 8 / 12 / 16 on both sides.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The size property offers four sizes: xsmall, small, medium and large.
-
padding-inline.label-side
mediumfrom default{space.8}Details
- Value
-
8px - CSS
--button-container-padding-inline-label-side-medium- Token
button.container.padding-inline.label-side.medium- Decisions
-
- With an icon, the inline padding narrows on both sides, as in the Figma prototype: the side that holds an icon takes space.2 / 6 / 6 / 8 between the border and the icon, and the label side of a button with an icon on the other side only takes space.6 / 8 / 8 / 10, extra small to large. A button without an icon keeps space.6 / 8 / 12 / 16 on both sides.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The size property offers four sizes: xsmall, small, medium and large.
-
padding-inline.label-side
largefrom default{space.10}Details
- Value
-
10px - CSS
--button-container-padding-inline-label-side-large- Token
button.container.padding-inline.label-side.large- Decisions
-
- With an icon, the inline padding narrows on both sides, as in the Figma prototype: the side that holds an icon takes space.2 / 6 / 6 / 8 between the border and the icon, and the label side of a button with an icon on the other side only takes space.6 / 8 / 8 / 10, extra small to large. A button without an icon keeps space.6 / 8 / 12 / 16 on both sides.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The size property offers four sizes: xsmall, small, medium and large.
-
min-height
xsmallfrom default{space.24}Details
- Value
-
24px - CSS
--button-container-min-height-xsmall- Token
button.container.min-height.xsmall- Decisions
-
- The minimum block padding is space.2 / 3 / 5 / 8, extra small to large, so that the icon, the block padding and the border fit inside the minimum height: a button is 24 / 28 / 36 / 44 px high with or without an icon. As before, larger content grows the button and keeps that space above and below.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The size property offers four sizes: xsmall, small, medium and large.
-
min-height
smallfrom default{space.28}Details
- Value
-
28px - CSS
--button-container-min-height-small- Token
button.container.min-height.small- Decisions
-
- The minimum block padding is space.2 / 3 / 5 / 8, extra small to large, so that the icon, the block padding and the border fit inside the minimum height: a button is 24 / 28 / 36 / 44 px high with or without an icon. As before, larger content grows the button and keeps that space above and below.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The size property offers four sizes: xsmall, small, medium and large.
-
min-height
mediumfrom default{space.36}Details
- Value
-
36px - CSS
--button-container-min-height-medium- Token
button.container.min-height.medium- Decisions
-
- Without a size, a button is medium (36 px), as the decision defaults says. The Figma prototype's Button set defaults to xsmall; the repository keeps medium. Its other defaults (accent, neutral, no icon) match the prototype.
- The minimum block padding is space.2 / 3 / 5 / 8, extra small to large, so that the icon, the block padding and the border fit inside the minimum height: a button is 24 / 28 / 36 / 44 px high with or without an icon. As before, larger content grows the button and keeps that space above and below.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The size property offers four sizes: xsmall, small, medium and large.
-
min-height
largefrom default{space.44}Details
- Value
-
44px - CSS
--button-container-min-height-large- Token
button.container.min-height.large- Decisions
-
- The minimum block padding is space.2 / 3 / 5 / 8, extra small to large, so that the icon, the block padding and the border fit inside the minimum height: a button is 24 / 28 / 36 / 44 px high with or without an icon. As before, larger content grows the button and keeps that space above and below.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The size property offers four sizes: xsmall, small, medium and large.
-
padding-block
xsmallfrom default{space.2}Details
- Value
-
2px - CSS
--button-container-padding-block-xsmall- Token
button.container.padding-block.xsmall- Decisions
-
- The minimum block padding is space.2 / 3 / 5 / 8, extra small to large, so that the icon, the block padding and the border fit inside the minimum height: a button is 24 / 28 / 36 / 44 px high with or without an icon. As before, larger content grows the button and keeps that space above and below.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
-
padding-block
smallfrom default{space.3}Details
- Value
-
3px - CSS
--button-container-padding-block-small- Token
button.container.padding-block.small- Decisions
-
- The minimum block padding is space.2 / 3 / 5 / 8, extra small to large, so that the icon, the block padding and the border fit inside the minimum height: a button is 24 / 28 / 36 / 44 px high with or without an icon. As before, larger content grows the button and keeps that space above and below.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
-
padding-block
mediumfrom default{space.5}Details
- Value
-
5px - CSS
--button-container-padding-block-medium- Token
button.container.padding-block.medium- Decisions
-
- The minimum block padding is space.2 / 3 / 5 / 8, extra small to large, so that the icon, the block padding and the border fit inside the minimum height: a button is 24 / 28 / 36 / 44 px high with or without an icon. As before, larger content grows the button and keeps that space above and below.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
-
padding-block
largefrom default{space.8}Details
- Value
-
8px - CSS
--button-container-padding-block-large- Token
button.container.padding-block.large- Decisions
-
- The minimum block padding is space.2 / 3 / 5 / 8, extra small to large, so that the icon, the block padding and the border fit inside the minimum height: a button is 24 / 28 / 36 / 44 px high with or without an icon. As before, larger content grows the button and keeps that space above and below.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
-
gap
xsmallfrom default{space.2}Details
- Value
-
2px - CSS
--button-container-gap-xsmall- Token
button.container.gap.xsmall- Decisions
-
- The gap between an icon and the label follows the size: space.2 / 2 / 4 / 4, extra small to large. It is smaller than in the Figma prototype (6 / 6 / 10 / 16 px).
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
-
gap
smallfrom default{space.2}Details
- Value
-
2px - CSS
--button-container-gap-small- Token
button.container.gap.small- Decisions
-
- The gap between an icon and the label follows the size: space.2 / 2 / 4 / 4, extra small to large. It is smaller than in the Figma prototype (6 / 6 / 10 / 16 px).
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
-
gap
mediumfrom default{space.4}Details
- Value
-
4px - CSS
--button-container-gap-medium- Token
button.container.gap.medium- Decisions
-
- The gap between an icon and the label follows the size: space.2 / 2 / 4 / 4, extra small to large. It is smaller than in the Figma prototype (6 / 6 / 10 / 16 px).
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
-
gap
largefrom default{space.4}Details
- Value
-
4px - CSS
--button-container-gap-large- Token
button.container.gap.large- Decisions
-
- The gap between an icon and the label follows the size: space.2 / 2 / 4 / 4, extra small to large. It is smaller than in the Figma prototype (6 / 6 / 10 / 16 px).
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
-
outline-width
focus-visiblefrom default{focus.ring.width}Details
- Resolves through
stroke-width.lg semantic- Value
-
2.4px - CSS
--button-container-outline-width-focus-visible- Token
button.container.outline-width.focus-visible- Decisions
-
- The button keeps the shared focus ring of the Focus ring foundation, at every size and emphasis: 2.4 px (focus.ring.width), color.focus.ring, 4 px from the button (focus.ring.offset). The Figma prototype draws 1.2 px in #497ede (global.border.base.brand.default; #1148a9 on most accent brand variants), 2 px from the button at extra small and small and 4 px above. A 2 px ring from the space scale is preferred for later, as a change of the whole system, tracked as a known issue.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The focus ring is the strong focus of the stroke scale, 2.4 px, for every component, not the 1.2 px the prototype hints for focus rings.
-
outline-offset
focus-visiblefrom default{focus.ring.offset}Details
- Resolves through
space.4 semantic- Value
-
4px - CSS
--button-container-outline-offset-focus-visible- Token
button.container.outline-offset.focus-visible- Decisions
-
- The button keeps the shared focus ring of the Focus ring foundation, at every size and emphasis: 2.4 px (focus.ring.width), color.focus.ring, 4 px from the button (focus.ring.offset). The Figma prototype draws 1.2 px in #497ede (global.border.base.brand.default; #1148a9 on most accent brand variants), 2 px from the button at extra small and small and 4 px above. A 2 px ring from the space scale is preferred for later, as a change of the whole system, tracked as a known issue.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
-
outline-color
focus-visiblefrom default{color.focus.ring}Details
- Resolves through
brand.light.600 raw- Value
-
#175DD6dark:#9EE7FA - CSS
--button-container-outline-color-focus-visible- Token
button.container.outline-color.focus-visible- Decisions
-
- The button keeps the shared focus ring of the Focus ring foundation, at every size and emphasis: 2.4 px (focus.ring.width), color.focus.ring, 4 px from the button (focus.ring.offset). The Figma prototype draws 1.2 px in #497ede (global.border.base.brand.default; #1148a9 on most accent brand variants), 2 px from the button at extra small and small and 4 px above. A 2 px ring from the space scale is preferred for later, as a change of the whole system, tracked as a known issue.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
-
transition.duration from default
{duration.fast}Details
- Value
-
150ms - CSS
--button-container-transition-duration- Token
button.container.transition.duration- Decisions
-
transition.easing from default
{easing.standard}Details
- Value
-
cubic-bezier(0.2, 0, 0, 1) - CSS
--button-container-transition-easing- Token
button.container.transition.easing- Decisions
Part icon
Not rendered in this configuration.
-
font-family from default
{font.icon.family}Details
- Value
-
"Material Symbols Outlined" - CSS
--button-icon-font-family- Token
button.icon.font-family- Decisions
-
font-weight from default
{font.icon.weight.light}Details
- Value
-
300 - CSS
--button-icon-font-weight- Token
button.icon.font-weight- Decisions
-
fill from default
{font.icon.fill.off}Details
- Value
-
0 - CSS
--button-icon-fill- Token
button.icon.fill- Decisions
-
grade from default
{font.icon.grade.normal}Details
- Value
-
0 - CSS
--button-icon-grade- Token
button.icon.grade- Decisions
-
optical-size from default
{font.icon.optical-size.20}Details
- Value
-
20 - CSS
--button-icon-optical-size- Token
button.icon.optical-size- Decisions
-
- Icons keep optical size 20 (font.icon.optical-size.20) at every size, including the 24 px icons of medium and large; the Figma prototype switches between 20 and 24.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
-
size
xsmallfrom default{size.2}Details
- Value
-
16px - CSS
--button-icon-size-xsmall- Token
button.icon.size.xsmall- Decisions
-
- The icon size follows the Figma prototype: size.2 / 3 / 4 / 4 (16 / 20 / 24 / 24 px), extra small to large.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The size property offers four sizes: xsmall, small, medium and large.
-
size
smallfrom default{size.3}Details
- Value
-
20px - CSS
--button-icon-size-small- Token
button.icon.size.small- Decisions
-
- The icon size follows the Figma prototype: size.2 / 3 / 4 / 4 (16 / 20 / 24 / 24 px), extra small to large.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The size property offers four sizes: xsmall, small, medium and large.
-
size
mediumfrom default{size.4}Details
- Value
-
24px - CSS
--button-icon-size-medium- Token
button.icon.size.medium- Decisions
-
- The icon size follows the Figma prototype: size.2 / 3 / 4 / 4 (16 / 20 / 24 / 24 px), extra small to large.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The size property offers four sizes: xsmall, small, medium and large.
-
size
largefrom default{size.4}Details
- Value
-
24px - CSS
--button-icon-size-large- Token
button.icon.size.large- Decisions
-
- The icon size follows the Figma prototype: size.2 / 3 / 4 / 4 (16 / 20 / 24 / 24 px), extra small to large.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The size property offers four sizes: xsmall, small, medium and large.
Part label
Not rendered in this configuration.
-
color
accent.neutral.defaultfrom default{global.text.on-accent.neutral.primary}Details
- Resolves through
light-switch.base.25 rawneutral.light.ash.25 raw- Value
-
#FDFDFDdark:#191919 - CSS
--button-label-color-accent-neutral-default- Token
button.label.color.accent.neutral.default- Decisions
-
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
color
accent.neutral.hoverfrom default{global.text.on-accent.neutral.primary}Details
- Resolves through
light-switch.base.25 rawneutral.light.ash.25 raw- Value
-
#FDFDFDdark:#191919 - CSS
--button-label-color-accent-neutral-hover- Token
button.label.color.accent.neutral.hover- Decisions
-
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
color
accent.neutral.activefrom default{global.text.on-accent.neutral.primary}Details
- Resolves through
light-switch.base.25 rawneutral.light.ash.25 raw- Value
-
#FDFDFDdark:#191919 - CSS
--button-label-color-accent-neutral-active- Token
button.label.color.accent.neutral.active- Decisions
-
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
color
accent.brand.defaultfrom default{global.text.on-accent.brand.default}Details
- Resolves through
brand.light.25 raw- Value
-
#FBFCFDdark:#09191D - CSS
--button-label-color-accent-brand-default- Token
button.label.color.accent.brand.default- Decisions
-
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
color
accent.brand.hoverfrom default{global.text.on-accent.brand.default}Details
- Resolves through
brand.light.25 raw- Value
-
#FBFCFDdark:#09191D - CSS
--button-label-color-accent-brand-hover- Token
button.label.color.accent.brand.hover- Decisions
-
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
color
accent.brand.activefrom default{global.text.on-accent.brand.default}Details
- Resolves through
brand.light.25 raw- Value
-
#FBFCFDdark:#09191D - CSS
--button-label-color-accent-brand-active- Token
button.label.color.accent.brand.active- Decisions
-
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
color
accent.error.defaultfrom default{global.text.on-accent.functional.error.default}Details
- Resolves through
functional.error.25 raw- Value
-
#FEFBFA - CSS
--button-label-color-accent-error-default- Token
button.label.color.accent.error.default- Decisions
-
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
color
accent.error.hoverfrom default{global.text.on-accent.functional.error.default}Details
- Resolves through
functional.error.25 raw- Value
-
#FEFBFA - CSS
--button-label-color-accent-error-hover- Token
button.label.color.accent.error.hover- Decisions
-
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
color
accent.error.activefrom default{global.text.on-accent.functional.error.default}Details
- Resolves through
functional.error.25 raw- Value
-
#FEFBFA - CSS
--button-label-color-accent-error-active- Token
button.label.color.accent.error.active- Decisions
-
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
color
accent.disabledfrom default{global.text.state.disabled.default}Details
- Resolves through
light-switch.base.500 rawneutral.light.ash.500 raw- Value
-
#8C8C8Cdark:#9D9B9Cb2 - CSS
--button-label-color-accent-disabled- Token
button.label.color.accent.disabled- Decisions
-
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
color
subtle.neutral.defaultfrom default{global.text.on-base.neutral.primary}Details
- Resolves through
light-switch.base.950 rawneutral.light.ash.950 raw- Value
-
#0E0D0Ddark:#D2CECF - CSS
--button-label-color-subtle-neutral-default- Token
button.label.color.subtle.neutral.default- Decisions
-
- The label of subtle and ghost neutral buttons is the primary text color, global.text.on-base.neutral.primary, in every state and in both modes, as in the Figma prototype; it was global.text.on-subtle.neutral.default, a softer grey.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
color
subtle.neutral.hoverfrom default{global.text.on-base.neutral.primary}Details
- Resolves through
light-switch.base.950 rawneutral.light.ash.950 raw- Value
-
#0E0D0Ddark:#D2CECF - CSS
--button-label-color-subtle-neutral-hover- Token
button.label.color.subtle.neutral.hover- Decisions
-
- The label of subtle and ghost neutral buttons is the primary text color, global.text.on-base.neutral.primary, in every state and in both modes, as in the Figma prototype; it was global.text.on-subtle.neutral.default, a softer grey.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
color
subtle.neutral.activefrom default{global.text.on-base.neutral.primary}Details
- Resolves through
light-switch.base.950 rawneutral.light.ash.950 raw- Value
-
#0E0D0Ddark:#D2CECF - CSS
--button-label-color-subtle-neutral-active- Token
button.label.color.subtle.neutral.active- Decisions
-
- The label of subtle and ghost neutral buttons is the primary text color, global.text.on-base.neutral.primary, in every state and in both modes, as in the Figma prototype; it was global.text.on-subtle.neutral.default, a softer grey.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
color
subtle.brand.defaultfrom default{global.text.on-subtle.brand.default}Details
- Resolves through
brand.light.700 raw- Value
-
#1148A9dark:#9EE7FA - CSS
--button-label-color-subtle-brand-default- Token
button.label.color.subtle.brand.default- Decisions
-
- At rest, a ghost brand button, which has no fill and sits on the surface, takes the brand text of the surface, global.text.on-base.brand.default, as in the Figma prototype; on hover and press, when its tint appears, it takes global.text.on-subtle.brand.default as before.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
color
subtle.brand.hoverfrom default{global.text.on-subtle.brand.default}Details
- Resolves through
brand.light.700 raw- Value
-
#1148A9dark:#9EE7FA - CSS
--button-label-color-subtle-brand-hover- Token
button.label.color.subtle.brand.hover- Decisions
-
- At rest, a ghost brand button, which has no fill and sits on the surface, takes the brand text of the surface, global.text.on-base.brand.default, as in the Figma prototype; on hover and press, when its tint appears, it takes global.text.on-subtle.brand.default as before.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
color
subtle.brand.activefrom default{global.text.on-subtle.brand.default}Details
- Resolves through
brand.light.700 raw- Value
-
#1148A9dark:#9EE7FA - CSS
--button-label-color-subtle-brand-active- Token
button.label.color.subtle.brand.active- Decisions
-
- At rest, a ghost brand button, which has no fill and sits on the surface, takes the brand text of the surface, global.text.on-base.brand.default, as in the Figma prototype; on hover and press, when its tint appears, it takes global.text.on-subtle.brand.default as before.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
color
subtle.error.defaultfrom default{global.text.on-subtle.functional.error.default}Details
- Resolves through
functional.error.600 raw- Value
-
#C01619dark:#FAA79D - CSS
--button-label-color-subtle-error-default- Token
button.label.color.subtle.error.default- Decisions
-
- The label of subtle and ghost error buttons keeps the Figma library's error text, global.text.on-subtle.functional.error.default, in every state. The Figma prototype uses #940e11 (raw functional.error.700) on subtle error buttons and on ghost error buttons on hover and press; no text token carries it, and the system adds no semantic token for it for now. The label stays under 4.5:1 on the subtle error hover and press fills and the ghost error press fill in light mode, tracked as a known issue (decision figma-library-colors).
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
color
subtle.error.hoverfrom default{global.text.on-subtle.functional.error.default}Details
- Resolves through
functional.error.600 raw- Value
-
#C01619dark:#FAA79D - CSS
--button-label-color-subtle-error-hover- Token
button.label.color.subtle.error.hover- Decisions
-
- The label of subtle and ghost error buttons keeps the Figma library's error text, global.text.on-subtle.functional.error.default, in every state. The Figma prototype uses #940e11 (raw functional.error.700) on subtle error buttons and on ghost error buttons on hover and press; no text token carries it, and the system adds no semantic token for it for now. The label stays under 4.5:1 on the subtle error hover and press fills and the ghost error press fill in light mode, tracked as a known issue (decision figma-library-colors).
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
color
subtle.error.activefrom default{global.text.on-subtle.functional.error.default}Details
- Resolves through
functional.error.600 raw- Value
-
#C01619dark:#FAA79D - CSS
--button-label-color-subtle-error-active- Token
button.label.color.subtle.error.active- Decisions
-
- The label of subtle and ghost error buttons keeps the Figma library's error text, global.text.on-subtle.functional.error.default, in every state. The Figma prototype uses #940e11 (raw functional.error.700) on subtle error buttons and on ghost error buttons on hover and press; no text token carries it, and the system adds no semantic token for it for now. The label stays under 4.5:1 on the subtle error hover and press fills and the ghost error press fill in light mode, tracked as a known issue (decision figma-library-colors).
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
color
subtle.disabledfrom default{global.text.state.disabled.default}Details
- Resolves through
light-switch.base.500 rawneutral.light.ash.500 raw- Value
-
#8C8C8Cdark:#9D9B9Cb2 - CSS
--button-label-color-subtle-disabled- Token
button.label.color.subtle.disabled- Decisions
-
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
color
ghost.neutral.defaultfrom default{global.text.on-base.neutral.primary}Details
- Resolves through
light-switch.base.950 rawneutral.light.ash.950 raw- Value
-
#0E0D0Ddark:#D2CECF - CSS
--button-label-color-ghost-neutral-default- Token
button.label.color.ghost.neutral.default- Decisions
-
- The label of subtle and ghost neutral buttons is the primary text color, global.text.on-base.neutral.primary, in every state and in both modes, as in the Figma prototype; it was global.text.on-subtle.neutral.default, a softer grey.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
color
ghost.neutral.hoverfrom default{global.text.on-base.neutral.primary}Details
- Resolves through
light-switch.base.950 rawneutral.light.ash.950 raw- Value
-
#0E0D0Ddark:#D2CECF - CSS
--button-label-color-ghost-neutral-hover- Token
button.label.color.ghost.neutral.hover- Decisions
-
- The label of subtle and ghost neutral buttons is the primary text color, global.text.on-base.neutral.primary, in every state and in both modes, as in the Figma prototype; it was global.text.on-subtle.neutral.default, a softer grey.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
color
ghost.neutral.activefrom default{global.text.on-base.neutral.primary}Details
- Resolves through
light-switch.base.950 rawneutral.light.ash.950 raw- Value
-
#0E0D0Ddark:#D2CECF - CSS
--button-label-color-ghost-neutral-active- Token
button.label.color.ghost.neutral.active- Decisions
-
- The label of subtle and ghost neutral buttons is the primary text color, global.text.on-base.neutral.primary, in every state and in both modes, as in the Figma prototype; it was global.text.on-subtle.neutral.default, a softer grey.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
color
ghost.brand.defaultfrom default{global.text.on-base.brand.default}Details
- Resolves through
brand.light.600 raw- Value
-
#175DD6dark:#9EE7FA - CSS
--button-label-color-ghost-brand-default- Token
button.label.color.ghost.brand.default- Decisions
-
- At rest, a ghost brand button, which has no fill and sits on the surface, takes the brand text of the surface, global.text.on-base.brand.default, as in the Figma prototype; on hover and press, when its tint appears, it takes global.text.on-subtle.brand.default as before.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
color
ghost.brand.hoverfrom default{global.text.on-subtle.brand.default}Details
- Resolves through
brand.light.700 raw- Value
-
#1148A9dark:#9EE7FA - CSS
--button-label-color-ghost-brand-hover- Token
button.label.color.ghost.brand.hover- Decisions
-
- At rest, a ghost brand button, which has no fill and sits on the surface, takes the brand text of the surface, global.text.on-base.brand.default, as in the Figma prototype; on hover and press, when its tint appears, it takes global.text.on-subtle.brand.default as before.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
color
ghost.brand.activefrom default{global.text.on-subtle.brand.default}Details
- Resolves through
brand.light.700 raw- Value
-
#1148A9dark:#9EE7FA - CSS
--button-label-color-ghost-brand-active- Token
button.label.color.ghost.brand.active- Decisions
-
- At rest, a ghost brand button, which has no fill and sits on the surface, takes the brand text of the surface, global.text.on-base.brand.default, as in the Figma prototype; on hover and press, when its tint appears, it takes global.text.on-subtle.brand.default as before.
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
color
ghost.error.defaultfrom default{global.text.on-subtle.functional.error.default}Details
- Resolves through
functional.error.600 raw- Value
-
#C01619dark:#FAA79D - CSS
--button-label-color-ghost-error-default- Token
button.label.color.ghost.error.default- Decisions
-
- The label of subtle and ghost error buttons keeps the Figma library's error text, global.text.on-subtle.functional.error.default, in every state. The Figma prototype uses #940e11 (raw functional.error.700) on subtle error buttons and on ghost error buttons on hover and press; no text token carries it, and the system adds no semantic token for it for now. The label stays under 4.5:1 on the subtle error hover and press fills and the ghost error press fill in light mode, tracked as a known issue (decision figma-library-colors).
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
color
ghost.error.hoverfrom default{global.text.on-subtle.functional.error.default}Details
- Resolves through
functional.error.600 raw- Value
-
#C01619dark:#FAA79D - CSS
--button-label-color-ghost-error-hover- Token
button.label.color.ghost.error.hover- Decisions
-
- The label of subtle and ghost error buttons keeps the Figma library's error text, global.text.on-subtle.functional.error.default, in every state. The Figma prototype uses #940e11 (raw functional.error.700) on subtle error buttons and on ghost error buttons on hover and press; no text token carries it, and the system adds no semantic token for it for now. The label stays under 4.5:1 on the subtle error hover and press fills and the ghost error press fill in light mode, tracked as a known issue (decision figma-library-colors).
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
color
ghost.error.activefrom default{global.text.on-subtle.functional.error.default}Details
- Resolves through
functional.error.600 raw- Value
-
#C01619dark:#FAA79D - CSS
--button-label-color-ghost-error-active- Token
button.label.color.ghost.error.active- Decisions
-
- The label of subtle and ghost error buttons keeps the Figma library's error text, global.text.on-subtle.functional.error.default, in every state. The Figma prototype uses #940e11 (raw functional.error.700) on subtle error buttons and on ghost error buttons on hover and press; no text token carries it, and the system adds no semantic token for it for now. The label stays under 4.5:1 on the subtle error hover and press fills and the ghost error press fill in light mode, tracked as a known issue (decision figma-library-colors).
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The intent property states the kind of action: neutral, brand or error. Each intent reads one color family of the mapped roles: neutral, brand and functional.error.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
color
ghost.disabledfrom default{global.text.state.disabled.default}Details
- Resolves through
light-switch.base.500 rawneutral.light.ash.500 raw- Value
-
#8C8C8Cdark:#9D9B9Cb2 - CSS
--button-label-color-ghost-disabled- Token
button.label.color.ghost.disabled- Decisions
-
- The button exists in every color mode of the system, light and dark, and takes the colors of the mode of its context. Every color aliases the Figma library's mapped roles as they are, in both modes: fills global.bg.<emphasis>.<family>.<state>, borders global.border.<emphasis>.<family>.<state>, label text global.text.on-<emphasis>.<family>, disabled global.*.state.disabled.default; a ghost button reads the subtle text colors. Where the Figma library's error colors fall under WCAG 2.2 AA, the gap is kept and tracked, not corrected in the button.
- The emphasis property sets the visual weight: accent, subtle or ghost.
-
typography
xsmallfrom defaultDetails
- Value
-
Inter [object Object]/1 500 [object Object] - CSS
--button-label-typography-xsmall-font-family- Token
button.label.typography.xsmall- Decisions
-
- The label has the negative letter spacing of the Figma prototype: -2 % of the text size at extra small and small, -3 % at medium and large, carried by font.letter-spacing.tight.xs / sm / md / md (-0.24 / -0.28 / -0.48 / -0.48 px). The Button is the only component that uses it.
- The label line height is 1 (font.line-height.compact), as in the Figma prototype, at every size. At the default text size the minimum height still sets the height; with larger text, a button without an icon grows less than with 1.2.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The size property offers four sizes: xsmall, small, medium and large.
-
typography
smallfrom defaultDetails
- Value
-
Inter [object Object]/1 500 [object Object] - CSS
--button-label-typography-small-font-family- Token
button.label.typography.small- Decisions
-
- The label has the negative letter spacing of the Figma prototype: -2 % of the text size at extra small and small, -3 % at medium and large, carried by font.letter-spacing.tight.xs / sm / md / md (-0.24 / -0.28 / -0.48 / -0.48 px). The Button is the only component that uses it.
- The label line height is 1 (font.line-height.compact), as in the Figma prototype, at every size. At the default text size the minimum height still sets the height; with larger text, a button without an icon grows less than with 1.2.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The size property offers four sizes: xsmall, small, medium and large.
-
typography
mediumfrom defaultDetails
- Value
-
Inter [object Object]/1 500 [object Object] - CSS
--button-label-typography-medium-font-family- Token
button.label.typography.medium- Decisions
-
- The label has the negative letter spacing of the Figma prototype: -2 % of the text size at extra small and small, -3 % at medium and large, carried by font.letter-spacing.tight.xs / sm / md / md (-0.24 / -0.28 / -0.48 / -0.48 px). The Button is the only component that uses it.
- The label line height is 1 (font.line-height.compact), as in the Figma prototype, at every size. At the default text size the minimum height still sets the height; with larger text, a button without an icon grows less than with 1.2.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The size property offers four sizes: xsmall, small, medium and large.
-
typography
largefrom defaultDetails
- Value
-
Inter [object Object]/1 500 [object Object] - CSS
--button-label-typography-large-font-family- Token
button.label.typography.large- Decisions
-
- The label has the negative letter spacing of the Figma prototype: -2 % of the text size at extra small and small, -3 % at medium and large, carried by font.letter-spacing.tight.xs / sm / md / md (-0.24 / -0.28 / -0.48 / -0.48 px). The Button is the only component that uses it.
- The label line height is 1 (font.line-height.compact), as in the Figma prototype, at every size. At the default text size the minimum height still sets the height; with larger text, a button without an icon grows less than with 1.2.
- The large button label is 16 px (body.size.md), as in the Figma prototype, the same size as medium: large differs from medium by its height, padding and corners. Label sizes are body.size.xs / sm / md / md, extra small to large.
- The minimum height follows the Figma prototype from small up and keeps 24 px at extra small: space.24 / 28 / 36 / 44, extra small to large. Every other size, spacing, radius, border, type, icon and motion value is unchanged and comes straight from the Figma library's scales and the design system's additions: the corner radius follows the size (corner-radius.2xs, 2 px, at extra small and small; corner-radius.xs, 4 px, at medium and large); the border is stroke-width.sm (0.6 px) at every size, emphasis and intent; padding space.6 / 8 / 12 / 16, icon size.2 / 2 / 3 / 4 and label body.size.xs / sm / md / lg at medium weight, extra small to large; icons are Material Symbols Outlined glyphs (font.icon.*: fill off, weight 300, grade 0, optical size 20); state transitions take duration.fast and easing.standard.
- The size property offers four sizes: xsmall, small, medium and large.
<button
type="button"
class="ds-button"
data-emphasis="accent"
data-intent="neutral"
data-size="medium"
>
<span class="ds-button__label" data-part="label">Save changes</span>
</button>