--- url: /components/buttons/specs.md description: >- Buttons help people take action, such as sending an email, sharing a document, or liking a comment. Common buttons prompt most actions in a UI. --- # Buttons Buttons help people take action, such as sending an email, sharing a document, or liking a comment. Common buttons prompt most actions in a UI. [Overview](overview.md) · **Specs** · [Guidelines](guidelines.md) · [Accessibility](accessibility.md) ## Variants ![Diagram comparing buttons with toggle buttons.](/assets/a62efba6-mnhhn4lk-01-3p.fUAjrJFD.webp) 1. Default button 2. Toggle button | Variant | M3 | M3 Expressive | | ------------------ | :-------: | :-----------: | | Default | Available | Available | | Toggle (selection) | -- | Available | ## Configurations ![Diagram showing configurations of buttons.](/assets/ea7260f0-mmneq41m-02-3p.CmRzJiUq.webp) 1. Size 2. Shape 3. Color 4. Small button padding | Category | Configuration | M3 | M3 Expressive | | -------------------- | ------------------------------------------------- | :-------: | :--------------------------: | | Size | Small (default) | Available | Available | | Size | XS, M, L, XL | -- | Available | | Shape | Round (default) | Available | Available | | Shape | Square | -- | Available | | Color | Elevated, filled (default), tonal, outlined, text | Available | Available | | Small button padding | 24dp | Available | Not recommended.
Use 16dp | | Small button padding | 16dp | -- | Available | ## Tokens & specs Use the table's menu to select a token set. Button token sets are separated into common tokens, color, and size. [View baseline tokens](#c305d304-a6c0-466a-a48c-8d0718a29ae2) ::: token-table token-table-1c4257f8804f9478-7b51de42 **Buttons tokens** · 10 token sets · 295 tokens · [live token table](https://m3.material.io/components/buttons/specs) · DSDB `TOKEN_TABLE.1c4257f8804f9478` * 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`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
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`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
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`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
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`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
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`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
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`
Medium contrast: `#000000` via `md.ref.palette.neutral0`
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`
Medium contrast: `#000000` via `md.ref.palette.neutral0`
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`
Medium contrast: `#000000` via `md.ref.palette.neutral0`
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`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
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`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
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`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
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`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
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`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
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`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
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`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
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`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
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`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
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`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
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`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
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`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
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`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
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`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
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`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
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`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
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`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
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`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
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`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
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`
Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`
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`
Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`
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`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
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`
Medium contrast: `#000000` via `md.ref.palette.neutral0`
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`
Medium contrast: `#000000` via `md.ref.palette.neutral0`
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`
Medium contrast: `#000000` via `md.ref.palette.neutral0`
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`
Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`
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`
Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`
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`
Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`
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`
Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`
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`
Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`
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`
Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`
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`
Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`
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`
Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`
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`
Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`
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`
Medium contrast: `#625B71` via `md.ref.palette.secondary40`
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`
Medium contrast: `#4A4458` via `md.ref.palette.secondary30`
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`
Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`
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`
Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`
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`
Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`
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`
Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`
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`
Medium contrast: `#625B71` via `md.ref.palette.secondary40`
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`
Medium contrast: `#000000` via `md.ref.palette.neutral0`
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`
Medium contrast: `#000000` via `md.ref.palette.neutral0`
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`
Medium contrast: `#000000` via `md.ref.palette.neutral0`
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`
Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`
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`
Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`
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`
Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`
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`
Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`
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`
Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`
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`
Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`
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`
Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`
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`
Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`
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`
Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`
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`
Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`
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`
Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`
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`
Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`
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`
Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`
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`
Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`
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`
Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`
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`
Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`
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`
Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`
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`
Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`
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`
Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`
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`
Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`
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`
Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`
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`
Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`
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`
Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`
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`
Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`
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`
Medium contrast: `#79747E` via `md.ref.palette.neutral-variant50`
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`
Medium contrast: `#79747E` via `md.ref.palette.neutral-variant50`
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`
Medium contrast: `#000000` via `md.ref.palette.neutral0`
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`
Medium contrast: `#000000` via `md.ref.palette.neutral0`
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`
Medium contrast: `#000000` via `md.ref.palette.neutral0`
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`
Medium contrast: `#79747E` via `md.ref.palette.neutral-variant50`
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`
Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`
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`
Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`
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`
Medium contrast: `#79747E` via `md.ref.palette.neutral-variant50`
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`
Medium contrast: `#79747E` via `md.ref.palette.neutral-variant50`
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`
Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`
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`
Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`
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`
Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`
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`
Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`
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`
Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`
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`
Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`
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`
Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`
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`
Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`
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`
Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`
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`
Medium contrast: `#79747E` via `md.ref.palette.neutral-variant50`
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`
Medium contrast: `#79747E` via `md.ref.palette.neutral-variant50`
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`
Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`
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`
Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`
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`
Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`
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`
Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`
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`
Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`
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`
Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`
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`
Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`
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`
Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`
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`
Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`
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`
Medium contrast: `#79747E` via `md.ref.palette.neutral-variant50`
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`
Medium contrast: `#79747E` via `md.ref.palette.neutral-variant50`
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`
Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`
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`
Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`
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`
Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`
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`
Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`
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`
Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`
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`
Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`
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`
Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`
High contrast: `#000000` via `md.ref.palette.neutral-variant0` | **Button - Color - Text** · `md.comp.button.text` · 20 tokens For text buttons. | Group | Token | Type | Reference chain | Resolved value | Other contexts | | --- | --- | --- | --- | --- | --- | | Enabled | `md.comp.button.text.icon.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | Enabled | `md.comp.button.text.label-text.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | Disabled | `md.comp.button.text.disabled.container.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`
Medium contrast: `#000000` via `md.ref.palette.neutral0`
High contrast: `#000000` via `md.ref.palette.neutral0` | | Disabled | `md.comp.button.text.disabled.container.opacity` | Opacity | — | `0.1` | — | | Disabled | `md.comp.button.text.disabled.label-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`
Medium contrast: `#000000` via `md.ref.palette.neutral0`
High contrast: `#000000` via `md.ref.palette.neutral0` | | Disabled | `md.comp.button.text.disabled.label-text.opacity` | Opacity | — | `0.38` | — | | Disabled | `md.comp.button.text.disabled.icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`
Medium contrast: `#000000` via `md.ref.palette.neutral0`
High contrast: `#000000` via `md.ref.palette.neutral0` | | Disabled | `md.comp.button.text.disabled.icon.opacity` | Opacity | — | `0.38` | — | | Hovered | `md.comp.button.text.hovered.state-layer.opacity` | Opacity | `md.sys.state.hover.state-layer-opacity` | `0.08` | — | | Hovered | `md.comp.button.text.hovered.label-text.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | Hovered | `md.comp.button.text.hovered.icon.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | Hovered | `md.comp.button.text.hovered.state-layer.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | Focused | `md.comp.button.text.focused.state-layer.opacity` | Opacity | `md.sys.state.focus.state-layer-opacity` | `0.1` | — | | Focused | `md.comp.button.text.focused.label-text.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | Focused | `md.comp.button.text.focused.icon.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | Focused | `md.comp.button.text.focused.state-layer.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | Pressed | `md.comp.button.text.pressed.state-layer.opacity` | Opacity | `md.sys.state.pressed.state-layer-opacity` | `0.1` | — | | Pressed | `md.comp.button.text.pressed.label-text.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | Pressed | `md.comp.button.text.pressed.icon.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | Pressed | `md.comp.button.text.pressed.state-layer.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | **Button - Size - Xsmall** · `md.comp.button.xsmall` · 14 tokens For XS buttons. | Group | Token | Type | Reference chain | Resolved value | Other contexts | | --- | --- | --- | --- | --- | --- | | All tokens | `md.comp.button.xsmall.container.height` | Length | — | `32dp` | — | | All tokens | `md.comp.button.xsmall.outlined.outline.width` | Length | — | `1dp` | — | | All tokens | `md.comp.button.xsmall.label-text` | Typography | `md.sys.typescale.label-large` → composite
font names: `md.sys.typescale.label-large.font` → `md.ref.typeface.plain`
font weight: `md.sys.typescale.label-large.weight` → `md.ref.typeface.weight-medium`
font size: `md.sys.typescale.label-large.size`
line height: `md.sys.typescale.label-large.line-height`
font tracking: `md.sys.typescale.label-large.tracking` | `Roboto · weight 500 · size 14pt · line height 20pt · tracking 0.1pt` | — | | All tokens | `md.comp.button.xsmall.icon.size` | Length | — | `20dp` | — | | All tokens | `md.comp.button.xsmall.container.shape.round` | Shape | `md.sys.shape.corner.full` | `Circular (fully rounded)` | — | | All tokens | `md.comp.button.xsmall.container.shape.square` | Shape | `md.sys.shape.corner.medium` | `Rounded corners 12dp` | — | | All tokens | `md.comp.button.xsmall.leading-space` | Length | — | `12dp` | — | | All tokens | `md.comp.button.xsmall.icon-label-space` | Length | `md.sys.measurement.space50` | `4dp` | — | | All tokens | `md.comp.button.xsmall.trailing-space` | Length | — | `12dp` | — | | All tokens | `md.comp.button.xsmall.pressed.container.shape` | Shape | `md.sys.shape.corner.small` | `Rounded corners 8dp` | — | | All tokens | `md.comp.button.xsmall.pressed.container.corner-size.motion.spring.damping` | Duration | `md.sys.motion.spring.fast.spatial.damping` | `0.9` | — | | All tokens | `md.comp.button.xsmall.pressed.container.corner-size.motion.spring.stiffness` | Duration | `md.sys.motion.spring.fast.spatial.stiffness` | `1400` | — | | All tokens | `md.comp.button.xsmall.selected.container.shape.round` | Shape | `md.sys.shape.corner.medium` | `Rounded corners 12dp` | — | | All tokens | `md.comp.button.xsmall.selected.container.shape.square` | Shape | `md.sys.shape.corner.full` | `Circular (fully rounded)` | — | **Button - Size - Small** · `md.comp.button.small` · 14 tokens For small buttons. | Group | Token | Type | Reference chain | Resolved value | Other contexts | | --- | --- | --- | --- | --- | --- | | All tokens | `md.comp.button.small.container.height` | Length | — | `40dp` | — | | All tokens | `md.comp.button.small.outlined.outline.width` | Length | — | `1dp` | — | | All tokens | `md.comp.button.small.label-text` | Typography | `md.sys.typescale.label-large` → composite
font names: `md.sys.typescale.label-large.font` → `md.ref.typeface.plain`
font weight: `md.sys.typescale.label-large.weight` → `md.ref.typeface.weight-medium`
font size: `md.sys.typescale.label-large.size`
line height: `md.sys.typescale.label-large.line-height`
font tracking: `md.sys.typescale.label-large.tracking` | `Roboto · weight 500 · size 14pt · line height 20pt · tracking 0.1pt` | — | | All tokens | `md.comp.button.small.icon.size` | Length | — | `20dp` | — | | All tokens | `md.comp.button.small.container.shape.round` | Shape | `md.sys.shape.corner.full` | `Circular (fully rounded)` | — | | All tokens | `md.comp.button.small.container.shape.square` | Shape | `md.sys.shape.corner.medium` | `Rounded corners 12dp` | — | | All tokens | `md.comp.button.small.leading-space` | Length | `md.sys.measurement.space200` | `16dp` | — | | All tokens | `md.comp.button.small.icon-label-space` | Length | `md.sys.measurement.space100` | `8dp` | — | | All tokens | `md.comp.button.small.trailing-space` | Length | `md.sys.measurement.space200` | `16dp` | — | | All tokens | `md.comp.button.small.pressed.container.shape` | Shape | `md.sys.shape.corner.small` | `Rounded corners 8dp` | — | | All tokens | `md.comp.button.small.pressed.container.corner-size.motion.spring.damping` | Duration | `md.sys.motion.spring.fast.spatial.damping` | `0.9` | — | | All tokens | `md.comp.button.small.pressed.container.corner-size.motion.spring.stiffness` | Duration | `md.sys.motion.spring.fast.spatial.stiffness` | `1400` | — | | All tokens | `md.comp.button.small.selected.container.shape.round` | Shape | `md.sys.shape.corner.medium` | `Rounded corners 12dp` | — | | All tokens | `md.comp.button.small.selected.container.shape.square` | Shape | `md.sys.shape.corner.full` | `Circular (fully rounded)` | — | **Button - Size - Medium** · `md.comp.button.medium` · 14 tokens For medium buttons. | Group | Token | Type | Reference chain | Resolved value | Other contexts | | --- | --- | --- | --- | --- | --- | | All tokens | `md.comp.button.medium.container.height` | Length | — | `56dp` | — | | All tokens | `md.comp.button.medium.outlined.outline.width` | Length | — | `1dp` | — | | All tokens | `md.comp.button.medium.label-text` | Typography | `md.sys.typescale.title-medium` → composite
font names: `md.sys.typescale.title-medium.font` → `md.ref.typeface.plain`
font weight: `md.sys.typescale.title-medium.weight` → `md.ref.typeface.weight-medium`
font size: `md.sys.typescale.title-medium.size`
line height: `md.sys.typescale.title-medium.line-height`
font tracking: `md.sys.typescale.title-medium.tracking` | `Roboto · weight 500 · size 16pt · line height 24pt · tracking 0.15pt` | — | | All tokens | `md.comp.button.medium.icon.size` | Length | — | `24dp` | — | | All tokens | `md.comp.button.medium.container.shape.round` | Shape | `md.sys.shape.corner.full` | `Circular (fully rounded)` | — | | All tokens | `md.comp.button.medium.container.shape.square` | Shape | `md.sys.shape.corner.large` | `Rounded corners 16dp` | — | | All tokens | `md.comp.button.medium.leading-space` | Length | `md.sys.measurement.space300` | `24dp` | — | | All tokens | `md.comp.button.medium.icon-label-space` | Length | `md.sys.measurement.space100` | `8dp` | — | | All tokens | `md.comp.button.medium.trailing-space` | Length | `md.sys.measurement.space300` | `24dp` | — | | All tokens | `md.comp.button.medium.pressed.container.shape` | Shape | `md.sys.shape.corner.medium` | `Rounded corners 12dp` | — | | All tokens | `md.comp.button.medium.pressed.container.corner-size.motion.spring.damping` | Duration | `md.sys.motion.spring.fast.spatial.damping` | `0.9` | — | | All tokens | `md.comp.button.medium.pressed.container.corner-size.motion.spring.stiffness` | Duration | `md.sys.motion.spring.fast.spatial.stiffness` | `1400` | — | | All tokens | `md.comp.button.medium.selected.container.shape.round` | Shape | `md.sys.shape.corner.large` | `Rounded corners 16dp` | — | | All tokens | `md.comp.button.medium.selected.container.shape.square` | Shape | `md.sys.shape.corner.full` | `Circular (fully rounded)` | — | **Button - Size - Large** · `md.comp.button.large` · 14 tokens For large buttons. | Group | Token | Type | Reference chain | Resolved value | Other contexts | | --- | --- | --- | --- | --- | --- | | All tokens | `md.comp.button.large.container.height` | Length | — | `96dp` | — | | All tokens | `md.comp.button.large.outlined.outline.width` | Length | — | `2dp` | — | | All tokens | `md.comp.button.large.label-text` | Typography | `md.sys.typescale.headline-small` → composite
font names: `md.sys.typescale.headline-small.font` → `md.ref.typeface.brand`
font weight: `md.sys.typescale.headline-small.weight` → `md.ref.typeface.weight-regular`
font size: `md.sys.typescale.headline-small.size`
line height: `md.sys.typescale.headline-small.line-height`
font tracking: `md.sys.typescale.headline-small.tracking` | `Roboto · weight 400 · size 24pt · line height 32pt · tracking 0pt` | — | | All tokens | `md.comp.button.large.icon.size` | Length | — | `32dp` | — | | All tokens | `md.comp.button.large.container.shape.round` | Shape | `md.sys.shape.corner.full` | `Circular (fully rounded)` | — | | All tokens | `md.comp.button.large.container.shape.square` | Shape | `md.sys.shape.corner.extra-large` | `Rounded corners 28dp` | — | | All tokens | `md.comp.button.large.leading-space` | Length | `md.sys.measurement.space600` | `48dp` | — | | All tokens | `md.comp.button.large.icon-label-space` | Length | `md.sys.measurement.space150` | `12dp` | — | | All tokens | `md.comp.button.large.trailing-space` | Length | `md.sys.measurement.space600` | `48dp` | — | | All tokens | `md.comp.button.large.pressed.container.shape` | Shape | `md.sys.shape.corner.large` | `Rounded corners 16dp` | — | | All tokens | `md.comp.button.large.pressed.container.corner-size.motion.spring.damping` | Duration | `md.sys.motion.spring.fast.spatial.damping` | `0.9` | — | | All tokens | `md.comp.button.large.pressed.container.corner-size.motion.spring.stiffness` | Duration | `md.sys.motion.spring.fast.spatial.stiffness` | `1400` | — | | All tokens | `md.comp.button.large.selected.container.shape.round` | Shape | `md.sys.shape.corner.extra-large` | `Rounded corners 28dp` | — | | All tokens | `md.comp.button.large.selected.container.shape.square` | Shape | `md.sys.shape.corner.full` | `Circular (fully rounded)` | — | **Button - Size - Xlarge** · `md.comp.button.xlarge` · 14 tokens For XL buttons. | Group | Token | Type | Reference chain | Resolved value | Other contexts | | --- | --- | --- | --- | --- | --- | | All tokens | `md.comp.button.xlarge.container.height` | Length | — | `136dp` | — | | All tokens | `md.comp.button.xlarge.outlined.outline.width` | Length | — | `3dp` | — | | All tokens | `md.comp.button.xlarge.label-text` | Typography | `md.sys.typescale.headline-large` → composite
font names: `md.sys.typescale.headline-large.font` → `md.ref.typeface.brand`
font weight: `md.sys.typescale.headline-large.weight` → `md.ref.typeface.weight-regular`
font size: `md.sys.typescale.headline-large.size`
line height: `md.sys.typescale.headline-large.line-height`
font tracking: `md.sys.typescale.headline-large.tracking` | `Roboto · weight 400 · size 32pt · line height 40pt · tracking 0pt` | — | | All tokens | `md.comp.button.xlarge.icon.size` | Length | — | `40dp` | — | | All tokens | `md.comp.button.xlarge.container.shape.round` | Shape | `md.sys.shape.corner.full` | `Circular (fully rounded)` | — | | All tokens | `md.comp.button.xlarge.container.shape.square` | Shape | `md.sys.shape.corner.extra-large` | `Rounded corners 28dp` | — | | All tokens | `md.comp.button.xlarge.leading-space` | Length | `md.sys.measurement.space800` | `64dp` | — | | All tokens | `md.comp.button.xlarge.icon-label-space` | Length | `md.sys.measurement.space200` | `16dp` | — | | All tokens | `md.comp.button.xlarge.trailing-space` | Length | `md.sys.measurement.space800` | `64dp` | — | | All tokens | `md.comp.button.xlarge.pressed.container.shape` | Shape | `md.sys.shape.corner.large` | `Rounded corners 16dp` | — | | All tokens | `md.comp.button.xlarge.pressed.container.corner-size.motion.spring.damping` | Duration | `md.sys.motion.spring.fast.spatial.damping` | `0.9` | — | | All tokens | `md.comp.button.xlarge.pressed.container.corner-size.motion.spring.stiffness` | Duration | `md.sys.motion.spring.fast.spatial.stiffness` | `1400` | — | | All tokens | `md.comp.button.xlarge.selected.container.shape.round` | Shape | `md.sys.shape.corner.extra-large` | `Rounded corners 28dp` | — | | All tokens | `md.comp.button.xlarge.selected.container.shape.square` | Shape | `md.sys.shape.corner.full` | `Circular (fully rounded)` | — | ::: ## Anatomy ![Diagram labeling 3 parts of a button.](/assets/6847649d-mmneqix9-03-3p.tmxE6D_d.webp) 1. Container 2. Label text 3. Icon (optional) ## 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. * There are five built-in button color styles: elevated, filled, tonal, outlined, and text * The default and toggle buttons use different colors * Toggle buttons don’t use the text style ::: info Note These color roles were chosen to create design coherence and familiarity. Other color roles can be used as long as the container and text have a 3:1 contrast ratio. For example, tertiary and on tertiary. ::: ![Diagram shows dark and light color schemes for buttons.](/assets/3327524b-mmner6e7-04-3p._Wh64-Pp.webp) A. Elevated, B. Filled, C. Tonal, D. Outlined, E. Text 1. Default 2. Toggle: unselected 3. Toggle: selected | | 1. Default | 2. Toggle unselected | 3. Toggle selected | | ------------------------------------------- | ----------------------------------------------- | ----------------------------------------------- | ------------------------------------- | | Elevated container
Elevated icon & label | Surface container low
Primary | Surface container low
Primary | Primary
On primary | | Filled container
Filled icon & label | Primary
On primary | Surface container
On surface variant | Primary
On primary | | Tonal container
Tonal icon & label | Secondary container
On secondary container | Secondary container
On secondary container | Secondary
On secondary | | Outlined container
Outlined icon & label | Outline variant (outline)
On surface variant | Outline variant (outline)
On surface variant | Inverse surface
Inverse on surface | | Text icon & label | Primary | -- | -- | ## 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 interactive element. ### Elevated button states The elevated button style has an elevation of 1 by default and 0 when disabled. #### Default ![Elevated button states.](/assets/3d457fb2-mmnesmjm-06-3p.B7IDuhss.webp) 1. Enabled 2. Disabled 3. Hovered 4. Focused 5. Pressed #### Toggle ![Toggle elevated button states.](/assets/85b08e30-mmnet1qn-07-3p.C2BO2nCr.webp) A. Unselected, B. Selected 1. Enabled  2. Disabled  3. Hovered  4. Focused  5. Pressed ### Filled button states #### Default ![Filled button states.](/assets/f1f70254-mmneu2zl-08-3p.fPviA158.webp) 1. Enabled 2. Disabled 3. Hovered 4. Focused 5. Pressed #### Toggle ![Toggle filled button states.](/assets/fd2c2c79-mnhkhbya-09-3p.DcUoUyRw.webp) A. Unselected, B. Selected 1. Enabled  2. Disabled  3. Hovered  4. Focused  5. Pressed ### Tonal button states #### Default ![Tonal button states.](/assets/43e4e75d-mmneuv7c-10-3p.BoTapr9a.webp) 1. Enabled 2. Disabled 3. Hovered 4. Focused 5. Pressed #### Toggle ![Toggle tonal button states.](/assets/2b3ccb37-mmnevsol-11-3p.ClF6EfRs.webp) A. Unselected, B. Selected 1. Enabled  2. Disabled  3. Hovered  4. Focused  5. Pressed ### Outlined button states The outlined button’s container fill is invisible at rest, but the opacity and state layers behave the same as other button styles when disabled, hovered, focused, or pressed. #### Default ![Outlined button states.](/assets/3a65148d-mmnewg2s-12-3p.CDsTXFVg.webp) 1. Enabled 2. Disabled 3. Hovered 4. Focused 5. Pressed #### Toggle ![Outlined button states.](/assets/4c2e44bb-mmnexggd-13-3p.CB4tbAsp.webp) 1. Enabled 2. Disabled 3. Hovered 4. Focused 5. Pressed ### Text button style states The text button’s container is invisible at rest, but the opacity and state layers behave the same as other button styles when disabled, hovered, focused, or pressed. There is no toggle text button. ![Default text button style states.](/assets/358cf177-mmneyf25-14-3p.DpBW28XG.webp) 1. Enabled 2. Disabled 3. Hovered 4. Focused 5. Pressed ## Shape morph ### Pressed state When pressed, buttons can morph to become more square. Both round and square buttons should have the same pressed shape. The corner radius value differs for each button size. [See full button corner measurements](#b1f39738-6f3a-409b-8f08-4cab6d78d756) ![Shape changes of a button.](/assets/c33b73c7-mmneyrwe-15-3p.DSM0pLLk.webp) A. Round button, B. Square button 1. Enabled 2. Hovered 3. Pressed ### When selected In addition to changing shape when pressed, toggle buttons also change the resting shape from round (unselected) to square (selected).  If the resting unselected shape is square, the selected shape should be round. ![Shape changes of a toggle button.](/assets/f6605c06-mmnezbyl-16-3p.RJw3w85c.webp) A. Round button, B. Square button 1. Enabled 2. Hovered 3. Pressed 4. Selected ## Measurements ![Diagram of measurements of all button sizes.](/assets/ebc2407c-mmnf0bsj-17-3p.DhmcXHRR.webp) Padding and size measurements of each button size 1. Extra small 2. Small 3. Medium 4. Large 5. Extra large ### Target areas Extra small and small icon buttons must have a target size of 48x48dp or larger to be accessible. ![Diagram of small button target areas.](/assets/36e683a9-mmnf0o8e-18-3p.6v3AceA3.webp) A. Extra small  B. Small 1. Round button  2. Button with icon 3. Square button ### Corner sizes ![Diagram of corner radii of buttons.](/assets/1c4d4034-mmnf14u5-19-3p.C9v_1B43.webp)
| | XS | S | M | L | XL | | ---------------- | :--: | :--: | :--: | :--: | :--: | | A. Round button | Full | Full | Full | Full | Full | | B. Square button | 12dp | 12dp | 16dp | 28dp | 28dp | | C. Pressed state | 8dp | 8dp | 12dp | 16dp | 16dp | ## Baseline tokens Use the table's menu to switch token sets. The baseline button token sets are organized by color. ::: token-table token-table-1c4257f8804f9478-971e581a **Buttons tokens** · 5 token sets · 192 tokens · [live token table](https://m3.material.io/components/buttons/specs) · DSDB `TOKEN_TABLE.1c4257f8804f9478` * Default context: Theme: Light · Platform: Android · Audience: 3P · Font: Static · Contrast: Default · iOS dark theme elevation: None · iOS weight setting: Default * Not configurable here (group default used): Motion scheme: Standard · 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. **\[Deprecated] Button - Elevated** · `md.comp.elevated-button` · 40 tokens This token set is deprecated. Use \`md.comp.button.elevated\` instead. | Group | Token | Type | Reference chain | Resolved value | Other contexts | | --- | --- | --- | --- | --- | --- | | \[Deprecated] Enabled › \[Deprecated] Container | `md.comp.elevated-button.container.shape` (deprecated) | Shape | `md.sys.shape.corner.full` | `Circular (fully rounded)` | — | | \[Deprecated] Enabled › \[Deprecated] Container | `md.comp.elevated-button.container.height` (deprecated) | Length | — | `40dp` | — | | \[Deprecated] Enabled › \[Deprecated] Container | `md.comp.elevated-button.container.elevation` (deprecated) | Elevation | `md.sys.elevation.level1` | `1dp` | — | | \[Deprecated] Enabled › \[Deprecated] Container | `md.comp.elevated-button.container.shadow-color` (deprecated) | Color | `md.sys.color.shadow` → `md.ref.palette.neutral0` | `#000000` | — | | \[Deprecated] Enabled › \[Deprecated] Container | `md.comp.elevated-button.container.color` (deprecated) | Color | `md.sys.color.surface-container-low` → `md.ref.palette.neutral96` | `#F7F2FA` | Dark: `#1D1B20` via `md.ref.palette.neutral10` | | \[Deprecated] Enabled › \[Deprecated] Container | `md.comp.elevated-button.container.surface-tint-layer.color` (deprecated) | Color | `md.sys.color.surface-tint` → `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Enabled › \[Deprecated] Label text | `md.comp.elevated-button.label-text.font` (deprecated) | Font names | `md.sys.typescale.label-large.font` → `md.ref.typeface.plain` | `Roboto` | — | | \[Deprecated] Enabled › \[Deprecated] Label text | `md.comp.elevated-button.label-text.line-height` (deprecated) | Line height | `md.sys.typescale.label-large.line-height` | `20pt` | — | | \[Deprecated] Enabled › \[Deprecated] Label text | `md.comp.elevated-button.label-text.size` (deprecated) | Font size | `md.sys.typescale.label-large.size` | `14pt` | — | | \[Deprecated] Enabled › \[Deprecated] Label text | `md.comp.elevated-button.label-text.weight` (deprecated) | Font weight | `md.sys.typescale.label-large.weight` → `md.ref.typeface.weight-medium` | `500` | — | | \[Deprecated] Enabled › \[Deprecated] Label text | `md.comp.elevated-button.label-text.tracking` (deprecated) | Font tracking | `md.sys.typescale.label-large.tracking` | `0.1pt` | — | | \[Deprecated] Enabled › \[Deprecated] Label text | `md.comp.elevated-button.label-text.type` (deprecated) | Typography | composite
font names: `md.comp.elevated-button.label-text.font` → `md.sys.typescale.label-large.font` → `md.ref.typeface.plain`
font weight: `md.comp.elevated-button.label-text.weight` → `md.sys.typescale.label-large.weight` → `md.ref.typeface.weight-medium`
font size: `md.comp.elevated-button.label-text.size` → `md.sys.typescale.label-large.size`
line height: `md.comp.elevated-button.label-text.line-height` → `md.sys.typescale.label-large.line-height`
font tracking: `md.comp.elevated-button.label-text.tracking` → `md.sys.typescale.label-large.tracking` | `Roboto · weight 500 · size 14pt · line height 20pt · tracking 0.1pt` | — | | \[Deprecated] Enabled › \[Deprecated] Label text | `md.comp.elevated-button.label-text.color` (deprecated) | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Enabled › \[Deprecated] Icon | `md.comp.elevated-button.with-icon.icon.size` (deprecated) | Length | — | `18dp` | — | | \[Deprecated] Enabled › \[Deprecated] Icon | `md.comp.elevated-button.with-icon.icon.color` (deprecated) | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Disabled › \[Deprecated] Container | `md.comp.elevated-button.disabled.container.color` (deprecated) | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`
Medium contrast: `#000000` via `md.ref.palette.neutral0`
High contrast: `#000000` via `md.ref.palette.neutral0` | | \[Deprecated] Disabled › \[Deprecated] Container | `md.comp.elevated-button.disabled.container.opacity` (deprecated) | Opacity | — | `0.12` | — | | \[Deprecated] Disabled › \[Deprecated] Container | `md.comp.elevated-button.disabled.container.elevation` (deprecated) | Elevation | `md.sys.elevation.level0` | `0dp` | — | | \[Deprecated] Disabled › \[Deprecated] Label text | `md.comp.elevated-button.disabled.label-text.color` (deprecated) | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`
Medium contrast: `#000000` via `md.ref.palette.neutral0`
High contrast: `#000000` via `md.ref.palette.neutral0` | | \[Deprecated] Disabled › \[Deprecated] Label text | `md.comp.elevated-button.disabled.label-text.opacity` (deprecated) | Opacity | — | `0.38` | — | | \[Deprecated] Disabled › \[Deprecated] Icon | `md.comp.elevated-button.with-icon.disabled.icon.color` (deprecated) | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`
Medium contrast: `#000000` via `md.ref.palette.neutral0`
High contrast: `#000000` via `md.ref.palette.neutral0` | | \[Deprecated] Disabled › \[Deprecated] Icon | `md.comp.elevated-button.with-icon.disabled.icon.opacity` (deprecated) | Opacity | — | `0.38` | — | | \[Deprecated] Hovered › \[Deprecated] Container | `md.comp.elevated-button.hover.container.elevation` (deprecated) | Elevation | `md.sys.elevation.level2` | `3dp` | — | | \[Deprecated] Hovered › \[Deprecated] Label text | `md.comp.elevated-button.hover.label-text.color` (deprecated) | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Hovered › \[Deprecated] State layer | `md.comp.elevated-button.hover.state-layer.color` (deprecated) | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Hovered › \[Deprecated] State layer | `md.comp.elevated-button.hover.state-layer.opacity` (deprecated) | Opacity | `md.sys.state.hover.state-layer-opacity` | `0.08` | — | | \[Deprecated] Hovered › \[Deprecated] Icon | `md.comp.elevated-button.with-icon.hover.icon.color` (deprecated) | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Focused › \[Deprecated] Container | `md.comp.elevated-button.focus.container.elevation` (deprecated) | Elevation | `md.sys.elevation.level1` | `1dp` | — | | \[Deprecated] Focused › \[Deprecated] Label text | `md.comp.elevated-button.focus.label-text.color` (deprecated) | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Focused › \[Deprecated] State layer | `md.comp.elevated-button.focus.state-layer.color` (deprecated) | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Focused › \[Deprecated] State layer | `md.comp.elevated-button.focus.state-layer.opacity` (deprecated) | Opacity | `md.sys.state.focus.state-layer-opacity` | `0.1` | — | | \[Deprecated] Focused › \[Deprecated] Icon | `md.comp.elevated-button.with-icon.focus.icon.color` (deprecated) | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Focused › \[Deprecated] Focus indicator | `md.comp.elevated-button.focus.indicator.color` (deprecated) | Color | `md.sys.color.secondary` → `md.ref.palette.secondary40` | `#625B71` | Dark: `#CCC2DC` via `md.ref.palette.secondary80`
Medium contrast: `#4A4458` via `md.ref.palette.secondary30`
High contrast: `#332D41` via `md.ref.palette.secondary20` | | \[Deprecated] Focused › \[Deprecated] Focus indicator | `md.comp.elevated-button.focus.indicator.thickness` (deprecated) | Length | `md.sys.state.focus-indicator.thickness` | `3dp` | — | | \[Deprecated] Focused › \[Deprecated] Focus indicator | `md.comp.elevated-button.focus.indicator.outline.offset` (deprecated) | Length | `md.sys.state.focus-indicator.outer-offset` | `2dp` | — | | \[Deprecated] Pressed (ripple) › \[Deprecated] Container | `md.comp.elevated-button.pressed.container.elevation` (deprecated) | Elevation | `md.sys.elevation.level1` | `1dp` | — | | \[Deprecated] Pressed (ripple) › \[Deprecated] Label text | `md.comp.elevated-button.pressed.label-text.color` (deprecated) | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Pressed (ripple) › \[Deprecated] State layer | `md.comp.elevated-button.pressed.state-layer.color` (deprecated) | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Pressed (ripple) › \[Deprecated] State layer | `md.comp.elevated-button.pressed.state-layer.opacity` (deprecated) | Opacity | `md.sys.state.pressed.state-layer-opacity` | `0.1` | — | | \[Deprecated] Pressed (ripple) › \[Deprecated] Icon | `md.comp.elevated-button.with-icon.pressed.icon.color` (deprecated) | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | **\[Deprecated] Button - Filled** · `md.comp.filled-button` · 44 tokens This token set is deprecated. Use \`md.comp.button.filled\` instead. | Group | Token | Type | Reference chain | Resolved value | Other contexts | | --- | --- | --- | --- | --- | --- | | \[Deprecated] Enabled › \[Deprecated] Container | `md.comp.filled-button.container.shape` (deprecated) | Shape | `md.sys.shape.corner.full` | `Circular (fully rounded)` | — | | \[Deprecated] Enabled › \[Deprecated] Container | `md.comp.filled-button.container.height` (deprecated) | Length | — | `40dp` | — | | \[Deprecated] Enabled › \[Deprecated] Container | `md.comp.filled-button.container.elevation` (deprecated) | Elevation | `md.sys.elevation.level0` | `0dp` | — | | \[Deprecated] Enabled › \[Deprecated] Container | `md.comp.filled-button.container.shadow-color` (deprecated) | Color | `md.sys.color.shadow` → `md.ref.palette.neutral0` | `#000000` | — | | \[Deprecated] Enabled › \[Deprecated] Container | `md.comp.filled-button.container.color` (deprecated) | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Enabled › \[Deprecated] Label text | `md.comp.filled-button.label-text.font` (deprecated) | Font names | `md.sys.typescale.label-large.font` → `md.ref.typeface.plain` | `Roboto` | — | | \[Deprecated] Enabled › \[Deprecated] Label text | `md.comp.filled-button.label-text.line-height` (deprecated) | Line height | `md.sys.typescale.label-large.line-height` | `20pt` | — | | \[Deprecated] Enabled › \[Deprecated] Label text | `md.comp.filled-button.label-text.size` (deprecated) | Font size | `md.sys.typescale.label-large.size` | `14pt` | — | | \[Deprecated] Enabled › \[Deprecated] Label text | `md.comp.filled-button.label-text.weight` (deprecated) | Font weight | `md.sys.typescale.label-large.weight` → `md.ref.typeface.weight-medium` | `500` | — | | \[Deprecated] Enabled › \[Deprecated] Label text | `md.comp.filled-button.label-text.tracking` (deprecated) | Font tracking | `md.sys.typescale.label-large.tracking` | `0.1pt` | — | | \[Deprecated] Enabled › \[Deprecated] Label text | `md.comp.filled-button.label-text.type` (deprecated) | Typography | composite
font names: `md.comp.filled-button.label-text.font` → `md.sys.typescale.label-large.font` → `md.ref.typeface.plain`
font weight: `md.comp.filled-button.label-text.weight` → `md.sys.typescale.label-large.weight` → `md.ref.typeface.weight-medium`
font size: `md.comp.filled-button.label-text.size` → `md.sys.typescale.label-large.size`
line height: `md.comp.filled-button.label-text.line-height` → `md.sys.typescale.label-large.line-height`
font tracking: `md.comp.filled-button.label-text.tracking` → `md.sys.typescale.label-large.tracking` | `Roboto · weight 500 · size 14pt · line height 20pt · tracking 0.1pt` | — | | \[Deprecated] Enabled › \[Deprecated] Label text | `md.comp.filled-button.label-text.color` (deprecated) | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Enabled › \[Deprecated] Icon | `md.comp.filled-button.with-icon.icon.size` (deprecated) | Length | — | `18dp` | — | | \[Deprecated] Enabled › \[Deprecated] Icon | `md.comp.filled-button.with-icon.icon.color` (deprecated) | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Disabled › \[Deprecated] Container | `md.comp.filled-button.disabled.container.elevation` (deprecated) | Elevation | `md.sys.elevation.level0` | `0dp` | — | | \[Deprecated] Disabled › \[Deprecated] Container | `md.comp.filled-button.disabled.container.color` (deprecated) | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`
Medium contrast: `#000000` via `md.ref.palette.neutral0`
High contrast: `#000000` via `md.ref.palette.neutral0` | | \[Deprecated] Disabled › \[Deprecated] Container | `md.comp.filled-button.disabled.container.opacity` (deprecated) | Opacity | — | `0.12` | — | | \[Deprecated] Disabled › \[Deprecated] Label text | `md.comp.filled-button.disabled.label-text.color` (deprecated) | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`
Medium contrast: `#000000` via `md.ref.palette.neutral0`
High contrast: `#000000` via `md.ref.palette.neutral0` | | \[Deprecated] Disabled › \[Deprecated] Label text | `md.comp.filled-button.disabled.label-text.opacity` (deprecated) | Opacity | — | `0.38` | — | | \[Deprecated] Disabled › \[Deprecated] Icon | `md.comp.filled-button.with-icon.disabled.icon.color` (deprecated) | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`
Medium contrast: `#000000` via `md.ref.palette.neutral0`
High contrast: `#000000` via `md.ref.palette.neutral0` | | \[Deprecated] Disabled › \[Deprecated] Icon | `md.comp.filled-button.with-icon.disabled.icon.opacity` (deprecated) | Opacity | — | `0.38` | — | | \[Deprecated] Hovered › \[Deprecated] Container | `md.comp.filled-button.hover.container.elevation` (deprecated) | Elevation | `md.sys.elevation.level1` | `1dp` | — | | \[Deprecated] Hovered › \[Deprecated] Label text | `md.comp.filled-button.hover.label-text.color` (deprecated) | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Hovered › \[Deprecated] State layer | `md.comp.filled-button.hover.state-layer.color` (deprecated) | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Hovered › \[Deprecated] State layer | `md.comp.filled-button.hover.state-layer.opacity` (deprecated) | Opacity | `md.sys.state.hover.state-layer-opacity` | `0.08` | — | | \[Deprecated] Hovered › \[Deprecated] Icon | `md.comp.filled-button.with-icon.hover.icon.color` (deprecated) | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Focused › \[Deprecated] Container | `md.comp.filled-button.focus.container.elevation` (deprecated) | Elevation | `md.sys.elevation.level0` | `0dp` | — | | \[Deprecated] Focused › \[Deprecated] Label text | `md.comp.filled-button.focus.label-text.color` (deprecated) | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Focused › \[Deprecated] State layer | `md.comp.filled-button.focus.state-layer.color` (deprecated) | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Focused › \[Deprecated] State layer | `md.comp.filled-button.focus.state-layer.opacity` (deprecated) | Opacity | `md.sys.state.focus.state-layer-opacity` | `0.1` | — | | \[Deprecated] Focused › \[Deprecated] Icon | `md.comp.filled-button.with-icon.focus.icon.color` (deprecated) | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Focused › \[Deprecated] Focus indicator | `md.comp.filled-button.focus.indicator.color` (deprecated) | Color | `md.sys.color.secondary` → `md.ref.palette.secondary40` | `#625B71` | Dark: `#CCC2DC` via `md.ref.palette.secondary80`
Medium contrast: `#4A4458` via `md.ref.palette.secondary30`
High contrast: `#332D41` via `md.ref.palette.secondary20` | | \[Deprecated] Focused › \[Deprecated] Focus indicator | `md.comp.filled-button.focus.indicator.thickness` (deprecated) | Length | `md.sys.state.focus-indicator.thickness` | `3dp` | — | | \[Deprecated] Focused › \[Deprecated] Focus indicator | `md.comp.filled-button.focus.indicator.outline.offset` (deprecated) | Length | `md.sys.state.focus-indicator.outer-offset` | `2dp` | — | | \[Deprecated] Pressed (ripple) › \[Deprecated] Container | `md.comp.filled-button.pressed.container.elevation` (deprecated) | Elevation | `md.sys.elevation.level0` | `0dp` | — | | \[Deprecated] Pressed (ripple) › \[Deprecated] Label text | `md.comp.filled-button.pressed.label-text.color` (deprecated) | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Pressed (ripple) › \[Deprecated] State layer | `md.comp.filled-button.pressed.state-layer.color` (deprecated) | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Pressed (ripple) › \[Deprecated] State layer | `md.comp.filled-button.pressed.state-layer.opacity` (deprecated) | Opacity | `md.sys.state.pressed.state-layer-opacity` | `0.1` | — | | \[Deprecated] Pressed (ripple) › \[Deprecated] Icon | `md.comp.filled-button.with-icon.pressed.icon.color` (deprecated) | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Dragged › \[Deprecated] Container | `md.comp.filled-button.dragged.container.elevation` (deprecated) | Elevation | `md.sys.elevation.level3` | `6dp` | — | | \[Deprecated] Dragged › \[Deprecated] Label text | `md.comp.filled-button.dragged.label-text.color` (deprecated) | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Dragged › \[Deprecated] State layer | `md.comp.filled-button.dragged.state-layer.color` (deprecated) | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Dragged › \[Deprecated] State layer | `md.comp.filled-button.dragged.state-layer.opacity` (deprecated) | Opacity | `md.sys.state.dragged.state-layer-opacity` | `0.16` | — | | \[Deprecated] Dragged › \[Deprecated] Icon | `md.comp.filled-button.with-icon.dragged.icon.color` (deprecated) | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` | **\[Deprecated] Button - Tonal** · `md.comp.filled-tonal-button` · 39 tokens This token set is deprecated. Use \`md.comp.button.tonal\` instead. | Group | Token | Type | Reference chain | Resolved value | Other contexts | | --- | --- | --- | --- | --- | --- | | \[Deprecated] Enabled › \[Deprecated] Container | `md.comp.filled-tonal-button.container.color` (deprecated) | Color | `md.sys.color.secondary-container` → `md.ref.palette.secondary90` | `#E8DEF8` | Dark: `#4A4458` via `md.ref.palette.secondary30`
Medium contrast: `#625B71` via `md.ref.palette.secondary40`
High contrast: `#4A4458` via `md.ref.palette.secondary30` | | \[Deprecated] Enabled › \[Deprecated] Container | `md.comp.filled-tonal-button.container.shadow-color` (deprecated) | Color | `md.sys.color.shadow` → `md.ref.palette.neutral0` | `#000000` | — | | \[Deprecated] Enabled › \[Deprecated] Container | `md.comp.filled-tonal-button.container.elevation` (deprecated) | Elevation | `md.sys.elevation.level0` | `0dp` | — | | \[Deprecated] Enabled › \[Deprecated] Container | `md.comp.filled-tonal-button.container.height` (deprecated) | Length | — | `40dp` | — | | \[Deprecated] Enabled › \[Deprecated] Container | `md.comp.filled-tonal-button.container.shape` (deprecated) | Shape | `md.sys.shape.corner.full` | `Circular (fully rounded)` | — | | \[Deprecated] Enabled › \[Deprecated] Label text | `md.comp.filled-tonal-button.label-text.color` (deprecated) | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`
Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`
High contrast: `#FFFFFF` via `md.ref.palette.secondary100` | | \[Deprecated] Enabled › \[Deprecated] Label text | `md.comp.filled-tonal-button.label-text.font` (deprecated) | Font names | `md.sys.typescale.label-large.font` → `md.ref.typeface.plain` | `Roboto` | — | | \[Deprecated] Enabled › \[Deprecated] Label text | `md.comp.filled-tonal-button.label-text.line-height` (deprecated) | Line height | `md.sys.typescale.label-large.line-height` | `20pt` | — | | \[Deprecated] Enabled › \[Deprecated] Label text | `md.comp.filled-tonal-button.label-text.size` (deprecated) | Font size | `md.sys.typescale.label-large.size` | `14pt` | — | | \[Deprecated] Enabled › \[Deprecated] Label text | `md.comp.filled-tonal-button.label-text.tracking` (deprecated) | Font tracking | `md.sys.typescale.label-large.tracking` | `0.1pt` | — | | \[Deprecated] Enabled › \[Deprecated] Label text | `md.comp.filled-tonal-button.label-text.weight` (deprecated) | Font weight | `md.sys.typescale.label-large.weight` → `md.ref.typeface.weight-medium` | `500` | — | | \[Deprecated] Enabled › \[Deprecated] Label text | `md.comp.filled-tonal-button.label-text.type` (deprecated) | Typography | composite
font names: `md.comp.filled-tonal-button.label-text.font` → `md.sys.typescale.label-large.font` → `md.ref.typeface.plain`
font weight: `md.comp.filled-tonal-button.label-text.weight` → `md.sys.typescale.label-large.weight` → `md.ref.typeface.weight-medium`
font size: `md.comp.filled-tonal-button.label-text.size` → `md.sys.typescale.label-large.size`
line height: `md.comp.filled-tonal-button.label-text.line-height` → `md.sys.typescale.label-large.line-height`
font tracking: `md.comp.filled-tonal-button.label-text.tracking` → `md.sys.typescale.label-large.tracking` | `Roboto · weight 500 · size 14pt · line height 20pt · tracking 0.1pt` | — | | \[Deprecated] Enabled › \[Deprecated] Icon | `md.comp.filled-tonal-button.with-icon.icon.color` (deprecated) | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`
Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`
High contrast: `#FFFFFF` via `md.ref.palette.secondary100` | | \[Deprecated] Enabled › \[Deprecated] Icon | `md.comp.filled-tonal-button.with-icon.icon.size` (deprecated) | Length | — | `18dp` | — | | \[Deprecated] Disabled › \[Deprecated] Container | `md.comp.filled-tonal-button.disabled.container.color` (deprecated) | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`
Medium contrast: `#000000` via `md.ref.palette.neutral0`
High contrast: `#000000` via `md.ref.palette.neutral0` | | \[Deprecated] Disabled › \[Deprecated] Container | `md.comp.filled-tonal-button.disabled.container.elevation` (deprecated) | Elevation | `md.sys.elevation.level0` | `0dp` | — | | \[Deprecated] Disabled › \[Deprecated] Container | `md.comp.filled-tonal-button.disabled.container.opacity` (deprecated) | Opacity | — | `0.12` | — | | \[Deprecated] Disabled › \[Deprecated] Label text | `md.comp.filled-tonal-button.disabled.label-text.color` (deprecated) | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`
Medium contrast: `#000000` via `md.ref.palette.neutral0`
High contrast: `#000000` via `md.ref.palette.neutral0` | | \[Deprecated] Disabled › \[Deprecated] Label text | `md.comp.filled-tonal-button.disabled.label-text.opacity` (deprecated) | Opacity | — | `0.38` | — | | \[Deprecated] Disabled › \[Deprecated] Icon | `md.comp.filled-tonal-button.with-icon.disabled.icon.color` (deprecated) | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`
Medium contrast: `#000000` via `md.ref.palette.neutral0`
High contrast: `#000000` via `md.ref.palette.neutral0` | | \[Deprecated] Disabled › \[Deprecated] Icon | `md.comp.filled-tonal-button.with-icon.disabled.icon.opacity` (deprecated) | Opacity | — | `0.38` | — | | \[Deprecated] Hovered › \[Deprecated] Container | `md.comp.filled-tonal-button.hover.container.elevation` (deprecated) | Elevation | `md.sys.elevation.level1` | `1dp` | — | | \[Deprecated] Hovered › \[Deprecated] Label text | `md.comp.filled-tonal-button.hover.label-text.color` (deprecated) | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`
Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`
High contrast: `#FFFFFF` via `md.ref.palette.secondary100` | | \[Deprecated] Hovered › \[Deprecated] State layer | `md.comp.filled-tonal-button.hover.state-layer.color` (deprecated) | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`
Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`
High contrast: `#FFFFFF` via `md.ref.palette.secondary100` | | \[Deprecated] Hovered › \[Deprecated] State layer | `md.comp.filled-tonal-button.hover.state-layer.opacity` (deprecated) | Opacity | `md.sys.state.hover.state-layer-opacity` | `0.08` | — | | \[Deprecated] Hovered › \[Deprecated] Icon | `md.comp.filled-tonal-button.with-icon.hover.icon.color` (deprecated) | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`
Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`
High contrast: `#FFFFFF` via `md.ref.palette.secondary100` | | \[Deprecated] Focused › \[Deprecated] Container | `md.comp.filled-tonal-button.focus.container.elevation` (deprecated) | Elevation | `md.sys.elevation.level0` | `0dp` | — | | \[Deprecated] Focused › \[Deprecated] Label text | `md.comp.filled-tonal-button.focus.label-text.color` (deprecated) | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`
Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`
High contrast: `#FFFFFF` via `md.ref.palette.secondary100` | | \[Deprecated] Focused › \[Deprecated] State layer | `md.comp.filled-tonal-button.focus.state-layer.color` (deprecated) | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`
Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`
High contrast: `#FFFFFF` via `md.ref.palette.secondary100` | | \[Deprecated] Focused › \[Deprecated] State layer | `md.comp.filled-tonal-button.focus.state-layer.opacity` (deprecated) | Opacity | `md.sys.state.focus.state-layer-opacity` | `0.1` | — | | \[Deprecated] Focused › \[Deprecated] Icon | `md.comp.filled-tonal-button.with-icon.focus.icon.color` (deprecated) | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`
Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`
High contrast: `#FFFFFF` via `md.ref.palette.secondary100` | | \[Deprecated] Focused › \[Deprecated] Focus indicator | `md.comp.filled-tonal-button.focus.indicator.color` (deprecated) | Color | `md.sys.color.secondary` → `md.ref.palette.secondary40` | `#625B71` | Dark: `#CCC2DC` via `md.ref.palette.secondary80`
Medium contrast: `#4A4458` via `md.ref.palette.secondary30`
High contrast: `#332D41` via `md.ref.palette.secondary20` | | \[Deprecated] Focused › \[Deprecated] Focus indicator | `md.comp.filled-tonal-button.focus.indicator.thickness` (deprecated) | Length | `md.sys.state.focus-indicator.thickness` | `3dp` | — | | \[Deprecated] Focused › \[Deprecated] Focus indicator | `md.comp.filled-tonal-button.focus.indicator.outline.offset` (deprecated) | Length | `md.sys.state.focus-indicator.outer-offset` | `2dp` | — | | \[Deprecated] Pressed (ripple) › \[Deprecated] Container | `md.comp.filled-tonal-button.pressed.container.elevation` (deprecated) | Elevation | `md.sys.elevation.level0` | `0dp` | — | | \[Deprecated] Pressed (ripple) › \[Deprecated] Label text | `md.comp.filled-tonal-button.pressed.label-text.color` (deprecated) | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`
Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`
High contrast: `#FFFFFF` via `md.ref.palette.secondary100` | | \[Deprecated] Pressed (ripple) › \[Deprecated] State layer | `md.comp.filled-tonal-button.pressed.state-layer.color` (deprecated) | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`
Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`
High contrast: `#FFFFFF` via `md.ref.palette.secondary100` | | \[Deprecated] Pressed (ripple) › \[Deprecated] State layer | `md.comp.filled-tonal-button.pressed.state-layer.opacity` (deprecated) | Opacity | `md.sys.state.pressed.state-layer-opacity` | `0.1` | — | | \[Deprecated] Pressed (ripple) › \[Deprecated] Icon | `md.comp.filled-tonal-button.with-icon.pressed.icon.color` (deprecated) | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`
Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`
High contrast: `#FFFFFF` via `md.ref.palette.secondary100` | **\[Deprecated] Button – Outlined** · `md.comp.outlined-button` · 38 tokens This token set is deprecated. Use \`md.comp.button.outlined\` instead. | Group | Token | Type | Reference chain | Resolved value | Other contexts | | --- | --- | --- | --- | --- | --- | | \[Deprecated] Enabled › \[Deprecated] Container | `md.comp.outlined-button.container.shape` (deprecated) | Shape | `md.sys.shape.corner.full` | `Circular (fully rounded)` | — | | \[Deprecated] Enabled › \[Deprecated] Container | `md.comp.outlined-button.container.height` (deprecated) | Length | — | `40dp` | — | | \[Deprecated] Enabled › \[Deprecated] Container | `md.comp.outlined-button.container.elevation` (deprecated) | Elevation | `md.sys.elevation.level0` | `0dp` | — | | \[Deprecated] Enabled › \[Deprecated] Outline | `md.comp.outlined-button.outline.color` (deprecated) | Color | `md.sys.color.outline` → `md.ref.palette.neutral-variant50` | `#79747E` | Dark: `#938F99` via `md.ref.palette.neutral-variant60`
Medium contrast: `#49454F` via `md.ref.palette.neutral-variant30`
High contrast: `#322F37` via `md.ref.palette.neutral-variant20` | | \[Deprecated] Enabled › \[Deprecated] Outline | `md.comp.outlined-button.outline.width` (deprecated) | Length | — | `1dp` | — | | \[Deprecated] Enabled › \[Deprecated] Label text | `md.comp.outlined-button.label-text.font` (deprecated) | Font names | `md.sys.typescale.label-large.font` → `md.ref.typeface.plain` | `Roboto` | — | | \[Deprecated] Enabled › \[Deprecated] Label text | `md.comp.outlined-button.label-text.line-height` (deprecated) | Line height | `md.sys.typescale.label-large.line-height` | `20pt` | — | | \[Deprecated] Enabled › \[Deprecated] Label text | `md.comp.outlined-button.label-text.size` (deprecated) | Font size | `md.sys.typescale.label-large.size` | `14pt` | — | | \[Deprecated] Enabled › \[Deprecated] Label text | `md.comp.outlined-button.label-text.weight` (deprecated) | Font weight | `md.sys.typescale.label-large.weight` → `md.ref.typeface.weight-medium` | `500` | — | | \[Deprecated] Enabled › \[Deprecated] Label text | `md.comp.outlined-button.label-text.tracking` (deprecated) | Font tracking | `md.sys.typescale.label-large.tracking` | `0.1pt` | — | | \[Deprecated] Enabled › \[Deprecated] Label text | `md.comp.outlined-button.label-text.type` (deprecated) | Typography | composite
font names: `md.comp.outlined-button.label-text.font` → `md.sys.typescale.label-large.font` → `md.ref.typeface.plain`
font weight: `md.comp.outlined-button.label-text.weight` → `md.sys.typescale.label-large.weight` → `md.ref.typeface.weight-medium`
font size: `md.comp.outlined-button.label-text.size` → `md.sys.typescale.label-large.size`
line height: `md.comp.outlined-button.label-text.line-height` → `md.sys.typescale.label-large.line-height`
font tracking: `md.comp.outlined-button.label-text.tracking` → `md.sys.typescale.label-large.tracking` | `Roboto · weight 500 · size 14pt · line height 20pt · tracking 0.1pt` | — | | \[Deprecated] Enabled › \[Deprecated] Label text | `md.comp.outlined-button.label-text.color` (deprecated) | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Enabled › \[Deprecated] Icon | `md.comp.outlined-button.with-icon.icon.size` (deprecated) | Length | — | `18dp` | — | | \[Deprecated] Enabled › \[Deprecated] Icon | `md.comp.outlined-button.with-icon.icon.color` (deprecated) | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Disabled › \[Deprecated] Label text | `md.comp.outlined-button.disabled.label-text.color` (deprecated) | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`
Medium contrast: `#000000` via `md.ref.palette.neutral0`
High contrast: `#000000` via `md.ref.palette.neutral0` | | \[Deprecated] Disabled › \[Deprecated] Label text | `md.comp.outlined-button.disabled.label-text.opacity` (deprecated) | Opacity | — | `0.38` | — | | \[Deprecated] Disabled › \[Deprecated] Icon | `md.comp.outlined-button.with-icon.disabled.icon.color` (deprecated) | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`
Medium contrast: `#000000` via `md.ref.palette.neutral0`
High contrast: `#000000` via `md.ref.palette.neutral0` | | \[Deprecated] Disabled › \[Deprecated] Icon | `md.comp.outlined-button.with-icon.disabled.icon.opacity` (deprecated) | Opacity | — | `0.38` | — | | \[Deprecated] Disabled › \[Deprecated] Outline | `md.comp.outlined-button.disabled.outline.color` (deprecated) | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`
Medium contrast: `#000000` via `md.ref.palette.neutral0`
High contrast: `#000000` via `md.ref.palette.neutral0` | | \[Deprecated] Disabled › \[Deprecated] Outline | `md.comp.outlined-button.disabled.outline.opacity` (deprecated) | Opacity | — | `0.12` | — | | \[Deprecated] Hovered › \[Deprecated] Label text | `md.comp.outlined-button.hover.label-text.color` (deprecated) | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Hovered › \[Deprecated] State layer | `md.comp.outlined-button.hover.state-layer.color` (deprecated) | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Hovered › \[Deprecated] State layer | `md.comp.outlined-button.hover.state-layer.opacity` (deprecated) | Opacity | `md.sys.state.hover.state-layer-opacity` | `0.08` | — | | \[Deprecated] Hovered › \[Deprecated] Icon | `md.comp.outlined-button.with-icon.hover.icon.color` (deprecated) | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Hovered › \[Deprecated] Outline | `md.comp.outlined-button.hover.outline.color` (deprecated) | Color | `md.sys.color.outline` → `md.ref.palette.neutral-variant50` | `#79747E` | Dark: `#938F99` via `md.ref.palette.neutral-variant60`
Medium contrast: `#49454F` via `md.ref.palette.neutral-variant30`
High contrast: `#322F37` via `md.ref.palette.neutral-variant20` | | \[Deprecated] Focused › \[Deprecated] Label text | `md.comp.outlined-button.focus.label-text.color` (deprecated) | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Focused › \[Deprecated] State layer | `md.comp.outlined-button.focus.state-layer.color` (deprecated) | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Focused › \[Deprecated] State layer | `md.comp.outlined-button.focus.state-layer.opacity` (deprecated) | Opacity | `md.sys.state.focus.state-layer-opacity` | `0.1` | — | | \[Deprecated] Focused › \[Deprecated] Icon | `md.comp.outlined-button.with-icon.focus.icon.color` (deprecated) | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Focused › \[Deprecated] Outline | `md.comp.outlined-button.focus.outline.color` (deprecated) | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Focused › \[Deprecated] Focus indicator | `md.comp.outlined-button.focus.indicator.color` (deprecated) | Color | `md.sys.color.secondary` → `md.ref.palette.secondary40` | `#625B71` | Dark: `#CCC2DC` via `md.ref.palette.secondary80`
Medium contrast: `#4A4458` via `md.ref.palette.secondary30`
High contrast: `#332D41` via `md.ref.palette.secondary20` | | \[Deprecated] Focused › \[Deprecated] Focus indicator | `md.comp.outlined-button.focus.indicator.thickness` (deprecated) | Length | `md.sys.state.focus-indicator.thickness` | `3dp` | — | | \[Deprecated] Focused › \[Deprecated] Focus indicator | `md.comp.outlined-button.focus.indicator.outline.offset` (deprecated) | Length | `md.sys.state.focus-indicator.outer-offset` | `2dp` | — | | \[Deprecated] Pressed (ripple) › \[Deprecated] Label text | `md.comp.outlined-button.pressed.label-text.color` (deprecated) | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Pressed (ripple) › \[Deprecated] State layer | `md.comp.outlined-button.pressed.state-layer.color` (deprecated) | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Pressed (ripple) › \[Deprecated] State layer | `md.comp.outlined-button.pressed.state-layer.opacity` (deprecated) | Opacity | `md.sys.state.pressed.state-layer-opacity` | `0.1` | — | | \[Deprecated] Pressed (ripple) › \[Deprecated] Icon | `md.comp.outlined-button.with-icon.pressed.icon.color` (deprecated) | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Pressed (ripple) › \[Deprecated] Outline | `md.comp.outlined-button.pressed.outline.color` (deprecated) | Color | `md.sys.color.outline` → `md.ref.palette.neutral-variant50` | `#79747E` | Dark: `#938F99` via `md.ref.palette.neutral-variant60`
Medium contrast: `#49454F` via `md.ref.palette.neutral-variant30`
High contrast: `#322F37` via `md.ref.palette.neutral-variant20` | **\[Deprecated] Button - Text** · `md.comp.text-button` · 31 tokens This token set is deprecated. Use \`md.comp.button.text\` instead. | Group | Token | Type | Reference chain | Resolved value | Other contexts | | --- | --- | --- | --- | --- | --- | | \[Deprecated] Enabled › \[Deprecated] Container | `md.comp.text-button.container.shape` (deprecated) | Shape | `md.sys.shape.corner.full` | `Circular (fully rounded)` | — | | \[Deprecated] Enabled › \[Deprecated] Container | `md.comp.text-button.container.height` (deprecated) | Length | — | `40dp` | — | | \[Deprecated] Enabled › \[Deprecated] Container | `md.comp.text-button.container.elevation` (deprecated) | Elevation | `md.sys.elevation.level0` | `0dp` | — | | \[Deprecated] Enabled › \[Deprecated] Label text | `md.comp.text-button.label-text.font` (deprecated) | Font names | `md.sys.typescale.label-large.font` → `md.ref.typeface.plain` | `Roboto` | — | | \[Deprecated] Enabled › \[Deprecated] Label text | `md.comp.text-button.label-text.line-height` (deprecated) | Line height | `md.sys.typescale.label-large.line-height` | `20pt` | — | | \[Deprecated] Enabled › \[Deprecated] Label text | `md.comp.text-button.label-text.size` (deprecated) | Font size | `md.sys.typescale.label-large.size` | `14pt` | — | | \[Deprecated] Enabled › \[Deprecated] Label text | `md.comp.text-button.label-text.weight` (deprecated) | Font weight | `md.sys.typescale.label-large.weight` → `md.ref.typeface.weight-medium` | `500` | — | | \[Deprecated] Enabled › \[Deprecated] Label text | `md.comp.text-button.label-text.tracking` (deprecated) | Font tracking | `md.sys.typescale.label-large.tracking` | `0.1pt` | — | | \[Deprecated] Enabled › \[Deprecated] Label text | `md.comp.text-button.label-text.type` (deprecated) | Typography | composite
font names: `md.comp.text-button.label-text.font` → `md.sys.typescale.label-large.font` → `md.ref.typeface.plain`
font weight: `md.comp.text-button.label-text.weight` → `md.sys.typescale.label-large.weight` → `md.ref.typeface.weight-medium`
font size: `md.comp.text-button.label-text.size` → `md.sys.typescale.label-large.size`
line height: `md.comp.text-button.label-text.line-height` → `md.sys.typescale.label-large.line-height`
font tracking: `md.comp.text-button.label-text.tracking` → `md.sys.typescale.label-large.tracking` | `Roboto · weight 500 · size 14pt · line height 20pt · tracking 0.1pt` | — | | \[Deprecated] Enabled › \[Deprecated] Label text | `md.comp.text-button.label-text.color` (deprecated) | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Enabled › \[Deprecated] Icon | `md.comp.text-button.with-icon.icon.size` (deprecated) | Length | — | `18dp` | — | | \[Deprecated] Enabled › \[Deprecated] Icon | `md.comp.text-button.with-icon.icon.color` (deprecated) | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Disabled › \[Deprecated] Label text | `md.comp.text-button.disabled.label-text.color` (deprecated) | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`
Medium contrast: `#000000` via `md.ref.palette.neutral0`
High contrast: `#000000` via `md.ref.palette.neutral0` | | \[Deprecated] Disabled › \[Deprecated] Label text | `md.comp.text-button.disabled.label-text.opacity` (deprecated) | Opacity | — | `0.38` | — | | \[Deprecated] Disabled › \[Deprecated] Icon | `md.comp.text-button.with-icon.disabled.icon.color` (deprecated) | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`
Medium contrast: `#000000` via `md.ref.palette.neutral0`
High contrast: `#000000` via `md.ref.palette.neutral0` | | \[Deprecated] Disabled › \[Deprecated] Icon | `md.comp.text-button.with-icon.disabled.icon.opacity` (deprecated) | Opacity | — | `0.38` | — | | \[Deprecated] Hovered › \[Deprecated] Label text | `md.comp.text-button.hover.label-text.color` (deprecated) | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Hovered › \[Deprecated] State layer | `md.comp.text-button.hover.state-layer.color` (deprecated) | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Hovered › \[Deprecated] State layer | `md.comp.text-button.hover.state-layer.opacity` (deprecated) | Opacity | `md.sys.state.hover.state-layer-opacity` | `0.08` | — | | \[Deprecated] Hovered › \[Deprecated] Icon | `md.comp.text-button.with-icon.hover.icon.color` (deprecated) | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Focused › \[Deprecated] Label text | `md.comp.text-button.focus.label-text.color` (deprecated) | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Focused › \[Deprecated] State layer | `md.comp.text-button.focus.state-layer.color` (deprecated) | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Focused › \[Deprecated] State layer | `md.comp.text-button.focus.state-layer.opacity` (deprecated) | Opacity | `md.sys.state.focus.state-layer-opacity` | `0.1` | — | | \[Deprecated] Focused › \[Deprecated] Icon | `md.comp.text-button.with-icon.focus.icon.color` (deprecated) | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Focused › \[Deprecated] Focus indicator | `md.comp.text-button.focus.indicator.color` (deprecated) | Color | `md.sys.color.secondary` → `md.ref.palette.secondary40` | `#625B71` | Dark: `#CCC2DC` via `md.ref.palette.secondary80`
Medium contrast: `#4A4458` via `md.ref.palette.secondary30`
High contrast: `#332D41` via `md.ref.palette.secondary20` | | \[Deprecated] Focused › \[Deprecated] Focus indicator | `md.comp.text-button.focus.indicator.thickness` (deprecated) | Length | `md.sys.state.focus-indicator.thickness` | `3dp` | — | | \[Deprecated] Focused › \[Deprecated] Focus indicator | `md.comp.text-button.focus.indicator.outline.offset` (deprecated) | Length | `md.sys.state.focus-indicator.outer-offset` | `2dp` | — | | \[Deprecated] Pressed (ripple) › \[Deprecated] Label text | `md.comp.text-button.pressed.label-text.color` (deprecated) | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Pressed (ripple) › \[Deprecated] State layer | `md.comp.text-button.pressed.state-layer.color` (deprecated) | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | | \[Deprecated] Pressed (ripple) › \[Deprecated] State layer | `md.comp.text-button.pressed.state-layer.opacity` (deprecated) | Opacity | `md.sys.state.pressed.state-layer-opacity` | `0.1` | — | | \[Deprecated] Pressed (ripple) › \[Deprecated] Icon | `md.comp.text-button.with-icon.pressed.icon.color` (deprecated) | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` | :::