Material Design 3 "Split Button" tokens: All tokens
Preview
Browse tokens
Color
Button - Color - Elevated
Enabled
| Token | Value |
|---|---|
Button elevated container colormd.comp.button.elevated.container.color | #F7F2FA md.comp.button.elevated.container.color
|
Button elevated elevationmd.comp.button.elevated.container.elevation | 1dp md.comp.button.elevated.container.elevation
|
Button elevated shadow colormd.comp.button.elevated.container.shadow-color | #000000 md.comp.button.elevated.container.shadow-color
|
Button elevated icon colormd.comp.button.elevated.icon.color | #6750A4 md.comp.button.elevated.icon.color
|
Button elevated label colormd.comp.button.elevated.label-text.color | #6750A4 md.comp.button.elevated.label-text.color
|
Button elevated container color - toggle (selected)md.comp.button.elevated.selected.container.color | #6750A4 md.comp.button.elevated.selected.container.color
|
Button elevated icon color - toggle (selected)md.comp.button.elevated.selected.icon.color | #FFFFFF md.comp.button.elevated.selected.icon.color
|
Button elevated label color - toggle (selected)md.comp.button.elevated.selected.label-text.color | #FFFFFF md.comp.button.elevated.selected.label-text.color
|
Button elevated container color - toggle (unselected)md.comp.button.elevated.unselected.container.color | #F7F2FA md.comp.button.elevated.unselected.container.color
|
Button elevated icon color - toggle (unselected)md.comp.button.elevated.unselected.icon.color | #6750A4 md.comp.button.elevated.unselected.icon.color
|
Button elevated label color - toggle (unselected)md.comp.button.elevated.unselected.label-text.color | #6750A4 md.comp.button.elevated.unselected.label-text.color
|
Disabled
| Token | Value |
|---|---|
Button elevated disabled container colormd.comp.button.elevated.disabled.container.color | #1D1B20 md.comp.button.elevated.disabled.container.color
|
Button elevated disabled container elevationmd.comp.button.elevated.disabled.container.elevation | 0dp md.comp.button.elevated.disabled.container.elevation
|
Button elevated disabled container opacitymd.comp.button.elevated.disabled.container.opacity | 10% md.comp.button.elevated.disabled.container.opacity |
Button elevated disabled icon colormd.comp.button.elevated.disabled.icon.color | #1D1B20 md.comp.button.elevated.disabled.icon.color
|
Button elevated disabled icon opacitymd.comp.button.elevated.disabled.icon.opacity | 38% md.comp.button.elevated.disabled.icon.opacity |
Button elevated disabled label colormd.comp.button.elevated.disabled.label-text.color | #1D1B20 md.comp.button.elevated.disabled.label-text.color
|
Button elevated disabled label opacitymd.comp.button.elevated.disabled.label-text.opacity | 38% md.comp.button.elevated.disabled.label-text.opacity |
Hovered
| Token | Value |
|---|---|
Button elevated hovered container elevationmd.comp.button.elevated.hovered.container.elevation | 3dp md.comp.button.elevated.hovered.container.elevation
|
Button elevated hovered icon colormd.comp.button.elevated.hovered.icon.color | #6750A4 md.comp.button.elevated.hovered.icon.color
|
Button elevated hovered label colormd.comp.button.elevated.hovered.label-text.color | #6750A4 md.comp.button.elevated.hovered.label-text.color
|
Button elevated hovered container state layer colormd.comp.button.elevated.hovered.state-layer.color | #6750A4 md.comp.button.elevated.hovered.state-layer.color
|
Button elevated hovered container state layer opacitymd.comp.button.elevated.hovered.state-layer.opacity | 8% md.comp.button.elevated.hovered.state-layer.opacity
|
Button elevated hovered icon color - toggle (selected)md.comp.button.elevated.selected.hovered.icon.color | #FFFFFF md.comp.button.elevated.selected.hovered.icon.color
|
Button elevated hovered label color - toggle (selected)md.comp.button.elevated.selected.hovered.label-text.color | #FFFFFF md.comp.button.elevated.selected.hovered.label-text.color
|
Button elevated hovered container state layer color - toggle (selected)md.comp.button.elevated.selected.hovered.state-layer.color | #FFFFFF md.comp.button.elevated.selected.hovered.state-layer.color
|
Button elevated hovered icon color - toggle (unselected)md.comp.button.elevated.unselected.hovered.icon.color | #6750A4 md.comp.button.elevated.unselected.hovered.icon.color
|
Button elevated hovered label color - toggle (unselected)md.comp.button.elevated.unselected.hovered.label-text.color | #6750A4 md.comp.button.elevated.unselected.hovered.label-text.color
|
Button elevated hovered container state layer color - toggle (unselected)md.comp.button.elevated.unselected.hovered.state-layer.color | #6750A4 md.comp.button.elevated.unselected.hovered.state-layer.color
|
Focused
| Token | Value |
|---|---|
Button elevated focused container state layer elevationmd.comp.button.elevated.focused.container.elevation | 1dp md.comp.button.elevated.focused.container.elevation
|
Button elevated focused icon colormd.comp.button.elevated.focused.icon.color | #6750A4 md.comp.button.elevated.focused.icon.color
|
Button elevated focused label colormd.comp.button.elevated.focused.label-text.color | #6750A4 md.comp.button.elevated.focused.label-text.color
|
Button elevated focused container state layer colormd.comp.button.elevated.focused.state-layer.color | #6750A4 md.comp.button.elevated.focused.state-layer.color
|
Button elevated focused container state layer opacitymd.comp.button.elevated.focused.state-layer.opacity | 10% md.comp.button.elevated.focused.state-layer.opacity
|
Button elevated focused icon color - toggle (selected)md.comp.button.elevated.selected.focused.icon.color | #FFFFFF md.comp.button.elevated.selected.focused.icon.color
|
Button elevated focused label color - toggle (selected)md.comp.button.elevated.selected.focused.label-text.color | #FFFFFF md.comp.button.elevated.selected.focused.label-text.color
|
Button elevated focused container state layer color - toggle (selected)md.comp.button.elevated.selected.focused.state-layer.color | #FFFFFF md.comp.button.elevated.selected.focused.state-layer.color
|
Button elevated focused icon color - toggle (unselected)md.comp.button.elevated.unselected.focused.icon.color | #6750A4 md.comp.button.elevated.unselected.focused.icon.color
|
Button elevated focused label color - toggle (unselected)md.comp.button.elevated.unselected.focused.label-text.color | #6750A4 md.comp.button.elevated.unselected.focused.label-text.color
|
Button elevated focused container state layer color - toggle (unselected)md.comp.button.elevated.unselected.focused.state-layer.color | #6750A4 md.comp.button.elevated.unselected.focused.state-layer.color
|
Pressed
| Token | Value |
|---|---|
Button elevated pressed container state layer elevationmd.comp.button.elevated.pressed.container.elevation | 1dp md.comp.button.elevated.pressed.container.elevation
|
Button elevated pressed icon colormd.comp.button.elevated.pressed.icon.color | #6750A4 md.comp.button.elevated.pressed.icon.color
|
Button elevated pressed label colormd.comp.button.elevated.pressed.label-text.color | #6750A4 md.comp.button.elevated.pressed.label-text.color
|
Button elevated pressed container state layer colormd.comp.button.elevated.pressed.state-layer.color | #6750A4 md.comp.button.elevated.pressed.state-layer.color
|
Button elevated pressed container state layer opacitymd.comp.button.elevated.pressed.state-layer.opacity | 10% md.comp.button.elevated.pressed.state-layer.opacity
|
Button elevated pressed icon color - toggle (selected)md.comp.button.elevated.selected.pressed.icon.color | #FFFFFF md.comp.button.elevated.selected.pressed.icon.color
|
Button elevated pressed label color - toggle (selected)md.comp.button.elevated.selected.pressed.label-text.color | #FFFFFF md.comp.button.elevated.selected.pressed.label-text.color
|
Button elevated pressed container state layer color - toggle (selected)md.comp.button.elevated.selected.pressed.state-layer.color | #FFFFFF md.comp.button.elevated.selected.pressed.state-layer.color
|
Button elevated pressed icon color - toggle (unselected)md.comp.button.elevated.unselected.pressed.icon.color | #6750A4 md.comp.button.elevated.unselected.pressed.icon.color
|
Button elevated pressed label color - toggle (unselected)md.comp.button.elevated.unselected.pressed.label-text.color | #6750A4 md.comp.button.elevated.unselected.pressed.label-text.color
|
Button elevated pressed container state layer color - toggle (unselected)md.comp.button.elevated.unselected.pressed.state-layer.color | #6750A4 md.comp.button.elevated.unselected.pressed.state-layer.color
|
Button - Color - Filled
Enabled
| Token | Value |
|---|---|
Button filled container colormd.comp.button.filled.container.color | #6750A4 md.comp.button.filled.container.color
|
Button filled elevationmd.comp.button.filled.container.elevation | 0dp md.comp.button.filled.container.elevation
|
Button filled shadow colormd.comp.button.filled.container.shadow-color | #000000 md.comp.button.filled.container.shadow-color
|
Button filled icon colormd.comp.button.filled.icon.color | #FFFFFF md.comp.button.filled.icon.color
|
Button filled label colormd.comp.button.filled.label-text.color | #FFFFFF md.comp.button.filled.label-text.color
|
Button filled container color - toggle (selected)md.comp.button.filled.selected.container.color | #6750A4 md.comp.button.filled.selected.container.color
|
Button filled icon color - toggle (selected)md.comp.button.filled.selected.icon.color | #FFFFFF md.comp.button.filled.selected.icon.color
|
Button filled label color - toggle (selected)md.comp.button.filled.selected.label-text.color | #FFFFFF md.comp.button.filled.selected.label-text.color
|
Button filled container color - toggle (unselected)md.comp.button.filled.unselected.container.color | #F3EDF7 md.comp.button.filled.unselected.container.color
|
Button filled icon color - toggle (unselected)md.comp.button.filled.unselected.icon.color | #49454F md.comp.button.filled.unselected.icon.color
|
Button filled label color - toggle (unselected)md.comp.button.filled.unselected.label-text.color | #49454F md.comp.button.filled.unselected.label-text.color
|
Disabled
| Token | Value |
|---|---|
Button filled disabled container colormd.comp.button.filled.disabled.container.color | #1D1B20 md.comp.button.filled.disabled.container.color
|
Button filled disabled container elevationmd.comp.button.filled.disabled.container.elevation | 0dp md.comp.button.filled.disabled.container.elevation
|
Button filled disabled container opacitymd.comp.button.filled.disabled.container.opacity | 10% md.comp.button.filled.disabled.container.opacity |
Button filled disabled icon colormd.comp.button.filled.disabled.icon.color | #1D1B20 md.comp.button.filled.disabled.icon.color
|
Button filled disabled icon opacitymd.comp.button.filled.disabled.icon.opacity | 38% md.comp.button.filled.disabled.icon.opacity |
Button filled disabled label colormd.comp.button.filled.disabled.label-text.color | #1D1B20 md.comp.button.filled.disabled.label-text.color
|
Button filled disabled label opacitymd.comp.button.filled.disabled.label-text.opacity | 38% md.comp.button.filled.disabled.label-text.opacity |
Hovered
| Token | Value |
|---|---|
Button filled hovered container elevationmd.comp.button.filled.hovered.container.elevation | 1dp md.comp.button.filled.hovered.container.elevation
|
Button filled hovered icon colormd.comp.button.filled.hovered.icon.color | #FFFFFF md.comp.button.filled.hovered.icon.color
|
Button filled hovered label colormd.comp.button.filled.hovered.label-text.color | #FFFFFF md.comp.button.filled.hovered.label-text.color
|
Button filled hovered container state layer colormd.comp.button.filled.hovered.state-layer.color | #FFFFFF md.comp.button.filled.hovered.state-layer.color
|
Button filled hovered container state layer opacitymd.comp.button.filled.hovered.state-layer.opacity | 8% md.comp.button.filled.hovered.state-layer.opacity
|
Button filled hovered icon color - toggle (selected)md.comp.button.filled.selected.hovered.icon.color | #FFFFFF md.comp.button.filled.selected.hovered.icon.color
|
Button filled hovered label color - toggle (selected)md.comp.button.filled.selected.hovered.label-text.color | #FFFFFF md.comp.button.filled.selected.hovered.label-text.color
|
Button filled hovered container state layer color - toggle (selected)md.comp.button.filled.selected.hovered.state-layer.color | #FFFFFF md.comp.button.filled.selected.hovered.state-layer.color
|
Button filled hovered icon color - toggle (unselected)md.comp.button.filled.unselected.hovered.icon.color | #49454F md.comp.button.filled.unselected.hovered.icon.color
|
Button filled hovered label color - toggle (unselected)md.comp.button.filled.unselected.hovered.label-text.color | #49454F md.comp.button.filled.unselected.hovered.label-text.color
|
Button filled hovered container state layer color - toggle (unselected)md.comp.button.filled.unselected.hovered.state-layer.color | #49454F md.comp.button.filled.unselected.hovered.state-layer.color
|
Focused
| Token | Value |
|---|---|
Button filled focused container state layer elevationmd.comp.button.filled.focused.container.elevation | 0dp md.comp.button.filled.focused.container.elevation
|
Button filled focused icon colormd.comp.button.filled.focused.icon.color | #FFFFFF md.comp.button.filled.focused.icon.color
|
Button filled focused label colormd.comp.button.filled.focused.label-text.color | #FFFFFF md.comp.button.filled.focused.label-text.color
|
Button filled focused container state layer colormd.comp.button.filled.focused.state-layer.color | #FFFFFF md.comp.button.filled.focused.state-layer.color
|
Button filled focused container state layer opacitymd.comp.button.filled.focused.state-layer.opacity | 10% md.comp.button.filled.focused.state-layer.opacity
|
Button filled focused icon color - toggle (selected)md.comp.button.filled.selected.focused.icon.color | #FFFFFF md.comp.button.filled.selected.focused.icon.color
|
Button filled focused label color - toggle (selected)md.comp.button.filled.selected.focused.label-text.color | #FFFFFF md.comp.button.filled.selected.focused.label-text.color
|
Button filled focused container state layer color - toggle (selected)md.comp.button.filled.selected.focused.state-layer.color | #FFFFFF md.comp.button.filled.selected.focused.state-layer.color
|
Button filled focused icon color - toggle (unselected)md.comp.button.filled.unselected.focused.icon.color | #49454F md.comp.button.filled.unselected.focused.icon.color
|
Button filled focused label color - toggle (unselected)md.comp.button.filled.unselected.focused.label-text.color | #49454F md.comp.button.filled.unselected.focused.label-text.color
|
Button filled focused container state layer color - toggle (unselected)md.comp.button.filled.unselected.focused.state-layer.color | #49454F md.comp.button.filled.unselected.focused.state-layer.color
|
Pressed
| Token | Value |
|---|---|
Button filled pressed container state layer elevationmd.comp.button.filled.pressed.container.elevation | 0dp md.comp.button.filled.pressed.container.elevation
|
Button filled pressed icon colormd.comp.button.filled.pressed.icon.color | #FFFFFF md.comp.button.filled.pressed.icon.color
|
Button filled pressed label colormd.comp.button.filled.pressed.label-text.color | #FFFFFF md.comp.button.filled.pressed.label-text.color
|
Button filled pressed container state layer colormd.comp.button.filled.pressed.state-layer.color | #FFFFFF md.comp.button.filled.pressed.state-layer.color
|
Button filled pressed container state layer opacitymd.comp.button.filled.pressed.state-layer.opacity | 10% md.comp.button.filled.pressed.state-layer.opacity
|
Button filled pressed icon color - toggle (selected)md.comp.button.filled.selected.pressed.icon.color | #FFFFFF md.comp.button.filled.selected.pressed.icon.color
|
Button filled pressed label color - toggle (selected)md.comp.button.filled.selected.pressed.label-text.color | #FFFFFF md.comp.button.filled.selected.pressed.label-text.color
|
Button filled pressed container state layer color - toggle (selected)md.comp.button.filled.selected.pressed.state-layer.color | #FFFFFF md.comp.button.filled.selected.pressed.state-layer.color
|
Button filled pressed icon color - toggle (unselected)md.comp.button.filled.unselected.pressed.icon.color | #49454F md.comp.button.filled.unselected.pressed.icon.color
|
Button filled pressed label color - toggle (unselected)md.comp.button.filled.unselected.pressed.label-text.color | #49454F md.comp.button.filled.unselected.pressed.label-text.color
|
Button filled pressed container state layer color - toggle (unselected)md.comp.button.filled.unselected.pressed.state-layer.color | #49454F md.comp.button.filled.unselected.pressed.state-layer.color
|
Button - Color - Outlined
Enabled
| Token | Value |
|---|---|
Button outlined icon colormd.comp.button.outlined.icon.color | #49454F md.comp.button.outlined.icon.color
|
Button outlined label colormd.comp.button.outlined.label-text.color | #49454F md.comp.button.outlined.label-text.color
|
Button outlined outline colormd.comp.button.outlined.outline.color | #CAC4D0 md.comp.button.outlined.outline.color
|
Button outlined container color - toggle (selected)md.comp.button.outlined.selected.container.color | #322F35 md.comp.button.outlined.selected.container.color
|
Button outlined icon color - toggle (selected)md.comp.button.outlined.selected.icon.color | #F5EFF7 md.comp.button.outlined.selected.icon.color
|
Button outlined label color - toggle (selected)md.comp.button.outlined.selected.label-text.color | #F5EFF7 md.comp.button.outlined.selected.label-text.color
|
Button outlined icon color - toggle (unselected)md.comp.button.outlined.unselected.icon.color | #49454F md.comp.button.outlined.unselected.icon.color
|
Button outlined label color - toggle (unselected)md.comp.button.outlined.unselected.label-text.color | #49454F md.comp.button.outlined.unselected.label-text.color
|
Disabled
| Token | Value |
|---|---|
Button outlined disabled container opacitymd.comp.button.outlined.disabled.container.opacity | 10% md.comp.button.outlined.disabled.container.opacity |
Button outlined disabled icon colormd.comp.button.outlined.disabled.icon.color | #1D1B20 md.comp.button.outlined.disabled.icon.color
|
Button outlined disabled icon opacitymd.comp.button.outlined.disabled.icon.opacity | 38% md.comp.button.outlined.disabled.icon.opacity |
Button outlined disabled label colormd.comp.button.outlined.disabled.label-text.color | #1D1B20 md.comp.button.outlined.disabled.label-text.color
|
Button outlined disabled label opacitymd.comp.button.outlined.disabled.label-text.opacity | 38% md.comp.button.outlined.disabled.label-text.opacity |
Button outlined disabled outline colormd.comp.button.outlined.disabled.outline.color | #CAC4D0 md.comp.button.outlined.disabled.outline.color
|
Button outlined disabled container color (selected)md.comp.button.outlined.selected.disabled.container.color | #1D1B20 md.comp.button.outlined.selected.disabled.container.color
|
Button outlined disabled outline color (unselected)md.comp.button.outlined.unselected.disabled.outline.color | #CAC4D0 md.comp.button.outlined.unselected.disabled.outline.color
|
Hovered
| Token | Value |
|---|---|
Button outlined hovered icon colormd.comp.button.outlined.hovered.icon.color | #49454F md.comp.button.outlined.hovered.icon.color
|
Button outlined hovered label colormd.comp.button.outlined.hovered.label-text.color | #49454F md.comp.button.outlined.hovered.label-text.color
|
Button outlined hovered outline colormd.comp.button.outlined.hovered.outline.color | #CAC4D0 md.comp.button.outlined.hovered.outline.color
|
Button outlined hovered state layer colormd.comp.button.outlined.hovered.state-layer.color | #49454F md.comp.button.outlined.hovered.state-layer.color
|
Button outlined hovered state layer opacitymd.comp.button.outlined.hovered.state-layer.opacity | 8% md.comp.button.outlined.hovered.state-layer.opacity
|
Button outlined hovered icon color - toggle (selected)md.comp.button.outlined.selected.hovered.icon.color | #F5EFF7 md.comp.button.outlined.selected.hovered.icon.color
|
Button outlined hovered label color - toggle (selected)md.comp.button.outlined.selected.hovered.label-text.color | #F5EFF7 md.comp.button.outlined.selected.hovered.label-text.color
|
Button outlined hovered state layer color - toggle (selected)md.comp.button.outlined.selected.hovered.state-layer.color | #F5EFF7 md.comp.button.outlined.selected.hovered.state-layer.color
|
Button outlined hovered icon color - toggle (unselected)md.comp.button.outlined.unselected.hovered.icon.color | #49454F md.comp.button.outlined.unselected.hovered.icon.color
|
Button outlined hovered label color - toggle (unselected)md.comp.button.outlined.unselected.hovered.label-text.color | #49454F md.comp.button.outlined.unselected.hovered.label-text.color
|
Button outlined hovered outline color - toggle (unselected)md.comp.button.outlined.unselected.hovered.outline.color | #CAC4D0 md.comp.button.outlined.unselected.hovered.outline.color
|
Button outlined hovered state layer color - toggle (unselected)md.comp.button.outlined.unselected.hovered.state-layer.color | #49454F md.comp.button.outlined.unselected.hovered.state-layer.color
|
Focused
| Token | Value |
|---|---|
Button outlined focused icon colormd.comp.button.outlined.focused.icon.color | #49454F md.comp.button.outlined.focused.icon.color
|
Button outlined focused label colormd.comp.button.outlined.focused.label-text.color | #49454F md.comp.button.outlined.focused.label-text.color
|
Button outlined focused outline colormd.comp.button.outlined.focused.outline.color | #CAC4D0 md.comp.button.outlined.focused.outline.color
|
Button outlined focused container state layer colormd.comp.button.outlined.focused.state-layer.color | #49454F md.comp.button.outlined.focused.state-layer.color
|
Button outlined focused container state layer opacitymd.comp.button.outlined.focused.state-layer.opacity | 10% md.comp.button.outlined.focused.state-layer.opacity
|
Button outlined focused icon color - toggle (selected)md.comp.button.outlined.selected.focused.icon.color | #F5EFF7 md.comp.button.outlined.selected.focused.icon.color
|
Button outlined focused label color - toggle (selected)md.comp.button.outlined.selected.focused.label-text.color | #F5EFF7 md.comp.button.outlined.selected.focused.label-text.color
|
Button outlined focused container state layer color - toggle (selected)md.comp.button.outlined.selected.focused.state-layer.color | #F5EFF7 md.comp.button.outlined.selected.focused.state-layer.color
|
Button outlined focused icon color - toggle (unselected)md.comp.button.outlined.unselected.focused.icon.color | #49454F md.comp.button.outlined.unselected.focused.icon.color
|
Button outlined focused label color - toggle (unselected)md.comp.button.outlined.unselected.focused.label-text.color | #49454F md.comp.button.outlined.unselected.focused.label-text.color
|
Button outlined focused outline color - toggle (unselected)md.comp.button.outlined.unselected.focused.outline.color | #CAC4D0 md.comp.button.outlined.unselected.focused.outline.color
|
Button outlined focused container state layer color - toggle (unselected)md.comp.button.outlined.unselected.focused.state-layer.color | #49454F md.comp.button.outlined.unselected.focused.state-layer.color
|
Pressed
| Token | Value |
|---|---|
Button outlined pressed icon colormd.comp.button.outlined.pressed.icon.color | #49454F md.comp.button.outlined.pressed.icon.color
|
Button outlined pressed label colormd.comp.button.outlined.pressed.label-text.color | #49454F md.comp.button.outlined.pressed.label-text.color
|
Button outlined pressed outline colormd.comp.button.outlined.pressed.outline.color | #CAC4D0 md.comp.button.outlined.pressed.outline.color
|
Button outlined pressed container state layer colormd.comp.button.outlined.pressed.state-layer.color | #49454F md.comp.button.outlined.pressed.state-layer.color
|
Button outlined pressed container state layer opacitymd.comp.button.outlined.pressed.state-layer.opacity | 10% md.comp.button.outlined.pressed.state-layer.opacity
|
Button outlined pressed icon color - toggle (selected)md.comp.button.outlined.selected.pressed.icon.color | #F5EFF7 md.comp.button.outlined.selected.pressed.icon.color
|
Button outlined pressed label color - toggle (selected)md.comp.button.outlined.selected.pressed.label-text.color | #F5EFF7 md.comp.button.outlined.selected.pressed.label-text.color
|
Button outlined pressed container state layer color - toggle (selected)md.comp.button.outlined.selected.pressed.state-layer.color | #F5EFF7 md.comp.button.outlined.selected.pressed.state-layer.color
|
Button outlined pressed icon color - toggle (unselected)md.comp.button.outlined.unselected.pressed.icon.color | #49454F md.comp.button.outlined.unselected.pressed.icon.color
|
Button outlined pressed label color - toggle (unselected)md.comp.button.outlined.unselected.pressed.label-text.color | #49454F md.comp.button.outlined.unselected.pressed.label-text.color
|
Button outlined pressed outline color - toggle (unselected)md.comp.button.outlined.unselected.pressed.outline.color | #CAC4D0 md.comp.button.outlined.unselected.pressed.outline.color
|
Button outlined pressed container state layer color - toggle (unselected)md.comp.button.outlined.unselected.pressed.state-layer.color | #49454F md.comp.button.outlined.unselected.pressed.state-layer.color
|
Button - Color - Tonal
Enabled
| Token | Value |
|---|---|
Button tonal container colormd.comp.button.tonal.container.color | #E8DEF8 md.comp.button.tonal.container.color
|
Button tonal elevationmd.comp.button.tonal.container.elevation | 0dp md.comp.button.tonal.container.elevation
|
Button tonal shadow colormd.comp.button.tonal.container.shadow-color | #000000 md.comp.button.tonal.container.shadow-color
|
Button tonal icon colormd.comp.button.tonal.icon.color | #4A4458 md.comp.button.tonal.icon.color
|
Button tonal label colormd.comp.button.tonal.label-text.color | #4A4458 md.comp.button.tonal.label-text.color
|
Button tonal container color - toggle (selected)md.comp.button.tonal.selected.container.color | #625B71 md.comp.button.tonal.selected.container.color
|
Button tonal icon color - toggle (selected)md.comp.button.tonal.selected.icon.color | #FFFFFF md.comp.button.tonal.selected.icon.color
|
Button tonal label color - toggle (selected)md.comp.button.tonal.selected.label-text.color | #FFFFFF md.comp.button.tonal.selected.label-text.color
|
Button tonal container color - toggle (unselected)md.comp.button.tonal.unselected.container.color | #E8DEF8 md.comp.button.tonal.unselected.container.color
|
Button tonal icon color - toggle (unselected)md.comp.button.tonal.unselected.icon.color | #4A4458 md.comp.button.tonal.unselected.icon.color
|
Button tonal label color - toggle (unselected)md.comp.button.tonal.unselected.label-text.color | #4A4458 md.comp.button.tonal.unselected.label-text.color
|
Disabled
| Token | Value |
|---|---|
Button tonal disabled container colormd.comp.button.tonal.disabled.container.color | #1D1B20 md.comp.button.tonal.disabled.container.color
|
Button tonal disabled container elevationmd.comp.button.tonal.disabled.container.elevation | 0dp md.comp.button.tonal.disabled.container.elevation
|
Button tonal disabled container opacitymd.comp.button.tonal.disabled.container.opacity | 10% md.comp.button.tonal.disabled.container.opacity |
Button tonal disabled icon colormd.comp.button.tonal.disabled.icon.color | #1D1B20 md.comp.button.tonal.disabled.icon.color
|
Button tonal disabled icon opacitymd.comp.button.tonal.disabled.icon.opacity | 38% md.comp.button.tonal.disabled.icon.opacity |
Button tonal disabled label colormd.comp.button.tonal.disabled.label-text.color | #1D1B20 md.comp.button.tonal.disabled.label-text.color
|
Button tonal disabled label opacitymd.comp.button.tonal.disabled.label-text.opacity | 38% md.comp.button.tonal.disabled.label-text.opacity |
Hovered
| Token | Value |
|---|---|
Button tonal hovered container elevationmd.comp.button.tonal.hovered.container.elevation | 1dp md.comp.button.tonal.hovered.container.elevation
|
Button tonal hovered icon colormd.comp.button.tonal.hovered.icon.color | #4A4458 md.comp.button.tonal.hovered.icon.color
|
Button tonal hovered label colormd.comp.button.tonal.hovered.label-text.color | #4A4458 md.comp.button.tonal.hovered.label-text.color
|
Button tonal hovered container state layer colormd.comp.button.tonal.hovered.state-layer.color | #4A4458 md.comp.button.tonal.hovered.state-layer.color
|
Button tonal hovered container state layer opacitymd.comp.button.tonal.hovered.state-layer.opacity | 8% md.comp.button.tonal.hovered.state-layer.opacity
|
Button tonal hovered icon color - toggle (selected)md.comp.button.tonal.selected.hovered.icon.color | #FFFFFF md.comp.button.tonal.selected.hovered.icon.color
|
Button tonal hovered label color - toggle (selected)md.comp.button.tonal.selected.hovered.label-text.color | #FFFFFF md.comp.button.tonal.selected.hovered.label-text.color
|
Button tonal hovered container state layer color - toggle (selected)md.comp.button.tonal.selected.hovered.state-layer.color | #FFFFFF md.comp.button.tonal.selected.hovered.state-layer.color
|
Button tonal hovered icon color - toggle (unselected)md.comp.button.tonal.unselected.hovered.icon.color | #4A4458 md.comp.button.tonal.unselected.hovered.icon.color
|
Button tonal hovered label color - toggle (unselected)md.comp.button.tonal.unselected.hovered.label-text.color | #4A4458 md.comp.button.tonal.unselected.hovered.label-text.color
|
Button tonal hovered container state layer color - toggle (unselected)md.comp.button.tonal.unselected.hovered.state-layer.color | #4A4458 md.comp.button.tonal.unselected.hovered.state-layer.color
|
Focused
| Token | Value |
|---|---|
Button tonal focused container state layer elevationmd.comp.button.tonal.focused.container.elevation | 0dp md.comp.button.tonal.focused.container.elevation
|
Button tonal focused icon colormd.comp.button.tonal.focused.icon.color | #4A4458 md.comp.button.tonal.focused.icon.color
|
Button tonal focused label colormd.comp.button.tonal.focused.label-text.color | #4A4458 md.comp.button.tonal.focused.label-text.color
|
Button tonal focused container state layer colormd.comp.button.tonal.focused.state-layer.color | #4A4458 md.comp.button.tonal.focused.state-layer.color
|
Button tonal focused container state layer opacitymd.comp.button.tonal.focused.state-layer.opacity | 10% md.comp.button.tonal.focused.state-layer.opacity
|
Button tonal focused icon color - toggle (selected)md.comp.button.tonal.selected.focused.icon.color | #FFFFFF md.comp.button.tonal.selected.focused.icon.color
|
Button tonal focused label color - toggle (selected)md.comp.button.tonal.selected.focused.label-text.color | #FFFFFF md.comp.button.tonal.selected.focused.label-text.color
|
Button tonal focused container state layer color - toggle (selected)md.comp.button.tonal.selected.focused.state-layer.color | #FFFFFF md.comp.button.tonal.selected.focused.state-layer.color
|
Button tonal focused icon color - toggle (unselected)md.comp.button.tonal.unselected.focused.icon.color | #4A4458 md.comp.button.tonal.unselected.focused.icon.color
|
Button tonal focused label color - toggle (unselected)md.comp.button.tonal.unselected.focused.label-text.color | #4A4458 md.comp.button.tonal.unselected.focused.label-text.color
|
Button tonal focused container state layer color - toggle (unselected)md.comp.button.tonal.unselected.focused.state-layer.color | #4A4458 md.comp.button.tonal.unselected.focused.state-layer.color
|
Pressed
| Token | Value |
|---|---|
Button tonal pressed container state layer elevationmd.comp.button.tonal.pressed.container.elevation | 0dp md.comp.button.tonal.pressed.container.elevation
|
Button tonal pressed icon colormd.comp.button.tonal.pressed.icon.color | #4A4458 md.comp.button.tonal.pressed.icon.color
|
Button tonal pressed label colormd.comp.button.tonal.pressed.label-text.color | #4A4458 md.comp.button.tonal.pressed.label-text.color
|
Button tonal pressed container state layer colormd.comp.button.tonal.pressed.state-layer.color | #4A4458 md.comp.button.tonal.pressed.state-layer.color
|
Button tonal pressed container state layer opacitymd.comp.button.tonal.pressed.state-layer.opacity | 10% md.comp.button.tonal.pressed.state-layer.opacity
|
Button tonal pressed icon color - toggle (selected)md.comp.button.tonal.selected.pressed.icon.color | #FFFFFF md.comp.button.tonal.selected.pressed.icon.color
|
Button tonal pressed label color - toggle (selected)md.comp.button.tonal.selected.pressed.label-text.color | #FFFFFF md.comp.button.tonal.selected.pressed.label-text.color
|
Button tonal pressed container state layer color - toggle (selected)md.comp.button.tonal.selected.pressed.state-layer.color | #FFFFFF md.comp.button.tonal.selected.pressed.state-layer.color
|
Button tonal pressed icon color - toggle (unselected)md.comp.button.tonal.unselected.pressed.icon.color | #4A4458 md.comp.button.tonal.unselected.pressed.icon.color
|
Button tonal pressed label color - toggle (unselected)md.comp.button.tonal.unselected.pressed.label-text.color | #4A4458 md.comp.button.tonal.unselected.pressed.label-text.color
|
Button tonal pressed container state layer color - toggle (unselected)md.comp.button.tonal.unselected.pressed.state-layer.color | #4A4458 md.comp.button.tonal.unselected.pressed.state-layer.color
|
Split button - Size - Large
| Token | Value |
|---|---|
Split button large between spacemd.comp.split-button.large.between-space | 2dp md.comp.split-button.large.between-space
|
Split button large container heightmd.comp.split-button.large.container.height | 96dp md.comp.split-button.large.container.height |
Split button large container shapemd.comp.split-button.large.container.shape | Full md.comp.split-button.large.container.shape
|
Split button large inner corner sizemd.comp.split-button.large.inner-corner.corner-size | 8dp md.comp.split-button.large.inner-corner.corner-size
|
Split button large inner corner hovered sizemd.comp.split-button.large.inner-corner.hovered.corner-size | 20dp md.comp.split-button.large.inner-corner.hovered.corner-size
|
Split button large inner corner pressed sizemd.comp.split-button.large.inner-corner.pressed.corner-size | 20dp md.comp.split-button.large.inner-corner.pressed.corner-size
|
Split button large leading button leading spacemd.comp.split-button.large.leading-button.leading-space | 48dp md.comp.split-button.large.leading-button.leading-space
|
Split button large leading button trailing spacemd.comp.split-button.large.leading-button.trailing-space | 48dp md.comp.split-button.large.leading-button.trailing-space
|
Split button large trailing button icon sizemd.comp.split-button.large.trailing-button.icon.size | 38dp md.comp.split-button.large.trailing-button.icon.size |
Split button large trailing button inner corner selected sizemd.comp.split-button.large.trailing-button.inner-corner.selected.corner-size | No value specified (PERCENT) md.comp.split-button.large.trailing-button.inner-corner.selected.corner-size |
Split button large trailing button leading spacemd.comp.split-button.large.trailing-button.leading-space | 29dp md.comp.split-button.large.trailing-button.leading-space |
Split button large trailing button trailing spacemd.comp.split-button.large.trailing-button.trailing-space | 29dp md.comp.split-button.large.trailing-button.trailing-space |
Split button - Size - Medium
| Token | Value |
|---|---|
Split button medium between spacemd.comp.split-button.medium.between-space | 2dp md.comp.split-button.medium.between-space
|
Split button medium container heightmd.comp.split-button.medium.container.height | 56dp md.comp.split-button.medium.container.height |
Split button medium container shapemd.comp.split-button.medium.container.shape | Full md.comp.split-button.medium.container.shape
|
Split button medium inner corner sizemd.comp.split-button.medium.inner-corner.corner-size | 4dp md.comp.split-button.medium.inner-corner.corner-size
|
Split button medium inner corner hovered sizemd.comp.split-button.medium.inner-corner.hovered.corner-size | 12dp md.comp.split-button.medium.inner-corner.hovered.corner-size
|
Split button medium inner corner pressed sizemd.comp.split-button.medium.inner-corner.pressed.corner-size | 12dp md.comp.split-button.medium.inner-corner.pressed.corner-size
|
Split button medium leading button leading spacemd.comp.split-button.medium.leading-button.leading-space | 24dp md.comp.split-button.medium.leading-button.leading-space
|
Split button medium leading button trailing spacemd.comp.split-button.medium.leading-button.trailing-space | 24dp md.comp.split-button.medium.leading-button.trailing-space
|
Split button medium trailing button icon sizemd.comp.split-button.medium.trailing-button.icon.size | 26dp md.comp.split-button.medium.trailing-button.icon.size |
Split button medium trailing button inner corner selected sizemd.comp.split-button.medium.trailing-button.inner-corner.selected.corner-size | No value specified (PERCENT) md.comp.split-button.medium.trailing-button.inner-corner.selected.corner-size |
Split button medium trailing button leading spacemd.comp.split-button.medium.trailing-button.leading-space | 15dp md.comp.split-button.medium.trailing-button.leading-space |
Split button medium trailing button trailing spacemd.comp.split-button.medium.trailing-button.trailing-space | 15dp md.comp.split-button.medium.trailing-button.trailing-space |
Split button - Size - Small
| Token | Value |
|---|---|
Split button small between spacemd.comp.split-button.small.between-space | 2dp md.comp.split-button.small.between-space
|
Split button small container heightmd.comp.split-button.small.container.height | 40dp md.comp.split-button.small.container.height |
Split button small container shapemd.comp.split-button.small.container.shape | Full md.comp.split-button.small.container.shape
|
Split button small inner corner sizemd.comp.split-button.small.inner-corner.corner-size | 4dp md.comp.split-button.small.inner-corner.corner-size
|
Split button small inner corner hovered sizemd.comp.split-button.small.inner-corner.hovered.corner-size | 12dp md.comp.split-button.small.inner-corner.hovered.corner-size
|
Split button small inner corner pressed sizemd.comp.split-button.small.inner-corner.pressed.corner-size | 12dp md.comp.split-button.small.inner-corner.pressed.corner-size
|
Split button small leading button leading spacemd.comp.split-button.small.leading-button.leading-space | 16dp md.comp.split-button.small.leading-button.leading-space
|
Split button small leading button trailing spacemd.comp.split-button.small.leading-button.trailing-space | 12dp md.comp.split-button.small.leading-button.trailing-space
|
Split button small trailing button icon sizemd.comp.split-button.small.trailing-button.icon.size | 22dp md.comp.split-button.small.trailing-button.icon.size |
Split button small trailing button inner corner selected sizemd.comp.split-button.small.trailing-button.inner-corner.selected.corner-size | No value specified (PERCENT) md.comp.split-button.small.trailing-button.inner-corner.selected.corner-size |
Split button small trailing button leading spacemd.comp.split-button.small.trailing-button.leading-space | 13dp md.comp.split-button.small.trailing-button.leading-space |
Split button small trailing button trailing spacemd.comp.split-button.small.trailing-button.trailing-space | 13dp md.comp.split-button.small.trailing-button.trailing-space |
Split button - Size - Xlarge
| Token | Value |
|---|---|
Split button xlarge between spacemd.comp.split-button.xlarge.between-space | 2dp md.comp.split-button.xlarge.between-space
|
Split button xlarge container heightmd.comp.split-button.xlarge.container.height | 136dp md.comp.split-button.xlarge.container.height |
Split button xlarge container shapemd.comp.split-button.xlarge.container.shape | Full md.comp.split-button.xlarge.container.shape
|
Split button xlarge inner corner sizemd.comp.split-button.xlarge.inner-corner.corner-size | 12dp md.comp.split-button.xlarge.inner-corner.corner-size
|
Split button xlarge inner corner hovered sizemd.comp.split-button.xlarge.inner-corner.hovered.corner-size | 20dp md.comp.split-button.xlarge.inner-corner.hovered.corner-size
|
Split button xlarge inner corner pressed sizemd.comp.split-button.xlarge.inner-corner.pressed.corner-size | 20dp md.comp.split-button.xlarge.inner-corner.pressed.corner-size
|
Split button xlarge leading button leading spacemd.comp.split-button.xlarge.leading-button.leading-space | 64dp md.comp.split-button.xlarge.leading-button.leading-space
|
Split button xlarge leading button trailing spacemd.comp.split-button.xlarge.leading-button.trailing-space | 64dp md.comp.split-button.xlarge.leading-button.trailing-space
|
Split button xlarge trailing button icon sizemd.comp.split-button.xlarge.trailing-button.icon.size | 50dp md.comp.split-button.xlarge.trailing-button.icon.size |
Split button xlarge trailing button inner corner selected sizemd.comp.split-button.xlarge.trailing-button.inner-corner.selected.corner-size | No value specified (PERCENT) md.comp.split-button.xlarge.trailing-button.inner-corner.selected.corner-size |
Split button xlarge trailing button leading spacemd.comp.split-button.xlarge.trailing-button.leading-space | 43dp md.comp.split-button.xlarge.trailing-button.leading-space |
Split button xlarge trailing button trailing spacemd.comp.split-button.xlarge.trailing-button.trailing-space | 43dp md.comp.split-button.xlarge.trailing-button.trailing-space |
Split button - Size - Xsmall
| Token | Value |
|---|---|
Split button xsmall between spacemd.comp.split-button.xsmall.between-space | 2dp md.comp.split-button.xsmall.between-space
|
Split button xsmall container heightmd.comp.split-button.xsmall.container.height | 32dp md.comp.split-button.xsmall.container.height |
Split button xsmall container shapemd.comp.split-button.xsmall.container.shape | Full md.comp.split-button.xsmall.container.shape
|
Split button xsmall inner corner sizemd.comp.split-button.xsmall.inner-corner.corner-size | 4dp md.comp.split-button.xsmall.inner-corner.corner-size
|
Split button xsmall inner corner hovered sizemd.comp.split-button.xsmall.inner-corner.hovered.corner-size | 8dp md.comp.split-button.xsmall.inner-corner.hovered.corner-size
|
Split button xsmall inner corner pressed sizemd.comp.split-button.xsmall.inner-corner.pressed.corner-size | 8dp md.comp.split-button.xsmall.inner-corner.pressed.corner-size
|
Split button xsmall leading button leading spacemd.comp.split-button.xsmall.leading-button.leading-space | 12dp md.comp.split-button.xsmall.leading-button.leading-space
|
Split button xsmall leading button trailing spacemd.comp.split-button.xsmall.leading-button.trailing-space | 10dp md.comp.split-button.xsmall.leading-button.trailing-space
|
Split button xsmall outer corner sizemd.comp.split-button.xsmall.outer-corner.corner-size | No value specified (PERCENT) md.comp.split-button.xsmall.outer-corner.corner-size |
Split button xsmall trailing button icon sizemd.comp.split-button.xsmall.trailing-button.icon.size | 22dp md.comp.split-button.xsmall.trailing-button.icon.size |
Split button xsmall trailing button inner corner selected sizemd.comp.split-button.xsmall.trailing-button.inner-corner.selected.corner-size | No value specified (PERCENT) md.comp.split-button.xsmall.trailing-button.inner-corner.selected.corner-size |
Split button xsmall trailing button leading spacemd.comp.split-button.xsmall.trailing-button.leading-space | 13dp md.comp.split-button.xsmall.trailing-button.leading-space |
Split button xsmall trailing button trailing spacemd.comp.split-button.xsmall.trailing-button.trailing-space | 13dp md.comp.split-button.xsmall.trailing-button.trailing-space |