Material Design 3 "Button" tokens: All tokens
Preview
Browse tokens
Color
Button (baseline)
Enabled
| Token | Value |
|---|---|
Button container colormd.comp.button.container.color | #6750A4 md.comp.button.container.color
|
Button elevationmd.comp.button.container.elevation | 0dp md.comp.button.container.elevation
|
Button container heightmd.comp.button.container.height | 40dp md.comp.button.container.height |
Button shadow colormd.comp.button.container.shadow-color | #000000 md.comp.button.container.shadow-color
|
Button shape roundmd.comp.button.container.shape.round | Full md.comp.button.container.shape.round
|
Button shape squaremd.comp.button.container.shape.square | 12dp md.comp.button.container.shape.square
|
Button focus ring indicator colormd.comp.button.focus.indicator.color | #625B71 md.comp.button.focus.indicator.color
|
Button focus ring outline offsetmd.comp.button.focus.indicator.outline.offset | 2dp md.comp.button.focus.indicator.outline.offset
|
Button focus ring indicator thicknessmd.comp.button.focus.indicator.thickness | 3dp md.comp.button.focus.indicator.thickness
|
Button between icon label spacemd.comp.button.icon-label-space | 8dp md.comp.button.icon-label-space
|
Button icon colormd.comp.button.icon.color | #FFFFFF md.comp.button.icon.color
|
Button icon sizemd.comp.button.icon.size | 20dp md.comp.button.icon.size |
Button label sizemd.comp.button.label-text | Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt md.comp.button.label-text
|
Button label colormd.comp.button.label-text.color | #FFFFFF md.comp.button.label-text.color
|
Button label color - toggle (selected)md.comp.button.label-text.selected.color | #FFFFFF md.comp.button.label-text.selected.color
|
Button label color - toggle (unselected)md.comp.button.label-text.unselected.color | #49454F md.comp.button.label-text.unselected.color
|
Button leading spacemd.comp.button.leading-space | 24dp md.comp.button.leading-space
|
Button shape spring animation dampingmd.comp.button.pressed.container.corner-size.motion.spring.damping | Numeric: 0.6 md.comp.button.pressed.container.corner-size.motion.spring.damping
|
Button shape spring animation stiffnessmd.comp.button.pressed.container.corner-size.motion.spring.stiffness | Numeric: 800 md.comp.button.pressed.container.corner-size.motion.spring.stiffness
|
Button shape pressed morphmd.comp.button.pressed.container.shape | 8dp md.comp.button.pressed.container.shape
|
Button container color - toggle (selected)md.comp.button.selected.container.color | #6750A4 md.comp.button.selected.container.color
|
Button selected container shape roundmd.comp.button.selected.container.shape.round | 12dp md.comp.button.selected.container.shape.round
|
Button selected container shape squaremd.comp.button.selected.container.shape.square | Full md.comp.button.selected.container.shape.square
|
Button icon color - toggle (selected)md.comp.button.selected.icon.color | #FFFFFF md.comp.button.selected.icon.color
|
Button trailing spacemd.comp.button.trailing-space | 24dp md.comp.button.trailing-space
|
Button container color - toggle (unselected)md.comp.button.unselected.container.color | #F3EDF7 md.comp.button.unselected.container.color
|
Button icon color - toggle (unselected)md.comp.button.unselected.icon.color | #49454F md.comp.button.unselected.icon.color
|
Disabled
| Token | Value |
|---|---|
Button disabled container colormd.comp.button.disabled.container.color | #1D1B20 md.comp.button.disabled.container.color
|
Button disabled container elevationmd.comp.button.disabled.container.elevation | 0dp md.comp.button.disabled.container.elevation
|
Button disabled container opacitymd.comp.button.disabled.container.opacity | 10% md.comp.button.disabled.container.opacity |
Button disabled icon colormd.comp.button.disabled.icon.color | #1D1B20 md.comp.button.disabled.icon.color
|
Button disabled icon opacitymd.comp.button.disabled.icon.opacity | 38% md.comp.button.disabled.icon.opacity |
Button disabled label colormd.comp.button.disabled.label-text.color | #1D1B20 md.comp.button.disabled.label-text.color
|
Button disabled label opacitymd.comp.button.disabled.label-text.opacity | 38% md.comp.button.disabled.label-text.opacity |
Hovered
| Token | Value |
|---|---|
Button hovered container elevationmd.comp.button.hovered.container.elevation | 1dp md.comp.button.hovered.container.elevation
|
Button hovered icon colormd.comp.button.hovered.icon.color | #FFFFFF md.comp.button.hovered.icon.color
|
Button hovered label colormd.comp.button.hovered.label-text.color | #FFFFFF md.comp.button.hovered.label-text.color
|
Button hovered container state layer colormd.comp.button.hovered.state-layer.color | #FFFFFF md.comp.button.hovered.state-layer.color
|
Button hovered container state layer opacitymd.comp.button.hovered.state-layer.opacity | 8% md.comp.button.hovered.state-layer.opacity
|
Button hovered icon color - toggle (selected)md.comp.button.selected.hovered.icon.color | #FFFFFF md.comp.button.selected.hovered.icon.color
|
Button hovered label color - toggle (selected)md.comp.button.selected.hovered.label-text.color | #FFFFFF md.comp.button.selected.hovered.label-text.color
|
Button hovered container state layer color - toggle (selected)md.comp.button.selected.hovered.state-layer.color | #FFFFFF md.comp.button.selected.hovered.state-layer.color
|
Button hovered icon color - toggle (unselected)md.comp.button.unselected.hovered.icon.color | #49454F md.comp.button.unselected.hovered.icon.color
|
Button hovered label color - toggle (unselected)md.comp.button.unselected.hovered.label-text.color | #49454F md.comp.button.unselected.hovered.label-text.color
|
Button hovered container state layer color - toggle (unselected)md.comp.button.unselected.hovered.state-layer.color | #49454F md.comp.button.unselected.hovered.state-layer.color
|
Focused
| Token | Value |
|---|---|
Button focused container state layer elevationmd.comp.button.focused.container.elevation | 0dp md.comp.button.focused.container.elevation
|
Button focused icon colormd.comp.button.focused.icon.color | #FFFFFF md.comp.button.focused.icon.color
|
Button focused label colormd.comp.button.focused.label-text.color | #FFFFFF md.comp.button.focused.label-text.color
|
Button focused container state layer colormd.comp.button.focused.state-layer.color | #FFFFFF md.comp.button.focused.state-layer.color
|
Button focused container state layer opacitymd.comp.button.focused.state-layer.opacity | 10% md.comp.button.focused.state-layer.opacity
|
Button focused icon color - toggle (selected)md.comp.button.selected.focused.icon.color | #FFFFFF md.comp.button.selected.focused.icon.color
|
Button focused label color - toggle (selected)md.comp.button.selected.focused.label-text.color | #FFFFFF md.comp.button.selected.focused.label-text.color
|
Button focused container state layer color - toggle (selected)md.comp.button.selected.focused.state-layer.color | #FFFFFF md.comp.button.selected.focused.state-layer.color
|
Button focused icon color - toggle (unselected)md.comp.button.unselected.focused.icon.color | #49454F md.comp.button.unselected.focused.icon.color
|
Button focused label color - toggle (unselected)md.comp.button.unselected.focused.label-text.color | #49454F md.comp.button.unselected.focused.label-text.color
|
Button focused container state layer color - toggle (unselected)md.comp.button.unselected.focused.state-layer.color | #49454F md.comp.button.unselected.focused.state-layer.color
|
Pressed
| Token | Value |
|---|---|
Button pressed container state layer elevationmd.comp.button.pressed.container.elevation | 0dp md.comp.button.pressed.container.elevation
|
Button pressed icon colormd.comp.button.pressed.icon.color | #FFFFFF md.comp.button.pressed.icon.color
|
Button pressed label colormd.comp.button.pressed.label-text.color | #FFFFFF md.comp.button.pressed.label-text.color
|
Button pressed container state layer colormd.comp.button.pressed.state-layer.color | #FFFFFF md.comp.button.pressed.state-layer.color
|
Button pressed container state layer opacitymd.comp.button.pressed.state-layer.opacity | 10% md.comp.button.pressed.state-layer.opacity
|
Button pressed icon color - toggle (selected)md.comp.button.selected.pressed.icon.color | #FFFFFF md.comp.button.selected.pressed.icon.color
|
Button pressed label color - toggle (selected)md.comp.button.selected.pressed.label-text.color | #FFFFFF md.comp.button.selected.pressed.label-text.color
|
Button pressed container state layer color - toggle (selected)md.comp.button.selected.pressed.state-layer.color | #FFFFFF md.comp.button.selected.pressed.state-layer.color
|
Button pressed icon color - toggle (unselected)md.comp.button.unselected.pressed.icon.color | #49454F md.comp.button.unselected.pressed.icon.color
|
Button pressed label color - toggle (unselected)md.comp.button.unselected.pressed.label-text.color | #49454F md.comp.button.unselected.pressed.label-text.color
|
Button pressed container state layer color - toggle (unselected)md.comp.button.unselected.pressed.state-layer.color | #49454F md.comp.button.unselected.pressed.state-layer.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 - Size - Large
| Token | Value |
|---|---|
Button large container heightmd.comp.button.large.container.height | 96dp md.comp.button.large.container.height |
Button large shape roundmd.comp.button.large.container.shape.round | Full md.comp.button.large.container.shape.round
|
Button large shape squaremd.comp.button.large.container.shape.square | 28dp md.comp.button.large.container.shape.square
|
Button large between icon label spacemd.comp.button.large.icon-label-space | 12dp md.comp.button.large.icon-label-space
|
Button large icon sizemd.comp.button.large.icon.size | 32dp md.comp.button.large.icon.size |
Button large label sizemd.comp.button.large.label-text | Roboto · 24pt · weight 400 · line height 32pt · tracking 0pt md.comp.button.large.label-text
|
Button large leading spacemd.comp.button.large.leading-space | 48dp md.comp.button.large.leading-space
|
Button large outline widthmd.comp.button.large.outlined.outline.width | 2dp md.comp.button.large.outlined.outline.width |
Button large shape spring animation dampingmd.comp.button.large.pressed.container.corner-size.motion.spring.damping | Numeric: 0.6 md.comp.button.large.pressed.container.corner-size.motion.spring.damping
|
Button large shape spring animation stiffnessmd.comp.button.large.pressed.container.corner-size.motion.spring.stiffness | Numeric: 800 md.comp.button.large.pressed.container.corner-size.motion.spring.stiffness
|
Button large shape pressed morphmd.comp.button.large.pressed.container.shape | 16dp md.comp.button.large.pressed.container.shape
|
Button large selected container shape roundmd.comp.button.large.selected.container.shape.round | 28dp md.comp.button.large.selected.container.shape.round
|
Button large selected container shape squaremd.comp.button.large.selected.container.shape.square | Full md.comp.button.large.selected.container.shape.square
|
Button large trailing spacemd.comp.button.large.trailing-space | 48dp md.comp.button.large.trailing-space
|
Button - Size - Medium
| Token | Value |
|---|---|
Button medium container heightmd.comp.button.medium.container.height | 56dp md.comp.button.medium.container.height |
Button medium shape roundmd.comp.button.medium.container.shape.round | Full md.comp.button.medium.container.shape.round
|
Button medium shape squaremd.comp.button.medium.container.shape.square | 16dp md.comp.button.medium.container.shape.square
|
Button medium between icon label spacemd.comp.button.medium.icon-label-space | 8dp md.comp.button.medium.icon-label-space
|
Button medium icon sizemd.comp.button.medium.icon.size | 24dp md.comp.button.medium.icon.size |
Button medium label sizemd.comp.button.medium.label-text | Roboto · 16pt · weight 500 · line height 24pt · tracking 0.15pt md.comp.button.medium.label-text
|
Button medium leading spacemd.comp.button.medium.leading-space | 24dp md.comp.button.medium.leading-space
|
Button medium outline widthmd.comp.button.medium.outlined.outline.width | 1dp md.comp.button.medium.outlined.outline.width |
Button medium shape spring animation dampingmd.comp.button.medium.pressed.container.corner-size.motion.spring.damping | Numeric: 0.6 md.comp.button.medium.pressed.container.corner-size.motion.spring.damping
|
Button medium shape spring animation stiffnessmd.comp.button.medium.pressed.container.corner-size.motion.spring.stiffness | Numeric: 800 md.comp.button.medium.pressed.container.corner-size.motion.spring.stiffness
|
Button medium shape pressed morphmd.comp.button.medium.pressed.container.shape | 12dp md.comp.button.medium.pressed.container.shape
|
Button medium selected container shape roundmd.comp.button.medium.selected.container.shape.round | 16dp md.comp.button.medium.selected.container.shape.round
|
Button medium selected container shape squaremd.comp.button.medium.selected.container.shape.square | Full md.comp.button.medium.selected.container.shape.square
|
Button medium trailing spacemd.comp.button.medium.trailing-space | 24dp md.comp.button.medium.trailing-space
|
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 - Size - Small
| Token | Value |
|---|---|
Button small container heightmd.comp.button.small.container.height | 40dp md.comp.button.small.container.height |
Button small shape roundmd.comp.button.small.container.shape.round | Full md.comp.button.small.container.shape.round
|
Button small shape squaremd.comp.button.small.container.shape.square | 12dp md.comp.button.small.container.shape.square
|
Button small between icon label spacemd.comp.button.small.icon-label-space | 8dp md.comp.button.small.icon-label-space
|
Button small icon sizemd.comp.button.small.icon.size | 20dp md.comp.button.small.icon.size |
Button small label sizemd.comp.button.small.label-text | Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt md.comp.button.small.label-text
|
Button small leading spacemd.comp.button.small.leading-space | 16dp md.comp.button.small.leading-space
|
Button small outline widthmd.comp.button.small.outlined.outline.width | 1dp md.comp.button.small.outlined.outline.width |
Button small shape spring animation dampingmd.comp.button.small.pressed.container.corner-size.motion.spring.damping | Numeric: 0.6 md.comp.button.small.pressed.container.corner-size.motion.spring.damping
|
Button small shape spring animation stiffnessmd.comp.button.small.pressed.container.corner-size.motion.spring.stiffness | Numeric: 800 md.comp.button.small.pressed.container.corner-size.motion.spring.stiffness
|
Button small shape pressed morphmd.comp.button.small.pressed.container.shape | 8dp md.comp.button.small.pressed.container.shape
|
Button small selected container shape roundmd.comp.button.small.selected.container.shape.round | 12dp md.comp.button.small.selected.container.shape.round
|
Button small selected container shape squaremd.comp.button.small.selected.container.shape.square | Full md.comp.button.small.selected.container.shape.square
|
Button small trailing spacemd.comp.button.small.trailing-space | 16dp md.comp.button.small.trailing-space
|
Button - Color - Text
Enabled
| Token | Value |
|---|---|
Button text icon colormd.comp.button.text.icon.color | #6750A4 md.comp.button.text.icon.color
|
Button text label colormd.comp.button.text.label-text.color | #6750A4 md.comp.button.text.label-text.color
|
Disabled
| Token | Value |
|---|---|
Button text disabled container colormd.comp.button.text.disabled.container.color | #1D1B20 md.comp.button.text.disabled.container.color
|
Button text disabled container opacitymd.comp.button.text.disabled.container.opacity | 10% md.comp.button.text.disabled.container.opacity |
Button text disabled icon colormd.comp.button.text.disabled.icon.color | #1D1B20 md.comp.button.text.disabled.icon.color
|
Button text disabled icon opacitymd.comp.button.text.disabled.icon.opacity | 38% md.comp.button.text.disabled.icon.opacity |
Button text disabled label colormd.comp.button.text.disabled.label-text.color | #1D1B20 md.comp.button.text.disabled.label-text.color
|
Button text disabled label opacitymd.comp.button.text.disabled.label-text.opacity | 38% md.comp.button.text.disabled.label-text.opacity |
Hovered
| Token | Value |
|---|---|
Button text hovered icon colormd.comp.button.text.hovered.icon.color | #6750A4 md.comp.button.text.hovered.icon.color
|
Button text hovered label colormd.comp.button.text.hovered.label-text.color | #6750A4 md.comp.button.text.hovered.label-text.color
|
Button text hovered state layer colormd.comp.button.text.hovered.state-layer.color | #6750A4 md.comp.button.text.hovered.state-layer.color
|
Button text hovered state layer opacitymd.comp.button.text.hovered.state-layer.opacity | 8% md.comp.button.text.hovered.state-layer.opacity
|
Focused
| Token | Value |
|---|---|
Button text focused icon colormd.comp.button.text.focused.icon.color | #6750A4 md.comp.button.text.focused.icon.color
|
Button text focused label colormd.comp.button.text.focused.label-text.color | #6750A4 md.comp.button.text.focused.label-text.color
|
Button text focused state layer colormd.comp.button.text.focused.state-layer.color | #6750A4 md.comp.button.text.focused.state-layer.color
|
Button text focused state layer opacitymd.comp.button.text.focused.state-layer.opacity | 10% md.comp.button.text.focused.state-layer.opacity
|
Pressed
| Token | Value |
|---|---|
Button text pressed icon colormd.comp.button.text.pressed.icon.color | #6750A4 md.comp.button.text.pressed.icon.color
|
Button text pressed label colormd.comp.button.text.pressed.label-text.color | #6750A4 md.comp.button.text.pressed.label-text.color
|
Button text pressed state layer colormd.comp.button.text.pressed.state-layer.color | #6750A4 md.comp.button.text.pressed.state-layer.color
|
Button text pressed state layer opacitymd.comp.button.text.pressed.state-layer.opacity | 10% md.comp.button.text.pressed.state-layer.opacity
|
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
|
Button - Size - Xlarge
| Token | Value |
|---|---|
Button xlarge container heightmd.comp.button.xlarge.container.height | 136dp md.comp.button.xlarge.container.height |
Button xlarge shape roundmd.comp.button.xlarge.container.shape.round | Full md.comp.button.xlarge.container.shape.round
|
Button xlarge shape squaremd.comp.button.xlarge.container.shape.square | 28dp md.comp.button.xlarge.container.shape.square
|
Button xlarge between icon label spacemd.comp.button.xlarge.icon-label-space | 16dp md.comp.button.xlarge.icon-label-space
|
Button xlarge icon sizemd.comp.button.xlarge.icon.size | 40dp md.comp.button.xlarge.icon.size |
Button xlarge label sizemd.comp.button.xlarge.label-text | Roboto · 32pt · weight 400 · line height 40pt · tracking 0pt md.comp.button.xlarge.label-text
|
Button xlarge leading spacemd.comp.button.xlarge.leading-space | 64dp md.comp.button.xlarge.leading-space
|
Button xlarge outline widthmd.comp.button.xlarge.outlined.outline.width | 3dp md.comp.button.xlarge.outlined.outline.width |
Button xlarge shape spring animation dampingmd.comp.button.xlarge.pressed.container.corner-size.motion.spring.damping | Numeric: 0.6 md.comp.button.xlarge.pressed.container.corner-size.motion.spring.damping
|
Button xlarge shape spring animation stiffnessmd.comp.button.xlarge.pressed.container.corner-size.motion.spring.stiffness | Numeric: 800 md.comp.button.xlarge.pressed.container.corner-size.motion.spring.stiffness
|
Button xlarge shape pressed morphmd.comp.button.xlarge.pressed.container.shape | 16dp md.comp.button.xlarge.pressed.container.shape
|
Button xlarge selected container shape roundmd.comp.button.xlarge.selected.container.shape.round | 28dp md.comp.button.xlarge.selected.container.shape.round
|
Button xlarge selected container shape squaremd.comp.button.xlarge.selected.container.shape.square | Full md.comp.button.xlarge.selected.container.shape.square
|
Button xlarge trailing spacemd.comp.button.xlarge.trailing-space | 64dp md.comp.button.xlarge.trailing-space
|
Button - Size - Xsmall
| Token | Value |
|---|---|
Button xsmall container heightmd.comp.button.xsmall.container.height | 32dp md.comp.button.xsmall.container.height |
Button xsmall shape roundmd.comp.button.xsmall.container.shape.round | Full md.comp.button.xsmall.container.shape.round
|
Button xsmall shape squaremd.comp.button.xsmall.container.shape.square | 12dp md.comp.button.xsmall.container.shape.square
|
Button xsmall between icon label spacemd.comp.button.xsmall.icon-label-space | 4dp md.comp.button.xsmall.icon-label-space
|
Button xsmall icon sizemd.comp.button.xsmall.icon.size | 20dp md.comp.button.xsmall.icon.size |
Button xsmall label sizemd.comp.button.xsmall.label-text | Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt md.comp.button.xsmall.label-text
|
Button xsmall leading spacemd.comp.button.xsmall.leading-space | 12dp md.comp.button.xsmall.leading-space |
Button xsmall outline widthmd.comp.button.xsmall.outlined.outline.width | 1dp md.comp.button.xsmall.outlined.outline.width |
Button xsmall shape spring animation dampingmd.comp.button.xsmall.pressed.container.corner-size.motion.spring.damping | Numeric: 0.6 md.comp.button.xsmall.pressed.container.corner-size.motion.spring.damping
|
Button xsmall shape spring animation stiffnessmd.comp.button.xsmall.pressed.container.corner-size.motion.spring.stiffness | Numeric: 800 md.comp.button.xsmall.pressed.container.corner-size.motion.spring.stiffness
|
Button xsmall shape pressed morphmd.comp.button.xsmall.pressed.container.shape | 8dp md.comp.button.xsmall.pressed.container.shape
|
Button xsmall selected container shape roundmd.comp.button.xsmall.selected.container.shape.round | 12dp md.comp.button.xsmall.selected.container.shape.round
|
Button xsmall selected container shape squaremd.comp.button.xsmall.selected.container.shape.square | Full md.comp.button.xsmall.selected.container.shape.square
|
Button xsmall trailing spacemd.comp.button.xsmall.trailing-space | 12dp md.comp.button.xsmall.trailing-space |
[Deprecated] Button - Tonal
[Deprecated] Enabled
[Deprecated] Container
| Token | Value |
|---|---|
Filled tonal button container colormd.comp.filled-tonal-button.container.color | #E8DEF8 md.comp.filled-tonal-button.container.color
|
Filled tonal button container elevationmd.comp.filled-tonal-button.container.elevation | 0dp md.comp.filled-tonal-button.container.elevation
|
Filled tonal button container heightmd.comp.filled-tonal-button.container.height | 40dp md.comp.filled-tonal-button.container.height |
Filled tonal button container shadow colormd.comp.filled-tonal-button.container.shadow-color | #000000 md.comp.filled-tonal-button.container.shadow-color
|
Filled tonal button container shapemd.comp.filled-tonal-button.container.shape | Full md.comp.filled-tonal-button.container.shape
|
[Deprecated] Label text
| Token | Value |
|---|---|
Filled tonal button label text colormd.comp.filled-tonal-button.label-text.color | #4A4458 md.comp.filled-tonal-button.label-text.color
|
Filled tonal button label text fontmd.comp.filled-tonal-button.label-text.font | Roboto md.comp.filled-tonal-button.label-text.font
|
Filled tonal button label text line heightmd.comp.filled-tonal-button.label-text.line-height | 20pt md.comp.filled-tonal-button.label-text.line-height
|
Filled tonal button label text sizemd.comp.filled-tonal-button.label-text.size | 14pt md.comp.filled-tonal-button.label-text.size
|
Filled tonal button label text trackingmd.comp.filled-tonal-button.label-text.tracking | 0.1pt md.comp.filled-tonal-button.label-text.tracking
|
Filled tonal button label text typemd.comp.filled-tonal-button.label-text.type | Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt md.comp.filled-tonal-button.label-text.type
|
Filled tonal button label text weightmd.comp.filled-tonal-button.label-text.weight | 500 md.comp.filled-tonal-button.label-text.weight
|
[Deprecated] Icon
| Token | Value |
|---|---|
Filled tonal button icon colormd.comp.filled-tonal-button.with-icon.icon.color | #4A4458 md.comp.filled-tonal-button.with-icon.icon.color
|
Filled tonal button icon sizemd.comp.filled-tonal-button.with-icon.icon.size | 18dp md.comp.filled-tonal-button.with-icon.icon.size |
[Deprecated] Disabled
[Deprecated] Container
| Token | Value |
|---|---|
Filled tonal button disabled container colormd.comp.filled-tonal-button.disabled.container.color | #1D1B20 md.comp.filled-tonal-button.disabled.container.color
|
Filled tonal button disabled container elevationmd.comp.filled-tonal-button.disabled.container.elevation | 0dp md.comp.filled-tonal-button.disabled.container.elevation
|
Filled tonal button disabled container opacitymd.comp.filled-tonal-button.disabled.container.opacity | 12% md.comp.filled-tonal-button.disabled.container.opacity |
[Deprecated] Label text
| Token | Value |
|---|---|
Filled tonal button disabled label text colormd.comp.filled-tonal-button.disabled.label-text.color | #1D1B20 md.comp.filled-tonal-button.disabled.label-text.color
|
Filled tonal button disabled label text opacitymd.comp.filled-tonal-button.disabled.label-text.opacity | 38% md.comp.filled-tonal-button.disabled.label-text.opacity |
[Deprecated] Icon
| Token | Value |
|---|---|
Filled tonal button disabled icon colormd.comp.filled-tonal-button.with-icon.disabled.icon.color | #1D1B20 md.comp.filled-tonal-button.with-icon.disabled.icon.color
|
Filled tonal button disabled icon opacitymd.comp.filled-tonal-button.with-icon.disabled.icon.opacity | 38% md.comp.filled-tonal-button.with-icon.disabled.icon.opacity |
[Deprecated] Hovered
[Deprecated] Container
| Token | Value |
|---|---|
Filled tonal button hover container elevationmd.comp.filled-tonal-button.hover.container.elevation | 1dp md.comp.filled-tonal-button.hover.container.elevation
|
[Deprecated] Label text
| Token | Value |
|---|---|
Filled tonal button hover label text colormd.comp.filled-tonal-button.hover.label-text.color | #4A4458 md.comp.filled-tonal-button.hover.label-text.color
|
[Deprecated] State layer
| Token | Value |
|---|---|
Filled tonal button hover state layer colormd.comp.filled-tonal-button.hover.state-layer.color | #4A4458 md.comp.filled-tonal-button.hover.state-layer.color
|
Filled tonal button hover state layer opacitymd.comp.filled-tonal-button.hover.state-layer.opacity | 8% md.comp.filled-tonal-button.hover.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
Filled tonal button hover icon colormd.comp.filled-tonal-button.with-icon.hover.icon.color | #4A4458 md.comp.filled-tonal-button.with-icon.hover.icon.color
|
[Deprecated] Focused
[Deprecated] Focus indicator
| Token | Value |
|---|---|
Filled tonal button focus indicator colormd.comp.filled-tonal-button.focus.indicator.color | #625B71 md.comp.filled-tonal-button.focus.indicator.color
|
Filled tonal button focus indicator offsetmd.comp.filled-tonal-button.focus.indicator.outline.offset | 2dp md.comp.filled-tonal-button.focus.indicator.outline.offset
|
Filled tonal button focus indicator thicknessmd.comp.filled-tonal-button.focus.indicator.thickness | 3dp md.comp.filled-tonal-button.focus.indicator.thickness
|
[Deprecated] Container
| Token | Value |
|---|---|
Filled tonal button focus container elevationmd.comp.filled-tonal-button.focus.container.elevation | 0dp md.comp.filled-tonal-button.focus.container.elevation
|
[Deprecated] Label text
| Token | Value |
|---|---|
Filled tonal button focus label text colormd.comp.filled-tonal-button.focus.label-text.color | #4A4458 md.comp.filled-tonal-button.focus.label-text.color
|
[Deprecated] State layer
| Token | Value |
|---|---|
Filled tonal button focus state layer colormd.comp.filled-tonal-button.focus.state-layer.color | #4A4458 md.comp.filled-tonal-button.focus.state-layer.color
|
Filled tonal button focus state layer opacitymd.comp.filled-tonal-button.focus.state-layer.opacity | 10% md.comp.filled-tonal-button.focus.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
Filled tonal button focus icon colormd.comp.filled-tonal-button.with-icon.focus.icon.color | #4A4458 md.comp.filled-tonal-button.with-icon.focus.icon.color
|
[Deprecated] Pressed (ripple)
[Deprecated] Container
| Token | Value |
|---|---|
Filled tonal button pressed container elevationmd.comp.filled-tonal-button.pressed.container.elevation | 0dp md.comp.filled-tonal-button.pressed.container.elevation
|
[Deprecated] Label text
| Token | Value |
|---|---|
Filled tonal button pressed label text colormd.comp.filled-tonal-button.pressed.label-text.color | #4A4458 md.comp.filled-tonal-button.pressed.label-text.color
|
[Deprecated] State layer
| Token | Value |
|---|---|
Filled tonal button pressed state layer colormd.comp.filled-tonal-button.pressed.state-layer.color | #4A4458 md.comp.filled-tonal-button.pressed.state-layer.color
|
Filled tonal button pressed state layer opacitymd.comp.filled-tonal-button.pressed.state-layer.opacity | 10% md.comp.filled-tonal-button.pressed.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
Filled tonal button pressed icon colormd.comp.filled-tonal-button.with-icon.pressed.icon.color | #4A4458 md.comp.filled-tonal-button.with-icon.pressed.icon.color
|
[Deprecated] Button - Elevated
[Deprecated] Enabled
[Deprecated] Container
| Token | Value |
|---|---|
Elevated button container colormd.comp.elevated-button.container.color | #F7F2FA md.comp.elevated-button.container.color
|
Elevated button container elevationmd.comp.elevated-button.container.elevation | 1dp md.comp.elevated-button.container.elevation
|
Elevated button container heightmd.comp.elevated-button.container.height | 40dp md.comp.elevated-button.container.height |
Elevated button container shadow colormd.comp.elevated-button.container.shadow-color | #000000 md.comp.elevated-button.container.shadow-color
|
Elevated button container shapemd.comp.elevated-button.container.shape | Full md.comp.elevated-button.container.shape
|
Elevated button container surface tint layer colormd.comp.elevated-button.container.surface-tint-layer.color | #6750A4 md.comp.elevated-button.container.surface-tint-layer.color
|
[Deprecated] Label text
| Token | Value |
|---|---|
Elevated button label colormd.comp.elevated-button.label-text.color | #6750A4 md.comp.elevated-button.label-text.color
|
Elevated button label fontmd.comp.elevated-button.label-text.font | Roboto md.comp.elevated-button.label-text.font
|
Elevated button label line heightmd.comp.elevated-button.label-text.line-height | 20pt md.comp.elevated-button.label-text.line-height
|
Elevated button label sizemd.comp.elevated-button.label-text.size | 14pt md.comp.elevated-button.label-text.size
|
Elevated button label trackingmd.comp.elevated-button.label-text.tracking | 0.1pt md.comp.elevated-button.label-text.tracking
|
Label text type stylemd.comp.elevated-button.label-text.type | Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt md.comp.elevated-button.label-text.type
|
Elevated button label weightmd.comp.elevated-button.label-text.weight | 500 md.comp.elevated-button.label-text.weight
|
[Deprecated] Icon
| Token | Value |
|---|---|
Elevated button with icon icon colormd.comp.elevated-button.with-icon.icon.color | #6750A4 md.comp.elevated-button.with-icon.icon.color
|
Elevated button with icon icon sizemd.comp.elevated-button.with-icon.icon.size | 18dp md.comp.elevated-button.with-icon.icon.size |
[Deprecated] Disabled
[Deprecated] Container
| Token | Value |
|---|---|
Elevated button disabled container colormd.comp.elevated-button.disabled.container.color | #1D1B20 md.comp.elevated-button.disabled.container.color
|
Elevated button disabled container elevationmd.comp.elevated-button.disabled.container.elevation | 0dp md.comp.elevated-button.disabled.container.elevation
|
Elevated button disabled container opacitymd.comp.elevated-button.disabled.container.opacity | 12% md.comp.elevated-button.disabled.container.opacity |
[Deprecated] Label text
| Token | Value |
|---|---|
Elevated button disabled label colormd.comp.elevated-button.disabled.label-text.color | #1D1B20 md.comp.elevated-button.disabled.label-text.color
|
Elevated button disabled label opacitymd.comp.elevated-button.disabled.label-text.opacity | 38% md.comp.elevated-button.disabled.label-text.opacity |
[Deprecated] Icon
| Token | Value |
|---|---|
Elevated button with icon disabled icon colormd.comp.elevated-button.with-icon.disabled.icon.color | #1D1B20 md.comp.elevated-button.with-icon.disabled.icon.color
|
Elevated button with icon disabled icon opacitymd.comp.elevated-button.with-icon.disabled.icon.opacity | 38% md.comp.elevated-button.with-icon.disabled.icon.opacity |
[Deprecated] Hovered
[Deprecated] Container
| Token | Value |
|---|---|
Elevated button hover container elevationmd.comp.elevated-button.hover.container.elevation | 3dp md.comp.elevated-button.hover.container.elevation
|
[Deprecated] Label text
| Token | Value |
|---|---|
Elevated button hover label colormd.comp.elevated-button.hover.label-text.color | #6750A4 md.comp.elevated-button.hover.label-text.color
|
[Deprecated] State layer
| Token | Value |
|---|---|
Elevated button hover state layer colormd.comp.elevated-button.hover.state-layer.color | #6750A4 md.comp.elevated-button.hover.state-layer.color
|
Elevated button hover state layer opacitymd.comp.elevated-button.hover.state-layer.opacity | 8% md.comp.elevated-button.hover.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
Elevated button with icon hover icon colormd.comp.elevated-button.with-icon.hover.icon.color | #6750A4 md.comp.elevated-button.with-icon.hover.icon.color
|
[Deprecated] Focused
[Deprecated] Focus indicator
| Token | Value |
|---|---|
Elevated button focus indicator colormd.comp.elevated-button.focus.indicator.color | #625B71 md.comp.elevated-button.focus.indicator.color
|
Elevated button focus indicator offsetmd.comp.elevated-button.focus.indicator.outline.offset | 2dp md.comp.elevated-button.focus.indicator.outline.offset
|
Elevated button focus indicator thicknessmd.comp.elevated-button.focus.indicator.thickness | 3dp md.comp.elevated-button.focus.indicator.thickness
|
[Deprecated] Container
| Token | Value |
|---|---|
Elevated button focus container elevationmd.comp.elevated-button.focus.container.elevation | 1dp md.comp.elevated-button.focus.container.elevation
|
[Deprecated] Label text
| Token | Value |
|---|---|
Elevated button focus label colormd.comp.elevated-button.focus.label-text.color | #6750A4 md.comp.elevated-button.focus.label-text.color
|
[Deprecated] State layer
| Token | Value |
|---|---|
Elevated button focus state layer colormd.comp.elevated-button.focus.state-layer.color | #6750A4 md.comp.elevated-button.focus.state-layer.color
|
Elevated button focus state layer opacitymd.comp.elevated-button.focus.state-layer.opacity | 10% md.comp.elevated-button.focus.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
Elevated button with icon focus icon colormd.comp.elevated-button.with-icon.focus.icon.color | #6750A4 md.comp.elevated-button.with-icon.focus.icon.color
|
[Deprecated] Pressed (ripple)
[Deprecated] Container
| Token | Value |
|---|---|
Elevated button pressed container elevationmd.comp.elevated-button.pressed.container.elevation | 1dp md.comp.elevated-button.pressed.container.elevation
|
[Deprecated] Label text
| Token | Value |
|---|---|
Elevated button pressed label colormd.comp.elevated-button.pressed.label-text.color | #6750A4 md.comp.elevated-button.pressed.label-text.color
|
[Deprecated] State layer
| Token | Value |
|---|---|
Elevated button pressed state layer colormd.comp.elevated-button.pressed.state-layer.color | #6750A4 md.comp.elevated-button.pressed.state-layer.color
|
Elevated button pressed state layer opacitymd.comp.elevated-button.pressed.state-layer.opacity | 10% md.comp.elevated-button.pressed.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
Elevated button with icon pressed icon colormd.comp.elevated-button.with-icon.pressed.icon.color | #6750A4 md.comp.elevated-button.with-icon.pressed.icon.color
|
[Deprecated] Button - Text
[Deprecated] Enabled
[Deprecated] Container
| Token | Value |
|---|---|
Text button container elevationmd.comp.text-button.container.elevation | 0dp md.comp.text-button.container.elevation
|
Text button container heightmd.comp.text-button.container.height | 40dp md.comp.text-button.container.height |
Text button container shapemd.comp.text-button.container.shape | Full md.comp.text-button.container.shape
|
[Deprecated] Label text
| Token | Value |
|---|---|
Text button label colormd.comp.text-button.label-text.color | #6750A4 md.comp.text-button.label-text.color
|
Text button label fontmd.comp.text-button.label-text.font | Roboto md.comp.text-button.label-text.font
|
Text button label line heightmd.comp.text-button.label-text.line-height | 20pt md.comp.text-button.label-text.line-height
|
Text button label sizemd.comp.text-button.label-text.size | 14pt md.comp.text-button.label-text.size
|
Text button label trackingmd.comp.text-button.label-text.tracking | 0.1pt md.comp.text-button.label-text.tracking
|
Type stylemd.comp.text-button.label-text.type | Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt md.comp.text-button.label-text.type
|
Text button label weightmd.comp.text-button.label-text.weight | 500 md.comp.text-button.label-text.weight
|
[Deprecated] Icon
| Token | Value |
|---|---|
Text button with icon icon colormd.comp.text-button.with-icon.icon.color | #6750A4 md.comp.text-button.with-icon.icon.color
|
Text button with icon icon sizemd.comp.text-button.with-icon.icon.size | 18dp md.comp.text-button.with-icon.icon.size |
[Deprecated] Disabled
[Deprecated] Label text
| Token | Value |
|---|---|
Text button disabled label colormd.comp.text-button.disabled.label-text.color | #1D1B20 md.comp.text-button.disabled.label-text.color
|
Text button disabled label opacitymd.comp.text-button.disabled.label-text.opacity | 38% md.comp.text-button.disabled.label-text.opacity |
[Deprecated] Icon
| Token | Value |
|---|---|
Text button with icon disabled icon colormd.comp.text-button.with-icon.disabled.icon.color | #1D1B20 md.comp.text-button.with-icon.disabled.icon.color
|
Text button with icon disabled icon opacitymd.comp.text-button.with-icon.disabled.icon.opacity | 38% md.comp.text-button.with-icon.disabled.icon.opacity |
[Deprecated] Hovered
[Deprecated] Label text
| Token | Value |
|---|---|
Text button hover label colormd.comp.text-button.hover.label-text.color | #6750A4 md.comp.text-button.hover.label-text.color
|
[Deprecated] State layer
| Token | Value |
|---|---|
Text button hover state layer colormd.comp.text-button.hover.state-layer.color | #6750A4 md.comp.text-button.hover.state-layer.color
|
Text button hover state layer opacitymd.comp.text-button.hover.state-layer.opacity | 8% md.comp.text-button.hover.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
Text button with icon hover icon colormd.comp.text-button.with-icon.hover.icon.color | #6750A4 md.comp.text-button.with-icon.hover.icon.color
|
[Deprecated] Focused
[Deprecated] Focus indicator
| Token | Value |
|---|---|
Text button focus indicator colormd.comp.text-button.focus.indicator.color | #625B71 md.comp.text-button.focus.indicator.color
|
Text button focus indicator offsetmd.comp.text-button.focus.indicator.outline.offset | 2dp md.comp.text-button.focus.indicator.outline.offset
|
Text button focus indicator thicknessmd.comp.text-button.focus.indicator.thickness | 3dp md.comp.text-button.focus.indicator.thickness
|
[Deprecated] Label text
| Token | Value |
|---|---|
Text button focus label colormd.comp.text-button.focus.label-text.color | #6750A4 md.comp.text-button.focus.label-text.color
|
[Deprecated] State layer
| Token | Value |
|---|---|
Text button focus state layer colormd.comp.text-button.focus.state-layer.color | #6750A4 md.comp.text-button.focus.state-layer.color
|
Text button focus state layer opacitymd.comp.text-button.focus.state-layer.opacity | 10% md.comp.text-button.focus.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
Text button with icon focus icon colormd.comp.text-button.with-icon.focus.icon.color | #6750A4 md.comp.text-button.with-icon.focus.icon.color
|
[Deprecated] Pressed (ripple)
[Deprecated] Label text
| Token | Value |
|---|---|
Text button pressed label colormd.comp.text-button.pressed.label-text.color | #6750A4 md.comp.text-button.pressed.label-text.color
|
[Deprecated] State layer
| Token | Value |
|---|---|
Text button pressed state layer colormd.comp.text-button.pressed.state-layer.color | #6750A4 md.comp.text-button.pressed.state-layer.color
|
Text button pressed state layer opacitymd.comp.text-button.pressed.state-layer.opacity | 10% md.comp.text-button.pressed.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
Text button with icon pressed icon colormd.comp.text-button.with-icon.pressed.icon.color | #6750A4 md.comp.text-button.with-icon.pressed.icon.color
|
[Deprecated] Button – Outlined
[Deprecated] Enabled
[Deprecated] Container
| Token | Value |
|---|---|
Outlined button container elevationmd.comp.outlined-button.container.elevation | 0dp md.comp.outlined-button.container.elevation
|
Outlined button container heightmd.comp.outlined-button.container.height | 40dp md.comp.outlined-button.container.height |
Outlined button container shapemd.comp.outlined-button.container.shape | Full md.comp.outlined-button.container.shape
|
[Deprecated] Outline
| Token | Value |
|---|---|
Outlined button outline colormd.comp.outlined-button.outline.color | #79747E md.comp.outlined-button.outline.color
|
Outlined button outline widthmd.comp.outlined-button.outline.width | 1dp md.comp.outlined-button.outline.width |
[Deprecated] Label text
| Token | Value |
|---|---|
Outlined button label colormd.comp.outlined-button.label-text.color | #6750A4 md.comp.outlined-button.label-text.color
|
Outlined button label fontmd.comp.outlined-button.label-text.font | Roboto md.comp.outlined-button.label-text.font
|
Outlined button label line heightmd.comp.outlined-button.label-text.line-height | 20pt md.comp.outlined-button.label-text.line-height
|
Outlined button label sizemd.comp.outlined-button.label-text.size | 14pt md.comp.outlined-button.label-text.size
|
Outlined button label trackingmd.comp.outlined-button.label-text.tracking | 0.1pt md.comp.outlined-button.label-text.tracking
|
Type stylemd.comp.outlined-button.label-text.type | Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt md.comp.outlined-button.label-text.type
|
Outlined button label weightmd.comp.outlined-button.label-text.weight | 500 md.comp.outlined-button.label-text.weight
|
[Deprecated] Icon
| Token | Value |
|---|---|
Outlined button with icon icon colormd.comp.outlined-button.with-icon.icon.color | #6750A4 md.comp.outlined-button.with-icon.icon.color
|
Outlined button with icon icon sizemd.comp.outlined-button.with-icon.icon.size | 18dp md.comp.outlined-button.with-icon.icon.size |
[Deprecated] Disabled
[Deprecated] Label text
| Token | Value |
|---|---|
Outlined button disabled label colormd.comp.outlined-button.disabled.label-text.color | #1D1B20 md.comp.outlined-button.disabled.label-text.color
|
Outlined button disabled label opacitymd.comp.outlined-button.disabled.label-text.opacity | 38% md.comp.outlined-button.disabled.label-text.opacity |
[Deprecated] Icon
| Token | Value |
|---|---|
Outlined button with icon disabled icon colormd.comp.outlined-button.with-icon.disabled.icon.color | #1D1B20 md.comp.outlined-button.with-icon.disabled.icon.color
|
Outlined button with icon disabled icon opacitymd.comp.outlined-button.with-icon.disabled.icon.opacity | 38% md.comp.outlined-button.with-icon.disabled.icon.opacity |
[Deprecated] Outline
| Token | Value |
|---|---|
Outlined button disabled outline colormd.comp.outlined-button.disabled.outline.color | #1D1B20 md.comp.outlined-button.disabled.outline.color
|
Outlined button disabled outline opacitymd.comp.outlined-button.disabled.outline.opacity | 12% md.comp.outlined-button.disabled.outline.opacity |
[Deprecated] Hovered
[Deprecated] Label text
| Token | Value |
|---|---|
Outlined button hover label colormd.comp.outlined-button.hover.label-text.color | #6750A4 md.comp.outlined-button.hover.label-text.color
|
[Deprecated] State layer
| Token | Value |
|---|---|
Outlined button hover state layer colormd.comp.outlined-button.hover.state-layer.color | #6750A4 md.comp.outlined-button.hover.state-layer.color
|
Outlined button hover state layer opacitymd.comp.outlined-button.hover.state-layer.opacity | 8% md.comp.outlined-button.hover.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
Outlined button with icon hover icon colormd.comp.outlined-button.with-icon.hover.icon.color | #6750A4 md.comp.outlined-button.with-icon.hover.icon.color
|
[Deprecated] Outline
| Token | Value |
|---|---|
Outlined button hover outline colormd.comp.outlined-button.hover.outline.color | #79747E md.comp.outlined-button.hover.outline.color
|
[Deprecated] Focused
[Deprecated] Focus indicator
| Token | Value |
|---|---|
Outlined button focus indicator colormd.comp.outlined-button.focus.indicator.color | #625B71 md.comp.outlined-button.focus.indicator.color
|
Outlined button focus indicator offsetmd.comp.outlined-button.focus.indicator.outline.offset | 2dp md.comp.outlined-button.focus.indicator.outline.offset
|
Outlined button focus indicator thicknessmd.comp.outlined-button.focus.indicator.thickness | 3dp md.comp.outlined-button.focus.indicator.thickness
|
[Deprecated] Label text
| Token | Value |
|---|---|
Outlined button focus label colormd.comp.outlined-button.focus.label-text.color | #6750A4 md.comp.outlined-button.focus.label-text.color
|
[Deprecated] State layer
| Token | Value |
|---|---|
Outlined button focus state layer colormd.comp.outlined-button.focus.state-layer.color | #6750A4 md.comp.outlined-button.focus.state-layer.color
|
Outlined button focus state layer opacitymd.comp.outlined-button.focus.state-layer.opacity | 10% md.comp.outlined-button.focus.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
Outlined button with icon focus icon colormd.comp.outlined-button.with-icon.focus.icon.color | #6750A4 md.comp.outlined-button.with-icon.focus.icon.color
|
[Deprecated] Outline
| Token | Value |
|---|---|
Outlined button focus outline colormd.comp.outlined-button.focus.outline.color | #6750A4 md.comp.outlined-button.focus.outline.color
|
[Deprecated] Pressed (ripple)
[Deprecated] Label text
| Token | Value |
|---|---|
Outlined button pressed label colormd.comp.outlined-button.pressed.label-text.color | #6750A4 md.comp.outlined-button.pressed.label-text.color
|
[Deprecated] State layer
| Token | Value |
|---|---|
Outlined button pressed state layer colormd.comp.outlined-button.pressed.state-layer.color | #6750A4 md.comp.outlined-button.pressed.state-layer.color
|
Outlined button pressed state layer opacitymd.comp.outlined-button.pressed.state-layer.opacity | 10% md.comp.outlined-button.pressed.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
Outlined button with icon pressed icon colormd.comp.outlined-button.with-icon.pressed.icon.color | #6750A4 md.comp.outlined-button.with-icon.pressed.icon.color
|
[Deprecated] Outline
| Token | Value |
|---|---|
Outlined button pressed outline colormd.comp.outlined-button.pressed.outline.color | #79747E md.comp.outlined-button.pressed.outline.color
|
[Deprecated] Button - Filled
[Deprecated] Enabled
[Deprecated] Container
| Token | Value |
|---|---|
Filled button container colormd.comp.filled-button.container.color | #6750A4 md.comp.filled-button.container.color
|
Filled button container elevationmd.comp.filled-button.container.elevation | 0dp md.comp.filled-button.container.elevation
|
Filled button container heightmd.comp.filled-button.container.height | 40dp md.comp.filled-button.container.height |
Filled button container shadow colormd.comp.filled-button.container.shadow-color | #000000 md.comp.filled-button.container.shadow-color
|
Filled button container shapemd.comp.filled-button.container.shape | Full md.comp.filled-button.container.shape
|
[Deprecated] Label text
| Token | Value |
|---|---|
Filled button label colormd.comp.filled-button.label-text.color | #FFFFFF md.comp.filled-button.label-text.color
|
Filled button label fontmd.comp.filled-button.label-text.font | Roboto md.comp.filled-button.label-text.font
|
Filled button label line heightmd.comp.filled-button.label-text.line-height | 20pt md.comp.filled-button.label-text.line-height
|
Filled button label sizemd.comp.filled-button.label-text.size | 14pt md.comp.filled-button.label-text.size
|
Filled button label trackingmd.comp.filled-button.label-text.tracking | 0.1pt md.comp.filled-button.label-text.tracking
|
Label text type stylemd.comp.filled-button.label-text.type | Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt md.comp.filled-button.label-text.type
|
Filled button label weightmd.comp.filled-button.label-text.weight | 500 md.comp.filled-button.label-text.weight
|
[Deprecated] Icon
| Token | Value |
|---|---|
Filled button with icon icon colormd.comp.filled-button.with-icon.icon.color | #FFFFFF md.comp.filled-button.with-icon.icon.color
|
Filled button with icon icon sizemd.comp.filled-button.with-icon.icon.size | 18dp md.comp.filled-button.with-icon.icon.size |
[Deprecated] Disabled
[Deprecated] Container
| Token | Value |
|---|---|
Filled button disabled container colormd.comp.filled-button.disabled.container.color | #1D1B20 md.comp.filled-button.disabled.container.color
|
Filled button disabled container elevationmd.comp.filled-button.disabled.container.elevation | 0dp md.comp.filled-button.disabled.container.elevation
|
Filled button disabled container opacitymd.comp.filled-button.disabled.container.opacity | 12% md.comp.filled-button.disabled.container.opacity |
[Deprecated] Label text
| Token | Value |
|---|---|
Filled button disabled label colormd.comp.filled-button.disabled.label-text.color | #1D1B20 md.comp.filled-button.disabled.label-text.color
|
Filled button disabled label opacitymd.comp.filled-button.disabled.label-text.opacity | 38% md.comp.filled-button.disabled.label-text.opacity |
[Deprecated] Icon
| Token | Value |
|---|---|
Filled button with icon disabled icon colormd.comp.filled-button.with-icon.disabled.icon.color | #1D1B20 md.comp.filled-button.with-icon.disabled.icon.color
|
Filled button with icon disabled icon opacitymd.comp.filled-button.with-icon.disabled.icon.opacity | 38% md.comp.filled-button.with-icon.disabled.icon.opacity |
[Deprecated] Hovered
[Deprecated] Container
| Token | Value |
|---|---|
Filled button hover container elevationmd.comp.filled-button.hover.container.elevation | 1dp md.comp.filled-button.hover.container.elevation
|
[Deprecated] Label text
| Token | Value |
|---|---|
Filled button hover label colormd.comp.filled-button.hover.label-text.color | #FFFFFF md.comp.filled-button.hover.label-text.color
|
[Deprecated] State layer
| Token | Value |
|---|---|
Filled button hover state layer colormd.comp.filled-button.hover.state-layer.color | #FFFFFF md.comp.filled-button.hover.state-layer.color
|
Filled button hover state layer opacitymd.comp.filled-button.hover.state-layer.opacity | 8% md.comp.filled-button.hover.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
Filled button with icon hover icon colormd.comp.filled-button.with-icon.hover.icon.color | #FFFFFF md.comp.filled-button.with-icon.hover.icon.color
|
[Deprecated] Focused
[Deprecated] Focus indicator
| Token | Value |
|---|---|
Filled button focus indicator colormd.comp.filled-button.focus.indicator.color | #625B71 md.comp.filled-button.focus.indicator.color
|
Filled button focus indicator offsetmd.comp.filled-button.focus.indicator.outline.offset | 2dp md.comp.filled-button.focus.indicator.outline.offset
|
Filled button focus indicator thicknessmd.comp.filled-button.focus.indicator.thickness | 3dp md.comp.filled-button.focus.indicator.thickness
|
[Deprecated] Container
| Token | Value |
|---|---|
Filled button focus container elevationmd.comp.filled-button.focus.container.elevation | 0dp md.comp.filled-button.focus.container.elevation
|
[Deprecated] Label text
| Token | Value |
|---|---|
Filled button focus label colormd.comp.filled-button.focus.label-text.color | #FFFFFF md.comp.filled-button.focus.label-text.color
|
[Deprecated] State layer
| Token | Value |
|---|---|
Filled button focus state layer colormd.comp.filled-button.focus.state-layer.color | #FFFFFF md.comp.filled-button.focus.state-layer.color
|
Filled button focus state layer opacitymd.comp.filled-button.focus.state-layer.opacity | 10% md.comp.filled-button.focus.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
Filled button with icon focus icon colormd.comp.filled-button.with-icon.focus.icon.color | #FFFFFF md.comp.filled-button.with-icon.focus.icon.color
|
[Deprecated] Pressed (ripple)
[Deprecated] Container
| Token | Value |
|---|---|
Filled button pressed container elevationmd.comp.filled-button.pressed.container.elevation | 0dp md.comp.filled-button.pressed.container.elevation
|
[Deprecated] Label text
| Token | Value |
|---|---|
Filled button pressed label colormd.comp.filled-button.pressed.label-text.color | #FFFFFF md.comp.filled-button.pressed.label-text.color
|
[Deprecated] State layer
| Token | Value |
|---|---|
Filled button pressed state layer colormd.comp.filled-button.pressed.state-layer.color | #FFFFFF md.comp.filled-button.pressed.state-layer.color
|
Filled button pressed state layer opacitymd.comp.filled-button.pressed.state-layer.opacity | 10% md.comp.filled-button.pressed.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
Filled button with icon pressed icon colormd.comp.filled-button.with-icon.pressed.icon.color | #FFFFFF md.comp.filled-button.with-icon.pressed.icon.color
|
[Deprecated] Dragged
[Deprecated] Container
| Token | Value |
|---|---|
Filled button dragged container elevationmd.comp.filled-button.dragged.container.elevation | 6dp md.comp.filled-button.dragged.container.elevation
|
[Deprecated] Label text
| Token | Value |
|---|---|
Filled button dragged label colormd.comp.filled-button.dragged.label-text.color | #FFFFFF md.comp.filled-button.dragged.label-text.color
|
[Deprecated] State layer
| Token | Value |
|---|---|
Filled button dragged state layer colormd.comp.filled-button.dragged.state-layer.color | #FFFFFF md.comp.filled-button.dragged.state-layer.color
|
Filled button dragged state layer opacitymd.comp.filled-button.dragged.state-layer.opacity | 16% md.comp.filled-button.dragged.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
Filled button with icon dragged icon colormd.comp.filled-button.with-icon.dragged.icon.color | #FFFFFF md.comp.filled-button.with-icon.dragged.icon.color
|