Split buttons

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

Overview · Specs · Guidelines · Accessibility

Variants

Variant	M3	M3 Expressive
Split button	--	Available

Configurations

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

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

Tokens & specs

Use the table's menu to select a token set. Split button token sets are organized by size. Learn about design tokens

Design tokens

Token table

Machine-readable relationship table

Split buttons tokens · 5 token sets · 61 tokens · live token table · DSDB TOKEN_TABLE.624e8f2da4007fc8

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

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

For XS split buttons.

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

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

For small split buttons.

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

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

For medium split buttons.

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

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

For large split buttons.

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

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

For XL split buttons.

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

Anatomy

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

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

1. Label + icon
2. Label
3. Icon

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.

Split buttons use the same color schemes as standard buttons. However, unlike toggle buttons, the split button color doesn’t change when selected—only a state layer is applied.

Split buttons use the same colors and state layers as buttons, shown in the following token module. Go to buttons for more details.

A: Unselected, B: Selected trailing icon

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

Design tokens

Token table

Machine-readable relationship table

Split buttons tokens · 4 token sets · 205 tokens · live token table · DSDB TOKEN_TABLE.624e8f2da4007fc8

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

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

For elevated buttons.

Group	Token	Type	Reference chain	Resolved value	Other contexts
Enabled	md.comp.button.elevated.unselected.container.color	Color	md.sys.color.surface-container-low → md.ref.palette.neutral96	#F7F2FA	Dark: #1D1B20 via md.ref.palette.neutral10
Enabled	md.comp.button.elevated.selected.container.color	Color	md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 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

States

States are visual representations used to communicate the status of a component or an interactive element. 

Split button states use the same colors and state layers as buttons and icon buttons. Go to those specs for details.

Leading button shape

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

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

Trailing button shape

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

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

Measurements

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

Menu icon offset when unselected:

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

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

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