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 · Specs · Guidelines · Accessibility

Variants

1. Default button
2. Toggle button

Variant	M3	M3 Expressive
Default	Available	Available
Toggle (selection)	--	Available

Configurations

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

Design tokens

Token table

Machine-readable relationship table

Buttons tokens · 10 token sets · 295 tokens · live token table · 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

1. Container
2. Label text
3. Icon (optional)

Color

Color values are implemented through design tokens. 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

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.

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 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

1. Enabled
2. Disabled
3. Hovered
4. Focused
5. Pressed

Toggle

A. Unselected, B. Selected

1. Enabled 
2. Disabled 
3. Hovered 
4. Focused 
5. Pressed

Filled button states

Default

1. Enabled
2. Disabled
3. Hovered
4. Focused
5. Pressed

Toggle

A. Unselected, B. Selected

1. Enabled 
2. Disabled 
3. Hovered 
4. Focused 
5. Pressed

Tonal button states

Default

1. Enabled
2. Disabled
3. Hovered
4. Focused
5. Pressed

Toggle

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

1. Enabled
2. Disabled
3. Hovered
4. Focused
5. Pressed

Toggle

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.

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

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.

A. Round button, B. Square button

1. Enabled
2. Hovered
3. Pressed
4. Selected

Measurements

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.

A. Extra small  B. Small

1. Round button 
2. Button with icon
3. Square button

Corner sizes

	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.

Design tokens

Token table

Machine-readable relationship table

Buttons tokens · 5 token sets · 192 tokens · live token table · 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