---
url: /components/split-button/specs.md
description: >-
  Split buttons combine a primary action with a secondary action in a single
  component.
---

# Split buttons

Split buttons combine a primary action with a secondary action in a single component.

[Overview](overview.md) · **Specs** · [Guidelines](guidelines.md) · [Accessibility](accessibility.md)

## Variants

![1 type of split button.](/assets/c42c7d0c-ma3o4mdr-1-3p.BrqhBK1Z.webp)

<br>

| Variant      |  M3 | M3 Expressive |
| ------------ | :-: | :-----------: |
| Split button |  -- |   Available   |

## Configurations

![4 colors and 5 sizes of split buttons.](/assets/f70cb553-ma3o55u8-2-3p.BrrZtFih.webp)

1. Color configurations: Elevated, filled, tonal, outlined
2. Size configurations: XS, S, M, L, XL

| Category | Configuration                     |  M3 | M3 Expressive |
| -------- | --------------------------------- | :-: | :-----------: |
| Size     | XS, S, M, L, XL                   |  -- |   Available   |
| Color    | Elevated, filled, tonal, outlined |  -- |   Available   |

## Tokens & specs

Use the table's menu to select a token set. Split button token sets are organized by size. [Learn about design tokens](../../foundations/design-tokens/overview.md)

::: token-table token-table-624e8f2da4007fc8-47d9767d
**Split buttons tokens** · 5 token sets · 61 tokens · [live token table](https://m3.material.io/components/split-button/specs) · DSDB `TOKEN_TABLE.624e8f2da4007fc8`

* Default context: Theme: Light · Platform: Android · Audience: 3P · Contrast: Default · iOS dark theme elevation: None · iOS weight setting: Default
* Not configurable here (group default used): Motion scheme: Standard · Font: Static · Language height: Small
* Other contexts: Theme: Dark · Platform: Web, Compose · Contrast: Medium contrast, High contrast. "Other contexts" lists values that differ from the default when only that one context changes.
* Reference chain: aliases from the token to its source value (`token → alias → … → value`). "—" means the token holds a literal value.

**Split button - Size - Xsmall** · `md.comp.split-button.xsmall` · 13 tokens

For XS split buttons.

| Group | Token | Type | Reference chain | Resolved value | Other contexts |
| --- | --- | --- | --- | --- | --- |
| All tokens | `md.comp.split-button.xsmall.container.height` | Length | — | `32dp` | — |
| All tokens | `md.comp.split-button.xsmall.between-space` | Length | `md.sys.measurement.space25` | `2dp` | — |
| All tokens | `md.comp.split-button.xsmall.container.shape` | Shape | `md.sys.shape.corner.full` | `Circular (fully rounded)` | — |
| All tokens | `md.comp.split-button.xsmall.inner-corner.corner-size` | Shape | `md.sys.shape.corner-value.extra-small` | `4dp` | — |
| All tokens | `md.comp.split-button.xsmall.outer-corner.corner-size` | Length | — | `50%` | — |
| All tokens | `md.comp.split-button.xsmall.leading-button.leading-space` | Length | `md.sys.measurement.space150` | `12dp` | — |
| All tokens | `md.comp.split-button.xsmall.leading-button.trailing-space` | Length | `md.sys.measurement.space125` | `10dp` | — |
| All tokens | `md.comp.split-button.xsmall.trailing-button.icon.size` | Length | — | `22dp` | — |
| All tokens | `md.comp.split-button.xsmall.trailing-button.leading-space` | Length | — | `13dp` | — |
| All tokens | `md.comp.split-button.xsmall.trailing-button.trailing-space` | Length | — | `13dp` | — |
| All tokens | `md.comp.split-button.xsmall.inner-corner.hovered.corner-size` | Shape | `md.sys.shape.corner-value.small` | `8dp` | — |
| All tokens | `md.comp.split-button.xsmall.inner-corner.pressed.corner-size` | Shape | `md.sys.shape.corner-value.small` | `8dp` | — |
| All tokens | `md.comp.split-button.xsmall.trailing-button.inner-corner.selected.corner-size` | Length | — | `50%` | — |

**Split button - Size - Small** · `md.comp.split-button.small` · 12 tokens

For small split buttons.

| Group | Token | Type | Reference chain | Resolved value | Other contexts |
| --- | --- | --- | --- | --- | --- |
| All tokens | `md.comp.split-button.small.container.height` | Length | — | `40dp` | — |
| All tokens | `md.comp.split-button.small.between-space` | Length | `md.sys.measurement.space25` | `2dp` | — |
| All tokens | `md.comp.split-button.small.container.shape` | Shape | `md.sys.shape.corner.full` | `Circular (fully rounded)` | — |
| All tokens | `md.comp.split-button.small.inner-corner.corner-size` | Shape | `md.sys.shape.corner-value.extra-small` | `4dp` | — |
| All tokens | `md.comp.split-button.small.leading-button.leading-space` | Length | `md.sys.measurement.space200` | `16dp` | — |
| All tokens | `md.comp.split-button.small.leading-button.trailing-space` | Length | `md.sys.measurement.space150` | `12dp` | — |
| All tokens | `md.comp.split-button.small.trailing-button.icon.size` | Length | — | `22dp` | — |
| All tokens | `md.comp.split-button.small.trailing-button.leading-space` | Length | — | `13dp` | — |
| All tokens | `md.comp.split-button.small.trailing-button.trailing-space` | Length | — | `13dp` | — |
| All tokens | `md.comp.split-button.small.inner-corner.hovered.corner-size` | Shape | `md.sys.shape.corner-value.medium` | `12dp` | — |
| All tokens | `md.comp.split-button.small.inner-corner.pressed.corner-size` | Shape | `md.sys.shape.corner-value.medium` | `12dp` | — |
| All tokens | `md.comp.split-button.small.trailing-button.inner-corner.selected.corner-size` | Length | — | `50%` | — |

**Split button - Size - Medium** · `md.comp.split-button.medium` · 12 tokens

For medium split buttons.

| Group | Token | Type | Reference chain | Resolved value | Other contexts |
| --- | --- | --- | --- | --- | --- |
| All tokens | `md.comp.split-button.medium.container.height` | Length | — | `56dp` | — |
| All tokens | `md.comp.split-button.medium.between-space` | Length | `md.sys.measurement.space25` | `2dp` | — |
| All tokens | `md.comp.split-button.medium.container.shape` | Shape | `md.sys.shape.corner.full` | `Circular (fully rounded)` | — |
| All tokens | `md.comp.split-button.medium.inner-corner.corner-size` | Shape | `md.sys.shape.corner-value.extra-small` | `4dp` | — |
| All tokens | `md.comp.split-button.medium.leading-button.leading-space` | Length | `md.sys.measurement.space300` | `24dp` | — |
| All tokens | `md.comp.split-button.medium.leading-button.trailing-space` | Length | `md.sys.measurement.space300` | `24dp` | — |
| All tokens | `md.comp.split-button.medium.trailing-button.icon.size` | Length | — | `26dp` | — |
| All tokens | `md.comp.split-button.medium.trailing-button.leading-space` | Length | — | `15dp` | — |
| All tokens | `md.comp.split-button.medium.trailing-button.trailing-space` | Length | — | `15dp` | — |
| All tokens | `md.comp.split-button.medium.inner-corner.hovered.corner-size` | Shape | `md.sys.shape.corner-value.medium` | `12dp` | — |
| All tokens | `md.comp.split-button.medium.inner-corner.pressed.corner-size` | Shape | `md.sys.shape.corner-value.medium` | `12dp` | — |
| All tokens | `md.comp.split-button.medium.trailing-button.inner-corner.selected.corner-size` | Length | — | `50%` | — |

**Split button - Size - Large** · `md.comp.split-button.large` · 12 tokens

For large split buttons.

| Group | Token | Type | Reference chain | Resolved value | Other contexts |
| --- | --- | --- | --- | --- | --- |
| All tokens | `md.comp.split-button.large.container.height` | Length | — | `96dp` | — |
| All tokens | `md.comp.split-button.large.between-space` | Length | `md.sys.measurement.space25` | `2dp` | — |
| All tokens | `md.comp.split-button.large.container.shape` | Shape | `md.sys.shape.corner.full` | `Circular (fully rounded)` | — |
| All tokens | `md.comp.split-button.large.inner-corner.corner-size` | Shape | `md.sys.shape.corner-value.small` | `8dp` | — |
| All tokens | `md.comp.split-button.large.leading-button.leading-space` | Length | `md.sys.measurement.space600` | `48dp` | — |
| All tokens | `md.comp.split-button.large.leading-button.trailing-space` | Length | `md.sys.measurement.space600` | `48dp` | — |
| All tokens | `md.comp.split-button.large.trailing-button.icon.size` | Length | — | `38dp` | — |
| All tokens | `md.comp.split-button.large.trailing-button.leading-space` | Length | — | `29dp` | — |
| All tokens | `md.comp.split-button.large.trailing-button.trailing-space` | Length | — | `29dp` | — |
| All tokens | `md.comp.split-button.large.inner-corner.hovered.corner-size` | Shape | `md.sys.shape.corner-value.large-increased` | `20dp` | — |
| All tokens | `md.comp.split-button.large.inner-corner.pressed.corner-size` | Shape | `md.sys.shape.corner-value.large-increased` | `20dp` | — |
| All tokens | `md.comp.split-button.large.trailing-button.inner-corner.selected.corner-size` | Length | — | `50%` | — |

**Split button - Size - Xlarge** · `md.comp.split-button.xlarge` · 12 tokens

For XL split buttons.

| Group | Token | Type | Reference chain | Resolved value | Other contexts |
| --- | --- | --- | --- | --- | --- |
| All tokens | `md.comp.split-button.xlarge.container.height` | Length | — | `136dp` | — |
| All tokens | `md.comp.split-button.xlarge.between-space` | Length | `md.sys.measurement.space25` | `2dp` | — |
| All tokens | `md.comp.split-button.xlarge.container.shape` | Shape | `md.sys.shape.corner.full` | `Circular (fully rounded)` | — |
| All tokens | `md.comp.split-button.xlarge.inner-corner.corner-size` | Shape | `md.sys.shape.corner-value.medium` | `12dp` | — |
| All tokens | `md.comp.split-button.xlarge.leading-button.leading-space` | Length | `md.sys.measurement.space800` | `64dp` | — |
| All tokens | `md.comp.split-button.xlarge.leading-button.trailing-space` | Length | `md.sys.measurement.space800` | `64dp` | — |
| All tokens | `md.comp.split-button.xlarge.trailing-button.icon.size` | Length | — | `50dp` | — |
| All tokens | `md.comp.split-button.xlarge.trailing-button.leading-space` | Length | — | `43dp` | — |
| All tokens | `md.comp.split-button.xlarge.trailing-button.trailing-space` | Length | — | `43dp` | — |
| All tokens | `md.comp.split-button.xlarge.inner-corner.hovered.corner-size` | Shape | `md.sys.shape.corner-value.large-increased` | `20dp` | — |
| All tokens | `md.comp.split-button.xlarge.inner-corner.pressed.corner-size` | Shape | `md.sys.shape.corner-value.large-increased` | `20dp` | — |
| All tokens | `md.comp.split-button.xlarge.trailing-button.inner-corner.selected.corner-size` | Length | — | `50%` | — |
:::

## Anatomy

![4 elements of a split button.](/assets/8671ab02-ma3o642r-3-3p.C1At8F0x.webp)

1. Leading button
2. Icon
3. Label text
4. Trailing button

The leading button in split buttons can have an icon, label text, or both. The trailing button should always have a menu icon.

![3 customizations of the leading button in the split button.](/assets/1b013616-ma3o6fum-4-3p.553t232X.webp)

1. Label + icon
2. Label
3. Icon

## Color

Color values are implemented through [design tokens](../../foundations/design-tokens/overview.md "Design tokens are the building blocks of all UI elements. The same tokens are used in designs, tools, and code."). For designers, this means working with color values that correspond with tokens; in implementation, a color value will be a token that references a value.

Split buttons use the same color schemes as standard [buttons](../buttons/overview.md "Buttons let people take action and make choices with one tap."). However, unlike toggle buttons, the split button color doesn’t change when selected—only a state layer is applied.

Split buttons use the same colors and state layers as buttons, shown in the following token module. [Go to buttons](../buttons/overview.md) for more details.

![4 color roles of the split button when unselected and selected in light and dark theme.](/assets/5836a427-ma3oa90h-5-3p.CK5vQhBb.webp)

A: Unselected, B: Selected trailing icon<br>

1. Elevated
2. Filled
3. Tonal
4. Outlined

::: token-table token-table-624e8f2da4007fc8-517d3c76
**Split buttons tokens** · 4 token sets · 205 tokens · [live token table](https://m3.material.io/components/split-button/specs) · DSDB `TOKEN_TABLE.624e8f2da4007fc8`

* Default context: Theme: Light · Platform: Android · Audience: 3P · Contrast: Default · iOS dark theme elevation: None · iOS weight setting: Default
* Not configurable here (group default used): Motion scheme: Standard · Font: Static · Language height: Small
* Other contexts: Theme: Dark · Contrast: Medium contrast, High contrast. "Other contexts" lists values that differ from the default when only that one context changes.
* Reference chain: aliases from the token to its source value (`token → alias → … → value`). "—" means the token holds a literal value.

**Button - Color - Elevated** · `md.comp.button.elevated` · 51 tokens

For elevated buttons.

| Group | Token | Type | Reference chain | Resolved value | Other contexts |
| --- | --- | --- | --- | --- | --- |
| Enabled | `md.comp.button.elevated.unselected.container.color` | Color | `md.sys.color.surface-container-low` → `md.ref.palette.neutral96` | `#F7F2FA` | Dark: `#1D1B20` via `md.ref.palette.neutral10` |
| Enabled | `md.comp.button.elevated.selected.container.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Enabled | `md.comp.button.elevated.container.shadow-color` | Color | `md.sys.color.shadow` → `md.ref.palette.neutral0` | `#000000` | — |
| Enabled | `md.comp.button.elevated.container.elevation` | Elevation | `md.sys.elevation.level1` | `1dp` | — |
| Enabled | `md.comp.button.elevated.label-text.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Enabled | `md.comp.button.elevated.unselected.label-text.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Enabled | `md.comp.button.elevated.selected.label-text.color` | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` |
| Enabled | `md.comp.button.elevated.icon.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Enabled | `md.comp.button.elevated.unselected.icon.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Enabled | `md.comp.button.elevated.selected.icon.color` | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` |
| Enabled | `md.comp.button.elevated.container.color` | Color | `md.sys.color.surface-container-low` → `md.ref.palette.neutral96` | `#F7F2FA` | Dark: `#1D1B20` via `md.ref.palette.neutral10` |
| Disabled | `md.comp.button.elevated.disabled.container.opacity` | Opacity | — | `0.1` | — |
| Disabled | `md.comp.button.elevated.disabled.container.elevation` | Elevation | `md.sys.elevation.level0` | `0dp` | — |
| Disabled | `md.comp.button.elevated.disabled.label-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Disabled | `md.comp.button.elevated.disabled.label-text.opacity` | Opacity | — | `0.38` | — |
| Disabled | `md.comp.button.elevated.disabled.icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Disabled | `md.comp.button.elevated.disabled.icon.opacity` | Opacity | — | `0.38` | — |
| Disabled | `md.comp.button.elevated.disabled.container.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Hovered | `md.comp.button.elevated.unselected.hovered.state-layer.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Hovered | `md.comp.button.elevated.selected.hovered.state-layer.color` | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` |
| Hovered | `md.comp.button.elevated.hovered.state-layer.opacity` | Opacity | `md.sys.state.hover.state-layer-opacity` | `0.08` | — |
| Hovered | `md.comp.button.elevated.hovered.container.elevation` (deprecated) | Elevation | `md.sys.elevation.level2` | `3dp` | — |
| Hovered | `md.comp.button.elevated.hovered.label-text.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Hovered | `md.comp.button.elevated.unselected.hovered.label-text.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Hovered | `md.comp.button.elevated.selected.hovered.label-text.color` | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` |
| Hovered | `md.comp.button.elevated.hovered.icon.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Hovered | `md.comp.button.elevated.unselected.hovered.icon.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Hovered | `md.comp.button.elevated.selected.hovered.icon.color` | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` |
| Hovered | `md.comp.button.elevated.hovered.state-layer.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Focused | `md.comp.button.elevated.unselected.focused.state-layer.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Focused | `md.comp.button.elevated.selected.focused.state-layer.color` | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` |
| Focused | `md.comp.button.elevated.focused.state-layer.opacity` | Opacity | `md.sys.state.focus.state-layer-opacity` | `0.1` | — |
| Focused | `md.comp.button.elevated.focused.container.elevation` | Elevation | `md.sys.elevation.level1` | `1dp` | — |
| Focused | `md.comp.button.elevated.focused.label-text.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Focused | `md.comp.button.elevated.unselected.focused.label-text.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Focused | `md.comp.button.elevated.selected.focused.label-text.color` | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` |
| Focused | `md.comp.button.elevated.focused.icon.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Focused | `md.comp.button.elevated.unselected.focused.icon.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Focused | `md.comp.button.elevated.selected.focused.icon.color` | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` |
| Focused | `md.comp.button.elevated.focused.state-layer.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Pressed | `md.comp.button.elevated.unselected.pressed.state-layer.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Pressed | `md.comp.button.elevated.selected.pressed.state-layer.color` | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` |
| Pressed | `md.comp.button.elevated.pressed.state-layer.opacity` | Opacity | `md.sys.state.pressed.state-layer-opacity` | `0.1` | — |
| Pressed | `md.comp.button.elevated.pressed.container.elevation` | Elevation | `md.sys.elevation.level1` | `1dp` | — |
| Pressed | `md.comp.button.elevated.pressed.label-text.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Pressed | `md.comp.button.elevated.unselected.pressed.label-text.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Pressed | `md.comp.button.elevated.selected.pressed.label-text.color` | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` |
| Pressed | `md.comp.button.elevated.pressed.icon.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Pressed | `md.comp.button.elevated.unselected.pressed.icon.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Pressed | `md.comp.button.elevated.selected.pressed.icon.color` | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` |
| Pressed | `md.comp.button.elevated.pressed.state-layer.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |

**Button - Color - Filled** · `md.comp.button.filled` · 51 tokens

For filled buttons.

| Group | Token | Type | Reference chain | Resolved value | Other contexts |
| --- | --- | --- | --- | --- | --- |
| Enabled | `md.comp.button.filled.unselected.container.color` | Color | `md.sys.color.surface-container` → `md.ref.palette.neutral94` | `#F3EDF7` | Dark: `#211F26` via `md.ref.palette.neutral12` |
| Enabled | `md.comp.button.filled.selected.container.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Enabled | `md.comp.button.filled.container.shadow-color` | Color | `md.sys.color.shadow` → `md.ref.palette.neutral0` | `#000000` | — |
| Enabled | `md.comp.button.filled.container.elevation` | Elevation | `md.sys.elevation.level0` | `0dp` | — |
| Enabled | `md.comp.button.filled.label-text.color` | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` |
| Enabled | `md.comp.button.filled.unselected.label-text.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Enabled | `md.comp.button.filled.selected.label-text.color` | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` |
| Enabled | `md.comp.button.filled.icon.color` | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` |
| Enabled | `md.comp.button.filled.unselected.icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Enabled | `md.comp.button.filled.selected.icon.color` | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` |
| Enabled | `md.comp.button.filled.container.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Disabled | `md.comp.button.filled.disabled.container.opacity` | Opacity | — | `0.1` | — |
| Disabled | `md.comp.button.filled.disabled.container.elevation` | Elevation | `md.sys.elevation.level0` | `0dp` | — |
| Disabled | `md.comp.button.filled.disabled.label-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Disabled | `md.comp.button.filled.disabled.label-text.opacity` | Opacity | — | `0.38` | — |
| Disabled | `md.comp.button.filled.disabled.icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Disabled | `md.comp.button.filled.disabled.icon.opacity` | Opacity | — | `0.38` | — |
| Disabled | `md.comp.button.filled.disabled.container.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Hovered | `md.comp.button.filled.unselected.hovered.state-layer.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Hovered | `md.comp.button.filled.selected.hovered.state-layer.color` | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` |
| Hovered | `md.comp.button.filled.hovered.state-layer.opacity` | Opacity | `md.sys.state.hover.state-layer-opacity` | `0.08` | — |
| Hovered | `md.comp.button.filled.hovered.container.elevation` (deprecated) | Elevation | `md.sys.elevation.level1` | `1dp` | — |
| Hovered | `md.comp.button.filled.hovered.label-text.color` | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` |
| Hovered | `md.comp.button.filled.unselected.hovered.label-text.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Hovered | `md.comp.button.filled.selected.hovered.label-text.color` | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` |
| Hovered | `md.comp.button.filled.hovered.icon.color` | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` |
| Hovered | `md.comp.button.filled.unselected.hovered.icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Hovered | `md.comp.button.filled.selected.hovered.icon.color` | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` |
| Hovered | `md.comp.button.filled.hovered.state-layer.color` | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` |
| Focused | `md.comp.button.filled.unselected.focused.state-layer.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Focused | `md.comp.button.filled.selected.focused.state-layer.color` | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` |
| Focused | `md.comp.button.filled.focused.state-layer.opacity` | Opacity | `md.sys.state.focus.state-layer-opacity` | `0.1` | — |
| Focused | `md.comp.button.filled.focused.container.elevation` | Elevation | `md.sys.elevation.level0` | `0dp` | — |
| Focused | `md.comp.button.filled.focused.label-text.color` | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` |
| Focused | `md.comp.button.filled.unselected.focused.label-text.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Focused | `md.comp.button.filled.selected.focused.label-text.color` | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` |
| Focused | `md.comp.button.filled.focused.icon.color` | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` |
| Focused | `md.comp.button.filled.unselected.focused.icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Focused | `md.comp.button.filled.selected.focused.icon.color` | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` |
| Focused | `md.comp.button.filled.focused.state-layer.color` | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` |
| Pressed | `md.comp.button.filled.pressed.state-layer.color` | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` |
| Pressed | `md.comp.button.filled.unselected.pressed.state-layer.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Pressed | `md.comp.button.filled.selected.pressed.state-layer.color` | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` |
| Pressed | `md.comp.button.filled.pressed.state-layer.opacity` | Opacity | `md.sys.state.pressed.state-layer-opacity` | `0.1` | — |
| Pressed | `md.comp.button.filled.pressed.container.elevation` | Elevation | `md.sys.elevation.level0` | `0dp` | — |
| Pressed | `md.comp.button.filled.pressed.label-text.color` | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` |
| Pressed | `md.comp.button.filled.unselected.pressed.label-text.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Pressed | `md.comp.button.filled.selected.pressed.label-text.color` | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` |
| Pressed | `md.comp.button.filled.pressed.icon.color` | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` |
| Pressed | `md.comp.button.filled.unselected.pressed.icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Pressed | `md.comp.button.filled.selected.pressed.icon.color` | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` |

**Button - Color - Tonal** · `md.comp.button.tonal` · 51 tokens

For tonal buttons.

| Group | Token | Type | Reference chain | Resolved value | Other contexts |
| --- | --- | --- | --- | --- | --- |
| Enabled | `md.comp.button.tonal.unselected.container.color` | Color | `md.sys.color.secondary-container` → `md.ref.palette.secondary90` | `#E8DEF8` | Dark: `#4A4458` via `md.ref.palette.secondary30`<br>Medium contrast: `#625B71` via `md.ref.palette.secondary40`<br>High contrast: `#4A4458` via `md.ref.palette.secondary30` |
| Enabled | `md.comp.button.tonal.selected.container.color` | Color | `md.sys.color.secondary` → `md.ref.palette.secondary40` | `#625B71` | Dark: `#CCC2DC` via `md.ref.palette.secondary80`<br>Medium contrast: `#4A4458` via `md.ref.palette.secondary30`<br>High contrast: `#332D41` via `md.ref.palette.secondary20` |
| Enabled | `md.comp.button.tonal.container.shadow-color` | Color | `md.sys.color.shadow` → `md.ref.palette.neutral0` | `#000000` | — |
| Enabled | `md.comp.button.tonal.container.elevation` | Elevation | `md.sys.elevation.level0` | `0dp` | — |
| Enabled | `md.comp.button.tonal.label-text.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Enabled | `md.comp.button.tonal.unselected.label-text.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Enabled | `md.comp.button.tonal.selected.label-text.color` | Color | `md.sys.color.on-secondary` → `md.ref.palette.secondary100` | `#FFFFFF` | Dark: `#332D41` via `md.ref.palette.secondary20` |
| Enabled | `md.comp.button.tonal.icon.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Enabled | `md.comp.button.tonal.unselected.icon.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Enabled | `md.comp.button.tonal.selected.icon.color` | Color | `md.sys.color.on-secondary` → `md.ref.palette.secondary100` | `#FFFFFF` | Dark: `#332D41` via `md.ref.palette.secondary20` |
| Enabled | `md.comp.button.tonal.container.color` | Color | `md.sys.color.secondary-container` → `md.ref.palette.secondary90` | `#E8DEF8` | Dark: `#4A4458` via `md.ref.palette.secondary30`<br>Medium contrast: `#625B71` via `md.ref.palette.secondary40`<br>High contrast: `#4A4458` via `md.ref.palette.secondary30` |
| Disabled | `md.comp.button.tonal.disabled.container.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Disabled | `md.comp.button.tonal.disabled.container.opacity` | Opacity | — | `0.1` | — |
| Disabled | `md.comp.button.tonal.disabled.container.elevation` | Elevation | `md.sys.elevation.level0` | `0dp` | — |
| Disabled | `md.comp.button.tonal.disabled.label-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Disabled | `md.comp.button.tonal.disabled.label-text.opacity` | Opacity | — | `0.38` | — |
| Disabled | `md.comp.button.tonal.disabled.icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Disabled | `md.comp.button.tonal.disabled.icon.opacity` | Opacity | — | `0.38` | — |
| Hovered | `md.comp.button.tonal.unselected.hovered.state-layer.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Hovered | `md.comp.button.tonal.selected.hovered.state-layer.color` | Color | `md.sys.color.on-secondary` → `md.ref.palette.secondary100` | `#FFFFFF` | Dark: `#332D41` via `md.ref.palette.secondary20` |
| Hovered | `md.comp.button.tonal.hovered.state-layer.opacity` | Opacity | `md.sys.state.hover.state-layer-opacity` | `0.08` | — |
| Hovered | `md.comp.button.tonal.hovered.container.elevation` (deprecated) | Elevation | `md.sys.elevation.level1` | `1dp` | — |
| Hovered | `md.comp.button.tonal.hovered.label-text.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Hovered | `md.comp.button.tonal.unselected.hovered.label-text.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Hovered | `md.comp.button.tonal.selected.hovered.label-text.color` | Color | `md.sys.color.on-secondary` → `md.ref.palette.secondary100` | `#FFFFFF` | Dark: `#332D41` via `md.ref.palette.secondary20` |
| Hovered | `md.comp.button.tonal.hovered.icon.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Hovered | `md.comp.button.tonal.unselected.hovered.icon.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Hovered | `md.comp.button.tonal.selected.hovered.icon.color` | Color | `md.sys.color.on-secondary` → `md.ref.palette.secondary100` | `#FFFFFF` | Dark: `#332D41` via `md.ref.palette.secondary20` |
| Hovered | `md.comp.button.tonal.hovered.state-layer.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Focused | `md.comp.button.tonal.unselected.focused.state-layer.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Focused | `md.comp.button.tonal.selected.focused.state-layer.color` | Color | `md.sys.color.on-secondary` → `md.ref.palette.secondary100` | `#FFFFFF` | Dark: `#332D41` via `md.ref.palette.secondary20` |
| Focused | `md.comp.button.tonal.focused.state-layer.opacity` | Opacity | `md.sys.state.focus.state-layer-opacity` | `0.1` | — |
| Focused | `md.comp.button.tonal.focused.container.elevation` | Elevation | `md.sys.elevation.level0` | `0dp` | — |
| Focused | `md.comp.button.tonal.focused.label-text.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Focused | `md.comp.button.tonal.unselected.focused.label-text.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Focused | `md.comp.button.tonal.selected.focused.label-text.color` | Color | `md.sys.color.on-secondary` → `md.ref.palette.secondary100` | `#FFFFFF` | Dark: `#332D41` via `md.ref.palette.secondary20` |
| Focused | `md.comp.button.tonal.focused.icon.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Focused | `md.comp.button.tonal.unselected.focused.icon.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Focused | `md.comp.button.tonal.selected.focused.icon.color` | Color | `md.sys.color.on-secondary` → `md.ref.palette.secondary100` | `#FFFFFF` | Dark: `#332D41` via `md.ref.palette.secondary20` |
| Focused | `md.comp.button.tonal.focused.state-layer.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Pressed | `md.comp.button.tonal.unselected.pressed.state-layer.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Pressed | `md.comp.button.tonal.selected.pressed.state-layer.color` | Color | `md.sys.color.on-secondary` → `md.ref.palette.secondary100` | `#FFFFFF` | Dark: `#332D41` via `md.ref.palette.secondary20` |
| Pressed | `md.comp.button.tonal.pressed.state-layer.opacity` | Opacity | `md.sys.state.pressed.state-layer-opacity` | `0.1` | — |
| Pressed | `md.comp.button.tonal.pressed.container.elevation` | Elevation | `md.sys.elevation.level0` | `0dp` | — |
| Pressed | `md.comp.button.tonal.pressed.label-text.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Pressed | `md.comp.button.tonal.unselected.pressed.label-text.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Pressed | `md.comp.button.tonal.selected.pressed.label-text.color` | Color | `md.sys.color.on-secondary` → `md.ref.palette.secondary100` | `#FFFFFF` | Dark: `#332D41` via `md.ref.palette.secondary20` |
| Pressed | `md.comp.button.tonal.pressed.icon.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Pressed | `md.comp.button.tonal.unselected.pressed.icon.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Pressed | `md.comp.button.tonal.selected.pressed.icon.color` | Color | `md.sys.color.on-secondary` → `md.ref.palette.secondary100` | `#FFFFFF` | Dark: `#332D41` via `md.ref.palette.secondary20` |
| Pressed | `md.comp.button.tonal.pressed.state-layer.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |

**Button - Color - Outlined** · `md.comp.button.outlined` · 52 tokens

For outlined buttons.

| Group | Token | Type | Reference chain | Resolved value | Other contexts |
| --- | --- | --- | --- | --- | --- |
| Enabled | `md.comp.button.outlined.selected.container.color` | Color | `md.sys.color.inverse-surface` → `md.ref.palette.neutral20` | `#322F35` | Dark: `#E6E0E9` via `md.ref.palette.neutral90` |
| Enabled | `md.comp.button.outlined.label-text.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Enabled | `md.comp.button.outlined.unselected.label-text.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Enabled | `md.comp.button.outlined.selected.label-text.color` | Color | `md.sys.color.inverse-on-surface` → `md.ref.palette.neutral95` | `#F5EFF7` | Dark: `#322F35` via `md.ref.palette.neutral20`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`<br>High contrast: `#FFFFFF` via `md.ref.palette.neutral100` |
| Enabled | `md.comp.button.outlined.icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Enabled | `md.comp.button.outlined.unselected.icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Enabled | `md.comp.button.outlined.selected.icon.color` | Color | `md.sys.color.inverse-on-surface` → `md.ref.palette.neutral95` | `#F5EFF7` | Dark: `#322F35` via `md.ref.palette.neutral20`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`<br>High contrast: `#FFFFFF` via `md.ref.palette.neutral100` |
| Enabled | `md.comp.button.outlined.outline.color` | Color | `md.sys.color.outline-variant` → `md.ref.palette.neutral-variant80` | `#CAC4D0` | Dark: `#49454F` via `md.ref.palette.neutral-variant30`<br>Medium contrast: `#79747E` via `md.ref.palette.neutral-variant50`<br>High contrast: `#49454F` via `md.ref.palette.neutral-variant30` |
| Disabled | `md.comp.button.outlined.unselected.disabled.outline.color` | Color | `md.sys.color.outline-variant` → `md.ref.palette.neutral-variant80` | `#CAC4D0` | Dark: `#49454F` via `md.ref.palette.neutral-variant30`<br>Medium contrast: `#79747E` via `md.ref.palette.neutral-variant50`<br>High contrast: `#49454F` via `md.ref.palette.neutral-variant30` |
| Disabled | `md.comp.button.outlined.selected.disabled.container.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Disabled | `md.comp.button.outlined.disabled.container.opacity` | Opacity | — | `0.1` | — |
| Disabled | `md.comp.button.outlined.disabled.label-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Disabled | `md.comp.button.outlined.disabled.label-text.opacity` | Opacity | — | `0.38` | — |
| Disabled | `md.comp.button.outlined.disabled.icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Disabled | `md.comp.button.outlined.disabled.icon.opacity` | Opacity | — | `0.38` | — |
| Disabled | `md.comp.button.outlined.disabled.outline.color` | Color | `md.sys.color.outline-variant` → `md.ref.palette.neutral-variant80` | `#CAC4D0` | Dark: `#49454F` via `md.ref.palette.neutral-variant30`<br>Medium contrast: `#79747E` via `md.ref.palette.neutral-variant50`<br>High contrast: `#49454F` via `md.ref.palette.neutral-variant30` |
| Hovered | `md.comp.button.outlined.unselected.hovered.state-layer.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Hovered | `md.comp.button.outlined.selected.hovered.state-layer.color` | Color | `md.sys.color.inverse-on-surface` → `md.ref.palette.neutral95` | `#F5EFF7` | Dark: `#322F35` via `md.ref.palette.neutral20`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`<br>High contrast: `#FFFFFF` via `md.ref.palette.neutral100` |
| Hovered | `md.comp.button.outlined.hovered.state-layer.opacity` | Opacity | `md.sys.state.hover.state-layer-opacity` | `0.08` | — |
| Hovered | `md.comp.button.outlined.hovered.outline.color` | Color | `md.sys.color.outline-variant` → `md.ref.palette.neutral-variant80` | `#CAC4D0` | Dark: `#49454F` via `md.ref.palette.neutral-variant30`<br>Medium contrast: `#79747E` via `md.ref.palette.neutral-variant50`<br>High contrast: `#49454F` via `md.ref.palette.neutral-variant30` |
| Hovered | `md.comp.button.outlined.unselected.hovered.outline.color` | Color | `md.sys.color.outline-variant` → `md.ref.palette.neutral-variant80` | `#CAC4D0` | Dark: `#49454F` via `md.ref.palette.neutral-variant30`<br>Medium contrast: `#79747E` via `md.ref.palette.neutral-variant50`<br>High contrast: `#49454F` via `md.ref.palette.neutral-variant30` |
| Hovered | `md.comp.button.outlined.hovered.label-text.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Hovered | `md.comp.button.outlined.unselected.hovered.label-text.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Hovered | `md.comp.button.outlined.selected.hovered.label-text.color` | Color | `md.sys.color.inverse-on-surface` → `md.ref.palette.neutral95` | `#F5EFF7` | Dark: `#322F35` via `md.ref.palette.neutral20`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`<br>High contrast: `#FFFFFF` via `md.ref.palette.neutral100` |
| Hovered | `md.comp.button.outlined.hovered.icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Hovered | `md.comp.button.outlined.unselected.hovered.icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Hovered | `md.comp.button.outlined.selected.hovered.icon.color` | Color | `md.sys.color.inverse-on-surface` → `md.ref.palette.neutral95` | `#F5EFF7` | Dark: `#322F35` via `md.ref.palette.neutral20`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`<br>High contrast: `#FFFFFF` via `md.ref.palette.neutral100` |
| Hovered | `md.comp.button.outlined.hovered.state-layer.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Focused | `md.comp.button.outlined.unselected.focused.state-layer.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Focused | `md.comp.button.outlined.selected.focused.state-layer.color` | Color | `md.sys.color.inverse-on-surface` → `md.ref.palette.neutral95` | `#F5EFF7` | Dark: `#322F35` via `md.ref.palette.neutral20`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`<br>High contrast: `#FFFFFF` via `md.ref.palette.neutral100` |
| Focused | `md.comp.button.outlined.focused.state-layer.opacity` | Opacity | `md.sys.state.focus.state-layer-opacity` | `0.1` | — |
| Focused | `md.comp.button.outlined.focused.outline.color` | Color | `md.sys.color.outline-variant` → `md.ref.palette.neutral-variant80` | `#CAC4D0` | Dark: `#49454F` via `md.ref.palette.neutral-variant30`<br>Medium contrast: `#79747E` via `md.ref.palette.neutral-variant50`<br>High contrast: `#49454F` via `md.ref.palette.neutral-variant30` |
| Focused | `md.comp.button.outlined.unselected.focused.outline.color` | Color | `md.sys.color.outline-variant` → `md.ref.palette.neutral-variant80` | `#CAC4D0` | Dark: `#49454F` via `md.ref.palette.neutral-variant30`<br>Medium contrast: `#79747E` via `md.ref.palette.neutral-variant50`<br>High contrast: `#49454F` via `md.ref.palette.neutral-variant30` |
| Focused | `md.comp.button.outlined.focused.label-text.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Focused | `md.comp.button.outlined.unselected.focused.label-text.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Focused | `md.comp.button.outlined.selected.focused.label-text.color` | Color | `md.sys.color.inverse-on-surface` → `md.ref.palette.neutral95` | `#F5EFF7` | Dark: `#322F35` via `md.ref.palette.neutral20`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`<br>High contrast: `#FFFFFF` via `md.ref.palette.neutral100` |
| Focused | `md.comp.button.outlined.focused.icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Focused | `md.comp.button.outlined.unselected.focused.icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Focused | `md.comp.button.outlined.selected.focused.icon.color` | Color | `md.sys.color.inverse-on-surface` → `md.ref.palette.neutral95` | `#F5EFF7` | Dark: `#322F35` via `md.ref.palette.neutral20`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`<br>High contrast: `#FFFFFF` via `md.ref.palette.neutral100` |
| Focused | `md.comp.button.outlined.focused.state-layer.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Pressed | `md.comp.button.outlined.unselected.pressed.state-layer.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Pressed | `md.comp.button.outlined.selected.pressed.state-layer.color` | Color | `md.sys.color.inverse-on-surface` → `md.ref.palette.neutral95` | `#F5EFF7` | Dark: `#322F35` via `md.ref.palette.neutral20`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`<br>High contrast: `#FFFFFF` via `md.ref.palette.neutral100` |
| Pressed | `md.comp.button.outlined.pressed.state-layer.opacity` | Opacity | `md.sys.state.pressed.state-layer-opacity` | `0.1` | — |
| Pressed | `md.comp.button.outlined.pressed.outline.color` | Color | `md.sys.color.outline-variant` → `md.ref.palette.neutral-variant80` | `#CAC4D0` | Dark: `#49454F` via `md.ref.palette.neutral-variant30`<br>Medium contrast: `#79747E` via `md.ref.palette.neutral-variant50`<br>High contrast: `#49454F` via `md.ref.palette.neutral-variant30` |
| Pressed | `md.comp.button.outlined.unselected.pressed.outline.color` | Color | `md.sys.color.outline-variant` → `md.ref.palette.neutral-variant80` | `#CAC4D0` | Dark: `#49454F` via `md.ref.palette.neutral-variant30`<br>Medium contrast: `#79747E` via `md.ref.palette.neutral-variant50`<br>High contrast: `#49454F` via `md.ref.palette.neutral-variant30` |
| Pressed | `md.comp.button.outlined.pressed.label-text.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Pressed | `md.comp.button.outlined.unselected.pressed.label-text.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Pressed | `md.comp.button.outlined.selected.pressed.label-text.color` | Color | `md.sys.color.inverse-on-surface` → `md.ref.palette.neutral95` | `#F5EFF7` | Dark: `#322F35` via `md.ref.palette.neutral20`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`<br>High contrast: `#FFFFFF` via `md.ref.palette.neutral100` |
| Pressed | `md.comp.button.outlined.pressed.icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Pressed | `md.comp.button.outlined.unselected.pressed.icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Pressed | `md.comp.button.outlined.selected.pressed.icon.color` | Color | `md.sys.color.inverse-on-surface` → `md.ref.palette.neutral95` | `#F5EFF7` | Dark: `#322F35` via `md.ref.palette.neutral20`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`<br>High contrast: `#FFFFFF` via `md.ref.palette.neutral100` |
| Pressed | `md.comp.button.outlined.pressed.state-layer.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
:::

## States

[States](../../foundations/interaction/states/overview.md "States show the interaction status of a component or UI element.") are visual representations used to communicate the status of a component or an interactive element. 

Split button states use the same colors and state layers as [buttons](../buttons/specs.md "Buttons let people take action and make choices with one tap.") and [icon buttons](../icon-buttons/specs.md "Icon buttons help people take minor actions with one tap."). Go to those specs for details.

### Leading button shape

The inner corners change shape for hovered, focused, and pressed states.

![5 states of the leading button in the split button.](/assets/d9285beb-ma3oaphp-6-3p.B7DhGbA2.webp)

1. Enabled
2. Disabled
3. Hovered
4. Focused
5. Pressed, pressed with focus

### Trailing button shape

The inner corners change shape for hovered, focused, and pressed states, and the icon becomes centered when selected.

![6 states of the trailing menu button in the split button.](/assets/3d3f1126-ma3ob3p2-7-3p.BSt5bTwO.webp)

1. Enabled
2. Disabled
3. Hovered
4. Focused
5. Pressed, pressed with focus
6. Selected, selected with focus

## Measurements

Text and icons are optically centered when the buttons are asymmetrical. They’re centered normally when symmetrical.

![Padding and size measurements of the split button.](/assets/1910d8bc-ma5hz28q-8-3p.C5qwmF2Y.webp)

Menu icon offset when unselected:

1. XS: -1dp from center
2. S: -1dp from center
3. M: -2dp from center
4. L: -3dp from center
5. XL: -6dp from center

The inner corner radius changes depending on button sizing. The space should always be 2dp.

![Inner padding and inner corner measurements of the split button.](/assets/51e986a2-ma3ocky0-9-3p.QpVRVLT2.webp)

1. Extra small 4dp
2. Small 4dp
3. Medium 4dp
4. Large 8dp
5. Extra large 12dp