Material Design 3 "Toolbar" tokens: All tokens
Preview
Browse tokens
Color
Toolbar - Docked
Color
| Token | Value |
|---|---|
Docked toolbar container colormd.comp.toolbar.docked.container.color | #F3EDF7 md.comp.toolbar.docked.container.color
|
Size
| Token | Value |
|---|---|
Docked toolbar container heightmd.comp.toolbar.docked.container.height | 64dp md.comp.toolbar.docked.container.height |
Docked toolbar leading paddingmd.comp.toolbar.docked.container.leading-space | 16dp md.comp.toolbar.docked.container.leading-space
|
Docked toolbar max space between actionsmd.comp.toolbar.docked.container.max-spacing | 32dp md.comp.toolbar.docked.container.max-spacing |
Docked toolbar min space between actionsmd.comp.toolbar.docked.container.min-spacing | 4dp md.comp.toolbar.docked.container.min-spacing |
Docked toolbar trailing paddingmd.comp.toolbar.docked.container.trailing-space | 16dp md.comp.toolbar.docked.container.trailing-space
|
Shape
| Token | Value |
|---|---|
Docked toolbar container shapemd.comp.toolbar.docked.container.shape | 0dp md.comp.toolbar.docked.container.shape
|
Toolbar - Floating
Color
| Token | Value |
|---|---|
Floating toolbar standard colormd.comp.toolbar.floating.standard.container.color | #F3EDF7 md.comp.toolbar.floating.standard.container.color
|
Floating toolbar vibrant selected button container colormd.comp.toolbar.floating.vibrant.button.selected.container.color | #F3EDF7 md.comp.toolbar.floating.vibrant.button.selected.container.color
|
Floating toolbar vibrant selected button icon colormd.comp.toolbar.floating.vibrant.button.selected.icon.color | #1D1B20 md.comp.toolbar.floating.vibrant.button.selected.icon.color
|
Floating toolbar vibrant selected button text colormd.comp.toolbar.floating.vibrant.button.selected.text.color | #1D1B20 md.comp.toolbar.floating.vibrant.button.selected.text.color
|
Floating toolbar vibrant unselected button icon color md.comp.toolbar.floating.vibrant.button.unselected.icon.color | #4F378B md.comp.toolbar.floating.vibrant.button.unselected.icon.color
|
Floating toolbar vibrant unselected button text color md.comp.toolbar.floating.vibrant.button.unselected.text.color | #4F378B md.comp.toolbar.floating.vibrant.button.unselected.text.color
|
Floating toolbar vibrant colormd.comp.toolbar.floating.vibrant.container.color | #EADDFF md.comp.toolbar.floating.vibrant.container.color
|
Size
| Token | Value |
|---|---|
Floating toolbar space between actionsmd.comp.toolbar.floating.container.between-space | 4dp md.comp.toolbar.floating.container.between-space
|
Floating toolbar margin from screen edgemd.comp.toolbar.floating.container.external-padding | 16dp md.comp.toolbar.floating.container.external-padding |
Floating toolbar container heightmd.comp.toolbar.floating.container.height | 64dp md.comp.toolbar.floating.container.height |
Floating toolbar leading spacemd.comp.toolbar.floating.container.leading-space | 8dp md.comp.toolbar.floating.container.leading-space
|
Floating toolbar trailing spacemd.comp.toolbar.floating.container.trailing-space | 8dp md.comp.toolbar.floating.container.trailing-space
|
Floating toolbar margin from screen edge - horizontalmd.comp.toolbar.floating.horizontal.container.external-space | 16dp md.comp.toolbar.floating.horizontal.container.external-space
|
Floating toolbar container height - horizontalmd.comp.toolbar.floating.horizontal.container.height | 64dp md.comp.toolbar.floating.horizontal.container.height |
Floating toolbar margin from screen edge - verticalmd.comp.toolbar.floating.vertical.container.external-space | 24dp md.comp.toolbar.floating.vertical.container.external-space
|
Floating toolbar container height - verticalmd.comp.toolbar.floating.vertical.container.width | 64dp md.comp.toolbar.floating.vertical.container.width |
Shape
| Token | Value |
|---|---|
Floating toolbar container shapemd.comp.toolbar.floating.container.shape | Full md.comp.toolbar.floating.container.shape
|
Elevation
| Token | Value |
|---|---|
Floating toolbar container elevationmd.comp.toolbar.floating.container.elevation | 6dp md.comp.toolbar.floating.container.elevation
|
Toolbar - Floating - FAB
| Token | Value |
|---|---|
Toolbar floating FAB space between toolbar and FABmd.comp.toolbar.floating.fab.between-space | 8dp md.comp.toolbar.floating.fab.between-space
|
Toolbar floating FAB standard container colormd.comp.toolbar.floating.fab.standard.container.color | #E8DEF8 md.comp.toolbar.floating.fab.standard.container.color
|
Toolbar floating FAB standard icon colormd.comp.toolbar.floating.fab.standard.icon.color | #4A4458 md.comp.toolbar.floating.fab.standard.icon.color
|
Toolbar floating FAB vibrant container colormd.comp.toolbar.floating.fab.vibrant.container.color | #FFD8E4 md.comp.toolbar.floating.fab.vibrant.container.color
|
Toolbar floating FAB vibrant icon colormd.comp.toolbar.floating.fab.vibrant.icon.color | #633B48 md.comp.toolbar.floating.fab.vibrant.icon.color
|
Expanded
| Token | Value |
|---|---|
Toolbar floating FAB container elevationmd.comp.toolbar.floating.fab.container.elevation | 1dp md.comp.toolbar.floating.fab.container.elevation
|
Toolbar floating FAB container heightmd.comp.toolbar.floating.fab.container.height | 56dp md.comp.toolbar.floating.fab.container.height |
Toolbar floating FAB container shapemd.comp.toolbar.floating.fab.container.shape | 16dp md.comp.toolbar.floating.fab.container.shape
|
Toolbar floating FAB container widthmd.comp.toolbar.floating.fab.container.width | 56dp md.comp.toolbar.floating.fab.container.width |
Toolbar floating FAB icon sizemd.comp.toolbar.floating.fab.icon.size | 24dp md.comp.toolbar.floating.fab.icon.size |
Collapsed
| Token | Value |
|---|---|
Toolbar floating FAB medium container elevationmd.comp.toolbar.floating.fab.medium.container.elevation | 3dp md.comp.toolbar.floating.fab.medium.container.elevation
|
Toolbar floating FAB medium container heightmd.comp.toolbar.floating.fab.medium.container.height | 80dp md.comp.toolbar.floating.fab.medium.container.height |
Toolbar floating FAB medium container shapemd.comp.toolbar.floating.fab.medium.container.shape | 20dp md.comp.toolbar.floating.fab.medium.container.shape
|
Toolbar floating FAB medium container widthmd.comp.toolbar.floating.fab.medium.container.width | 80dp md.comp.toolbar.floating.fab.medium.container.width |
Toolbar floating FAB medium icon sizemd.comp.toolbar.floating.fab.medium.icon.size | 28dp md.comp.toolbar.floating.fab.medium.icon.size |
Toolbar - Color - Standard
Enabled
| Token | Value |
|---|---|
Toolbar standard button container colormd.comp.toolbar.standard.button.container.color | #F3EDF7 md.comp.toolbar.standard.button.container.color
|
Toolbar standard container colormd.comp.toolbar.standard.container.color | #F3EDF7 md.comp.toolbar.standard.container.color
|
Toolbar standard container shapemd.comp.toolbar.standard.container.shape | Full md.comp.toolbar.standard.container.shape
|
Toolbar standard icon colormd.comp.toolbar.standard.icon.color | #49454F md.comp.toolbar.standard.icon.color
|
Toolbar standard label colormd.comp.toolbar.standard.label-text.color | #49454F md.comp.toolbar.standard.label-text.color
|
Toolbar standard selected button container colormd.comp.toolbar.standard.selected.button.container.color | #E8DEF8 md.comp.toolbar.standard.selected.button.container.color
|
Toolbar standard selected icon colormd.comp.toolbar.standard.selected.icon.color | #4A4458 md.comp.toolbar.standard.selected.icon.color
|
Toolbar standard selected label colormd.comp.toolbar.standard.selected.label-text.color | #4A4458 md.comp.toolbar.standard.selected.label-text.color
|
Disabled
| Token | Value |
|---|---|
Toolbar standard disabled icon colormd.comp.toolbar.standard.disabled.icon.color | #1D1B20 md.comp.toolbar.standard.disabled.icon.color
|
Toolbar standard disabled icon opacitymd.comp.toolbar.standard.disabled.icon.opacity | 38% md.comp.toolbar.standard.disabled.icon.opacity |
Toolbar standard disabled label colormd.comp.toolbar.standard.disabled.label-text.color | #1D1B20 md.comp.toolbar.standard.disabled.label-text.color
|
Toolbar standard disabled label opacitymd.comp.toolbar.standard.disabled.label-text.opacity | 38% md.comp.toolbar.standard.disabled.label-text.opacity |
Hovered
| Token | Value |
|---|---|
Toolbar standard hovered icon colormd.comp.toolbar.standard.hovered.icon.color | #49454F md.comp.toolbar.standard.hovered.icon.color
|
Toolbar standard hovered label colormd.comp.toolbar.standard.hovered.label-text.color | #49454F md.comp.toolbar.standard.hovered.label-text.color
|
Toolbar standard hovered state layer colormd.comp.toolbar.standard.hovered.state-layer.color | #49454F md.comp.toolbar.standard.hovered.state-layer.color
|
Toolbar standard hovered state layer opacitymd.comp.toolbar.standard.hovered.state-layer.opacity | 8% md.comp.toolbar.standard.hovered.state-layer.opacity
|
Toolbar standard selected hovered icon colormd.comp.toolbar.standard.selected.hovered.icon.color | #4A4458 md.comp.toolbar.standard.selected.hovered.icon.color
|
Toolbar standard selected hovered label colormd.comp.toolbar.standard.selected.hovered.label-text.color | #4A4458 md.comp.toolbar.standard.selected.hovered.label-text.color
|
Toolbar standard selected hovered state layer colormd.comp.toolbar.standard.selected.hovered.state-layer.color | #4A4458 md.comp.toolbar.standard.selected.hovered.state-layer.color
|
Focused
| Token | Value |
|---|---|
Toolbar standard focused icon colormd.comp.toolbar.standard.focused.icon.color | #49454F md.comp.toolbar.standard.focused.icon.color
|
Toolbar standard focused label colormd.comp.toolbar.standard.focused.label-text.color | #49454F md.comp.toolbar.standard.focused.label-text.color
|
Toolbar standard focused state layer colormd.comp.toolbar.standard.focused.state-layer.color | #49454F md.comp.toolbar.standard.focused.state-layer.color
|
Toolbar standard focused state layer opacitymd.comp.toolbar.standard.focused.state-layer.opacity | 10% md.comp.toolbar.standard.focused.state-layer.opacity
|
Toolbar standard selected focused icon colormd.comp.toolbar.standard.selected.focused.icon.color | #4A4458 md.comp.toolbar.standard.selected.focused.icon.color
|
Toolbar standard selected focused label colormd.comp.toolbar.standard.selected.focused.label-text.color | #4A4458 md.comp.toolbar.standard.selected.focused.label-text.color
|
Toolbar standard selected focused state layer colormd.comp.toolbar.standard.selected.focused.state-layer.color | #4A4458 md.comp.toolbar.standard.selected.focused.state-layer.color
|
Pressed
| Token | Value |
|---|---|
Toolbar standard pressed icon colormd.comp.toolbar.standard.pressed.icon.color | #49454F md.comp.toolbar.standard.pressed.icon.color
|
Toolbar standard pressed label colormd.comp.toolbar.standard.pressed.label-text.color | #49454F md.comp.toolbar.standard.pressed.label-text.color
|
Toolbar standard pressed state layer colormd.comp.toolbar.standard.pressed.state-layer.color | #49454F md.comp.toolbar.standard.pressed.state-layer.color
|
Toolbar standard pressed state layer opacitymd.comp.toolbar.standard.pressed.state-layer.opacity | 10% md.comp.toolbar.standard.pressed.state-layer.opacity
|
Toolbar standard selected pressed icon colormd.comp.toolbar.standard.selected.pressed.icon.color | #4A4458 md.comp.toolbar.standard.selected.pressed.icon.color
|
Toolbar standard selected pressed label colormd.comp.toolbar.standard.selected.pressed.label-text.color | #4A4458 md.comp.toolbar.standard.selected.pressed.label-text.color
|
Toolbar standard selected pressed state layer colormd.comp.toolbar.standard.selected.pressed.state-layer.color | #4A4458 md.comp.toolbar.standard.selected.pressed.state-layer.color
|
Toolbar - Color - Vibrant
Enabled
| Token | Value |
|---|---|
Toolbar vibrant button container colormd.comp.toolbar.vibrant.button.container.color | #EADDFF md.comp.toolbar.vibrant.button.container.color
|
Toolbar standard container colormd.comp.toolbar.vibrant.container.color | #EADDFF md.comp.toolbar.vibrant.container.color
|
Toolbar vibrant container shapemd.comp.toolbar.vibrant.container.shape | Full md.comp.toolbar.vibrant.container.shape
|
Toolbar vibrant icon colormd.comp.toolbar.vibrant.icon.color | #4F378B md.comp.toolbar.vibrant.icon.color
|
Toolbar vibrant label colormd.comp.toolbar.vibrant.label-text.color | #4F378B md.comp.toolbar.vibrant.label-text.color
|
Toolbar vibrant selected button container colormd.comp.toolbar.vibrant.selected.button.container.color | #F3EDF7 md.comp.toolbar.vibrant.selected.button.container.color
|
Toolbar vibrant selected icon colormd.comp.toolbar.vibrant.selected.icon.color | #1D1B20 md.comp.toolbar.vibrant.selected.icon.color
|
Toolbar vibrant selected label colormd.comp.toolbar.vibrant.selected.label-text.color | #1D1B20 md.comp.toolbar.vibrant.selected.label-text.color
|
Disabled
| Token | Value |
|---|---|
Toolbar vibrant disabled icon colormd.comp.toolbar.vibrant.disabled.icon.color | #1D1B20 md.comp.toolbar.vibrant.disabled.icon.color
|
Toolbar vibrant disabled icon opacitymd.comp.toolbar.vibrant.disabled.icon.opacity | 38% md.comp.toolbar.vibrant.disabled.icon.opacity |
Toolbar vibrant disabled label colormd.comp.toolbar.vibrant.disabled.label-text.color | #1D1B20 md.comp.toolbar.vibrant.disabled.label-text.color
|
Toolbar vibrant disabled label opacitymd.comp.toolbar.vibrant.disabled.label-text.opacity | 38% md.comp.toolbar.vibrant.disabled.label-text.opacity |
Hovered
| Token | Value |
|---|---|
Toolbar vibrant hovered icon colormd.comp.toolbar.vibrant.hovered.icon.color | #4F378B md.comp.toolbar.vibrant.hovered.icon.color
|
Toolbar vibrant hovered label colormd.comp.toolbar.vibrant.hovered.label-text.color | #4F378B md.comp.toolbar.vibrant.hovered.label-text.color
|
Toolbar vibrant hovered state layer colormd.comp.toolbar.vibrant.hovered.state-layer.color | #4F378B md.comp.toolbar.vibrant.hovered.state-layer.color
|
Toolbar vibrant hovered state layer opacitymd.comp.toolbar.vibrant.hovered.state-layer.opacity | 8% md.comp.toolbar.vibrant.hovered.state-layer.opacity
|
Toolbar vibrant selected hovered icon colormd.comp.toolbar.vibrant.selected.hovered.icon.color | #1D1B20 md.comp.toolbar.vibrant.selected.hovered.icon.color
|
Toolbar vibrant selected hovered label colormd.comp.toolbar.vibrant.selected.hovered.label-text.color | #1D1B20 md.comp.toolbar.vibrant.selected.hovered.label-text.color
|
Toolbar vibrant selected hovered state layer colormd.comp.toolbar.vibrant.selected.hovered.state-layer.color | #1D1B20 md.comp.toolbar.vibrant.selected.hovered.state-layer.color
|
Focused
| Token | Value |
|---|---|
Toolbar vibrant focused icon colormd.comp.toolbar.vibrant.focused.icon.color | #4F378B md.comp.toolbar.vibrant.focused.icon.color
|
Toolbar vibrant focused label colormd.comp.toolbar.vibrant.focused.label-text.color | #4F378B md.comp.toolbar.vibrant.focused.label-text.color
|
Toolbar vibrant focused state layer colormd.comp.toolbar.vibrant.focused.state-layer.color | #4F378B md.comp.toolbar.vibrant.focused.state-layer.color
|
Toolbar vibrant focused state layer opacitymd.comp.toolbar.vibrant.focused.state-layer.opacity | 10% md.comp.toolbar.vibrant.focused.state-layer.opacity
|
Toolbar vibrant selected focused icon colormd.comp.toolbar.vibrant.selected.focused.icon.color | #1D1B20 md.comp.toolbar.vibrant.selected.focused.icon.color
|
Toolbar vibrant selected focused label colormd.comp.toolbar.vibrant.selected.focused.label-text.color | #1D1B20 md.comp.toolbar.vibrant.selected.focused.label-text.color
|
Toolbar vibrant selected focused state layer colormd.comp.toolbar.vibrant.selected.focused.state-layer.color | #1D1B20 md.comp.toolbar.vibrant.selected.focused.state-layer.color
|
Pressed
| Token | Value |
|---|---|
Toolbar vibrant pressed icon colormd.comp.toolbar.vibrant.pressed.icon.color | #4F378B md.comp.toolbar.vibrant.pressed.icon.color
|
Toolbar vibrant pressed label colormd.comp.toolbar.vibrant.pressed.label-text.color | #4F378B md.comp.toolbar.vibrant.pressed.label-text.color
|
Toolbar vibrant pressed state layer colormd.comp.toolbar.vibrant.pressed.state-layer.color | #4F378B md.comp.toolbar.vibrant.pressed.state-layer.color
|
Toolbar vibrant pressed state layer opacitymd.comp.toolbar.vibrant.pressed.state-layer.opacity | 10% md.comp.toolbar.vibrant.pressed.state-layer.opacity
|
Toolbar vibrant selected pressed icon colormd.comp.toolbar.vibrant.selected.pressed.icon.color | #1D1B20 md.comp.toolbar.vibrant.selected.pressed.icon.color
|
Toolbar vibrant selected pressed label colormd.comp.toolbar.vibrant.selected.pressed.label-text.color | #1D1B20 md.comp.toolbar.vibrant.selected.pressed.label-text.color
|
Toolbar vibrant selected pressed state layer colormd.comp.toolbar.vibrant.selected.pressed.state-layer.color | #1D1B20 md.comp.toolbar.vibrant.selected.pressed.state-layer.color
|
Bottom app bar (baseline)
Enabled
Container
| Token | Value |
|---|---|
Bottom app bar container colormd.comp.bottom-app-bar.container.color | #F3EDF7 md.comp.bottom-app-bar.container.color
|
Bottom app bar container elevationmd.comp.bottom-app-bar.container.elevation | 3dp md.comp.bottom-app-bar.container.elevation
|
Bottom app bar container heightmd.comp.bottom-app-bar.container.height | 80dp md.comp.bottom-app-bar.container.height |
Bottom app bar container shapemd.comp.bottom-app-bar.container.shape | 0dp md.comp.bottom-app-bar.container.shape
|
Bottom app bar container surface tint layer colormd.comp.bottom-app-bar.container.surface-tint-layer.color | #6750A4 md.comp.bottom-app-bar.container.surface-tint-layer.color
|
Bottom app bar with FAB container heightmd.comp.bottom-app-bar.with-fab.container.height | 72dp md.comp.bottom-app-bar.with-fab.container.height |