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.

tokens
TokenValue
Toolbar floating FAB space between toolbar and FABmd.comp.toolbar.floating.fab.between-space
8dp
Toolbar floating FAB standard container colormd.comp.toolbar.floating.fab.standard.container.color
#E8DEF8
Toolbar floating FAB standard icon colormd.comp.toolbar.floating.fab.standard.icon.color
#4A4458
Toolbar floating FAB vibrant container colormd.comp.toolbar.floating.fab.vibrant.container.color
#FFD8E4
Toolbar floating FAB vibrant icon colormd.comp.toolbar.floating.fab.vibrant.icon.color
#633B48
Expanded
Expanded tokens
TokenValue
Toolbar floating FAB container heightmd.comp.toolbar.floating.fab.container.height
56dp
Toolbar floating FAB container widthmd.comp.toolbar.floating.fab.container.width
56dp
Toolbar floating FAB icon sizemd.comp.toolbar.floating.fab.icon.size
24dp
Toolbar floating FAB container shapemd.comp.toolbar.floating.fab.container.shape
16dp
Toolbar floating FAB container elevationmd.comp.toolbar.floating.fab.container.elevation
1dp
Collapsed
Collapsed tokens
TokenValue
Toolbar floating FAB medium container heightmd.comp.toolbar.floating.fab.medium.container.height
80dp
Toolbar floating FAB medium container widthmd.comp.toolbar.floating.fab.medium.container.width
80dp
Toolbar floating FAB medium icon sizemd.comp.toolbar.floating.fab.medium.icon.size
28dp
Toolbar floating FAB medium container shapemd.comp.toolbar.floating.fab.medium.container.shape
20dp
Toolbar floating FAB medium container elevationmd.comp.toolbar.floating.fab.medium.container.elevation
3dp