Component

Material Design 3 toolbars tokens

Browse tokens

Token

See more values

Compare token values by selecting another context

Theme
Contrast
More contexts
Platform
Audience
What do 1P and 3P mean?

1P means first-party; 3P means third-party. We interpret 1P Baseline as the configuration for Google's own products, and 3P as the configuration for other developers.

Material supplies these audience labels but does not define them in the captured data. They are not a baseline-versus-Expressive switch.

Color
Color tokens
TokenValue
Floating toolbar standard colormd.comp.toolbar.floating.standard.container.color
#F3EDF7
Floating toolbar vibrant colormd.comp.toolbar.floating.vibrant.container.color
#EADDFF
Floating toolbar vibrant unselected button icon color md.comp.toolbar.floating.vibrant.button.unselected.icon.color
#4F378B
Floating toolbar vibrant unselected button text color md.comp.toolbar.floating.vibrant.button.unselected.text.color
#4F378B
Floating toolbar vibrant selected button icon colormd.comp.toolbar.floating.vibrant.button.selected.icon.color
#1D1B20
Floating toolbar vibrant selected button text colormd.comp.toolbar.floating.vibrant.button.selected.text.color
#1D1B20
Floating toolbar vibrant selected button container colormd.comp.toolbar.floating.vibrant.button.selected.container.color
#F3EDF7
Size
Size tokens
TokenValue
Floating toolbar container heightmd.comp.toolbar.floating.container.height
64dp
Floating toolbar container height - horizontalmd.comp.toolbar.floating.horizontal.container.height
64dp
Floating toolbar container height - verticalmd.comp.toolbar.floating.vertical.container.width
64dp
Floating toolbar leading spacemd.comp.toolbar.floating.container.leading-space
8dp
Floating toolbar trailing spacemd.comp.toolbar.floating.container.trailing-space
8dp
Floating toolbar margin from screen edgemd.comp.toolbar.floating.container.external-padding
16dp
Floating toolbar margin from screen edge - horizontalmd.comp.toolbar.floating.horizontal.container.external-space
16dp
Floating toolbar margin from screen edge - verticalmd.comp.toolbar.floating.vertical.container.external-space
24dp
Floating toolbar space between actionsmd.comp.toolbar.floating.container.between-space
4dp
Shape
Shape tokens
TokenValue
Floating toolbar container shapemd.comp.toolbar.floating.container.shape
Full
Elevation
Elevation tokens
TokenValue
Floating toolbar container elevationmd.comp.toolbar.floating.container.elevation
6dp