Material Design 3 "FAB Menu" tokens: All tokens
Preview
Browse tokens
Color
FAB menu - Common
Close button
| Token | Value |
|---|---|
FAB menu close button between spacemd.comp.fab-menu.close-button.between-space | 8dp md.comp.fab-menu.close-button.between-space
|
FAB menu close button container elevationmd.comp.fab-menu.close-button.container.elevation | 6dp md.comp.fab-menu.close-button.container.elevation
|
FAB menu close button container heightmd.comp.fab-menu.close-button.container.height | 56dp md.comp.fab-menu.close-button.container.height |
FAB menu close button container shapemd.comp.fab-menu.close-button.container.shape | Full md.comp.fab-menu.close-button.container.shape
|
FAB menu close widthmd.comp.fab-menu.close-button.container.width | 56dp md.comp.fab-menu.close-button.container.width |
FAB menu close button icon sizemd.comp.fab-menu.close-button.icon.size | 20dp md.comp.fab-menu.close-button.icon.size |
List item
| Token | Value |
|---|---|
FAB menu - menu item between spacemd.comp.fab-menu.menu-item.between-space | 4dp md.comp.fab-menu.menu-item.between-space
|
FAB menu - menu item container elevationmd.comp.fab-menu.menu-item.container.elevation | 0dp md.comp.fab-menu.menu-item.container.elevation
|
FAB menu - menu item container heightmd.comp.fab-menu.menu-item.container.height | 56dp md.comp.fab-menu.menu-item.container.height |
FAB menu - menu item container shapemd.comp.fab-menu.menu-item.container.shape | Full md.comp.fab-menu.menu-item.container.shape
|
FAB menu - menu item icon label spacemd.comp.fab-menu.menu-item.icon-label-space | 8dp md.comp.fab-menu.menu-item.icon-label-space
|
FAB menu - menu item icon sizemd.comp.fab-menu.menu-item.icon.size | 24dp md.comp.fab-menu.menu-item.icon.size |
FAB menu - menu item label textmd.comp.fab-menu.menu-item.label-text | Roboto · 16pt · weight 500 · line height 24pt · tracking 0.15pt md.comp.fab-menu.menu-item.label-text
|
FAB menu - menu item leading spacemd.comp.fab-menu.menu-item.leading-space | 24dp md.comp.fab-menu.menu-item.leading-space
|
FAB menu - menu item trailing spacemd.comp.fab-menu.menu-item.trailing-space | 24dp md.comp.fab-menu.menu-item.trailing-space
|
FAB menu list items - Color - Primary
Enabled
| Token | Value |
|---|---|
FAB menu primary list item container colormd.comp.fab-menu.primary-container.list-item.container.color | #EADDFF md.comp.fab-menu.primary-container.list-item.container.color
|
FAB menu primary list item container shadow colormd.comp.fab-menu.primary-container.list-item.container.shadow-color | #000000 md.comp.fab-menu.primary-container.list-item.container.shadow-color
|
FAB menu primary list item icon colormd.comp.fab-menu.primary-container.list-item.icon.color | #4F378B md.comp.fab-menu.primary-container.list-item.icon.color
|
FAB menu primary list item label text colormd.comp.fab-menu.primary-container.list-item.label-text.color | #4F378B md.comp.fab-menu.primary-container.list-item.label-text.color
|
Hovered
| Token | Value |
|---|---|
FAB menu primary list item hovered container elevationmd.comp.fab-menu.primary-container.list-item.hovered.container.elevation | 8dp md.comp.fab-menu.primary-container.list-item.hovered.container.elevation
|
FAB menu primary list item hovered icon colormd.comp.fab-menu.primary-container.list-item.hovered.icon.color | #4F378B md.comp.fab-menu.primary-container.list-item.hovered.icon.color
|
FAB menu primary list item hovered label text colormd.comp.fab-menu.primary-container.list-item.hovered.label-text.color | #4F378B md.comp.fab-menu.primary-container.list-item.hovered.label-text.color
|
FAB menu primary list item hovered state layer colormd.comp.fab-menu.primary-container.list-item.hovered.state-layer.color | #4F378B md.comp.fab-menu.primary-container.list-item.hovered.state-layer.color
|
FAB menu primary list item hovered state layer opacitymd.comp.fab-menu.primary-container.list-item.hovered.state-layer.opacity | 8% md.comp.fab-menu.primary-container.list-item.hovered.state-layer.opacity
|
Focused
| Token | Value |
|---|---|
FAB menu primary list item focused container elevationmd.comp.fab-menu.primary-container.list-item.focused.container.elevation | 6dp md.comp.fab-menu.primary-container.list-item.focused.container.elevation
|
FAB menu primary list item focused icon colormd.comp.fab-menu.primary-container.list-item.focused.icon.color | #4F378B md.comp.fab-menu.primary-container.list-item.focused.icon.color
|
FAB menu primary list item focused label text colormd.comp.fab-menu.primary-container.list-item.focused.label-text.color | #4F378B md.comp.fab-menu.primary-container.list-item.focused.label-text.color
|
FAB menu primary list item focused state layer colormd.comp.fab-menu.primary-container.list-item.focused.state-layer.color | #4F378B md.comp.fab-menu.primary-container.list-item.focused.state-layer.color
|
FAB menu primary list item focused state layer opacitymd.comp.fab-menu.primary-container.list-item.focused.state-layer.opacity | 10% md.comp.fab-menu.primary-container.list-item.focused.state-layer.opacity
|
Pressed
| Token | Value |
|---|---|
FAB menu primary list item pressed container elevationmd.comp.fab-menu.primary-container.list-item.pressed.container.elevation | 6dp md.comp.fab-menu.primary-container.list-item.pressed.container.elevation
|
FAB menu primary list item pressed icon colormd.comp.fab-menu.primary-container.list-item.pressed.icon.color | #4F378B md.comp.fab-menu.primary-container.list-item.pressed.icon.color
|
FAB menu primary list item pressed label text colormd.comp.fab-menu.primary-container.list-item.pressed.label-text.color | #4F378B md.comp.fab-menu.primary-container.list-item.pressed.label-text.color
|
FAB menu primary list item pressed state layer colormd.comp.fab-menu.primary-container.list-item.pressed.state-layer.color | #4F378B md.comp.fab-menu.primary-container.list-item.pressed.state-layer.color
|
FAB menu primary list item pressed state layer opacitymd.comp.fab-menu.primary-container.list-item.pressed.state-layer.opacity | 10% md.comp.fab-menu.primary-container.list-item.pressed.state-layer.opacity
|
FAB menu close button - Color - Primary
Enabled
| Token | Value |
|---|---|
FAB menu primary close button container colormd.comp.fab-menu.primary.close-button.container.color | #6750A4 md.comp.fab-menu.primary.close-button.container.color
|
FAB menu primary close button container shadow colormd.comp.fab-menu.primary.close-button.container.shadow-color | #000000 md.comp.fab-menu.primary.close-button.container.shadow-color
|
FAB menu primary close button icon colormd.comp.fab-menu.primary.close-button.icon.color | #FFFFFF md.comp.fab-menu.primary.close-button.icon.color
|
Hovered
| Token | Value |
|---|---|
FAB menu primary close button hovered container elevationmd.comp.fab-menu.primary.close-button.hovered.container.elevation | 8dp md.comp.fab-menu.primary.close-button.hovered.container.elevation
|
FAB menu primary close button hovered icon colormd.comp.fab-menu.primary.close-button.hovered.icon.color | #FFFFFF md.comp.fab-menu.primary.close-button.hovered.icon.color
|
FAB menu primary close button hovered state layer colormd.comp.fab-menu.primary.close-button.hovered.state-layer.color | #FFFFFF md.comp.fab-menu.primary.close-button.hovered.state-layer.color
|
FAB menu primary close button hovered state layer opacitymd.comp.fab-menu.primary.close-button.hovered.state-layer.opacity | 8% md.comp.fab-menu.primary.close-button.hovered.state-layer.opacity
|
Focused
| Token | Value |
|---|---|
FAB menu primary close button focused container elevationmd.comp.fab-menu.primary.close-button.focused.container.elevation | 6dp md.comp.fab-menu.primary.close-button.focused.container.elevation
|
FAB menu primary close button focused icon colormd.comp.fab-menu.primary.close-button.focused.icon.color | #FFFFFF md.comp.fab-menu.primary.close-button.focused.icon.color
|
FAB menu primary close button focused state layer colormd.comp.fab-menu.primary.close-button.focused.state-layer.color | #FFFFFF md.comp.fab-menu.primary.close-button.focused.state-layer.color
|
FAB menu primary close button focused state layer opacitymd.comp.fab-menu.primary.close-button.focused.state-layer.opacity | 10% md.comp.fab-menu.primary.close-button.focused.state-layer.opacity
|
Pressed
| Token | Value |
|---|---|
FAB menu primary close button pressed container elevationmd.comp.fab-menu.primary.close-button.pressed.container.elevation | 6dp md.comp.fab-menu.primary.close-button.pressed.container.elevation
|
FAB menu primary close button pressed icon colormd.comp.fab-menu.primary.close-button.pressed.icon.color | #FFFFFF md.comp.fab-menu.primary.close-button.pressed.icon.color
|
FAB menu primary close button pressed state layer colormd.comp.fab-menu.primary.close-button.pressed.state-layer.color | #FFFFFF md.comp.fab-menu.primary.close-button.pressed.state-layer.color
|
FAB menu primary close button pressed state layer opacitymd.comp.fab-menu.primary.close-button.pressed.state-layer.opacity | 10% md.comp.fab-menu.primary.close-button.pressed.state-layer.opacity
|
FAB menu list items - Color - Secondary
Enabled
| Token | Value |
|---|---|
FAB menu secondary list item container colormd.comp.fab-menu.secondary-container.list-item.container.color | #E8DEF8 md.comp.fab-menu.secondary-container.list-item.container.color
|
FAB menu secondary list item container shadow colormd.comp.fab-menu.secondary-container.list-item.container.shadow-color | #000000 md.comp.fab-menu.secondary-container.list-item.container.shadow-color
|
FAB menu secondary list item icon colormd.comp.fab-menu.secondary-container.list-item.icon.color | #4A4458 md.comp.fab-menu.secondary-container.list-item.icon.color
|
FAB menu secondary list item label text colormd.comp.fab-menu.secondary-container.list-item.label-text.color | #4A4458 md.comp.fab-menu.secondary-container.list-item.label-text.color
|
Hovered
| Token | Value |
|---|---|
FAB menu secondary list item hovered container elevationmd.comp.fab-menu.secondary-container.list-item.hovered.container.elevation | 8dp md.comp.fab-menu.secondary-container.list-item.hovered.container.elevation
|
FAB menu secondary list item hovered icon colormd.comp.fab-menu.secondary-container.list-item.hovered.icon.color | #4A4458 md.comp.fab-menu.secondary-container.list-item.hovered.icon.color
|
FAB menu secondary list item hovered label text colormd.comp.fab-menu.secondary-container.list-item.hovered.label-text.color | #4A4458 md.comp.fab-menu.secondary-container.list-item.hovered.label-text.color
|
FAB menu secondary list item hovered state layer colormd.comp.fab-menu.secondary-container.list-item.hovered.state-layer.color | #4A4458 md.comp.fab-menu.secondary-container.list-item.hovered.state-layer.color
|
FAB menu secondary list item hovered state layer opacitymd.comp.fab-menu.secondary-container.list-item.hovered.state-layer.opacity | 8% md.comp.fab-menu.secondary-container.list-item.hovered.state-layer.opacity
|
Focused
| Token | Value |
|---|---|
FAB menu secondary list item focused container elevationmd.comp.fab-menu.secondary-container.list-item.focused.container.elevation | 6dp md.comp.fab-menu.secondary-container.list-item.focused.container.elevation
|
FAB menu secondary list item focused icon colormd.comp.fab-menu.secondary-container.list-item.focused.icon.color | #4A4458 md.comp.fab-menu.secondary-container.list-item.focused.icon.color
|
FAB menu secondary list item focused label text colormd.comp.fab-menu.secondary-container.list-item.focused.label-text.color | #4A4458 md.comp.fab-menu.secondary-container.list-item.focused.label-text.color
|
FAB menu secondary list item focused state layer colormd.comp.fab-menu.secondary-container.list-item.focused.state-layer.color | #4A4458 md.comp.fab-menu.secondary-container.list-item.focused.state-layer.color
|
FAB menu secondary list item focused state layer opacitymd.comp.fab-menu.secondary-container.list-item.focused.state-layer.opacity | 10% md.comp.fab-menu.secondary-container.list-item.focused.state-layer.opacity
|
Pressed
| Token | Value |
|---|---|
FAB menu secondary list item pressed container elevationmd.comp.fab-menu.secondary-container.list-item.pressed.container.elevation | 6dp md.comp.fab-menu.secondary-container.list-item.pressed.container.elevation
|
FAB menu secondary list item pressed icon colormd.comp.fab-menu.secondary-container.list-item.pressed.icon.color | #4A4458 md.comp.fab-menu.secondary-container.list-item.pressed.icon.color
|
FAB menu secondary list item pressed label text colormd.comp.fab-menu.secondary-container.list-item.pressed.label-text.color | #4A4458 md.comp.fab-menu.secondary-container.list-item.pressed.label-text.color
|
FAB menu secondary list item pressed state layer colormd.comp.fab-menu.secondary-container.list-item.pressed.state-layer.color | #4A4458 md.comp.fab-menu.secondary-container.list-item.pressed.state-layer.color
|
FAB menu secondary list item pressed state layer opacitymd.comp.fab-menu.secondary-container.list-item.pressed.state-layer.opacity | 10% md.comp.fab-menu.secondary-container.list-item.pressed.state-layer.opacity
|
FAB menu close button - Color - Secondary
Enabled
| Token | Value |
|---|---|
FAB menu secondary close button container colormd.comp.fab-menu.secondary.close-button.container.color | #625B71 md.comp.fab-menu.secondary.close-button.container.color
|
FAB menu secondary close button container shadow colormd.comp.fab-menu.secondary.close-button.container.shadow-color | #000000 md.comp.fab-menu.secondary.close-button.container.shadow-color
|
FAB menu secondary close button icon colormd.comp.fab-menu.secondary.close-button.icon.color | #FFFFFF md.comp.fab-menu.secondary.close-button.icon.color
|
Hovered
| Token | Value |
|---|---|
FAB menu secondary close button hovered container elevationmd.comp.fab-menu.secondary.close-button.hovered.container.elevation | 8dp md.comp.fab-menu.secondary.close-button.hovered.container.elevation
|
FAB menu secondary close button hovered icon colormd.comp.fab-menu.secondary.close-button.hovered.icon.color | #FFFFFF md.comp.fab-menu.secondary.close-button.hovered.icon.color
|
FAB menu secondary close button hovered state layer colormd.comp.fab-menu.secondary.close-button.hovered.state-layer.color | #FFFFFF md.comp.fab-menu.secondary.close-button.hovered.state-layer.color
|
FAB menu secondary close button hovered state layer opacitymd.comp.fab-menu.secondary.close-button.hovered.state-layer.opacity | 8% md.comp.fab-menu.secondary.close-button.hovered.state-layer.opacity
|
Focused
| Token | Value |
|---|---|
FAB menu secondary close button focused container elevationmd.comp.fab-menu.secondary.close-button.focused.container.elevation | 6dp md.comp.fab-menu.secondary.close-button.focused.container.elevation
|
FAB menu secondary close button focused icon colormd.comp.fab-menu.secondary.close-button.focused.icon.color | #FFFFFF md.comp.fab-menu.secondary.close-button.focused.icon.color
|
FAB menu secondary close button focused state layer colormd.comp.fab-menu.secondary.close-button.focused.state-layer.color | #FFFFFF md.comp.fab-menu.secondary.close-button.focused.state-layer.color
|
FAB menu secondary close button focused state layer opacitymd.comp.fab-menu.secondary.close-button.focused.state-layer.opacity | 10% md.comp.fab-menu.secondary.close-button.focused.state-layer.opacity
|
Pressed
| Token | Value |
|---|---|
FAB menu secondary close button pressed container elevationmd.comp.fab-menu.secondary.close-button.pressed.container.elevation | 6dp md.comp.fab-menu.secondary.close-button.pressed.container.elevation
|
FAB menu secondary close button pressed icon colormd.comp.fab-menu.secondary.close-button.pressed.icon.color | #FFFFFF md.comp.fab-menu.secondary.close-button.pressed.icon.color
|
FAB menu secondary close button pressed state layer colormd.comp.fab-menu.secondary.close-button.pressed.state-layer.color | #FFFFFF md.comp.fab-menu.secondary.close-button.pressed.state-layer.color
|
FAB menu secondary close button pressed state layer opacitymd.comp.fab-menu.secondary.close-button.pressed.state-layer.opacity | 10% md.comp.fab-menu.secondary.close-button.pressed.state-layer.opacity
|
FAB menu list items - Color - Tertiary
Enabled
| Token | Value |
|---|---|
FAB menu tertiary list item container colormd.comp.fab-menu.tertiary-container.list-item.container.color | #FFD8E4 md.comp.fab-menu.tertiary-container.list-item.container.color
|
FAB menu tertiary list item container shadow colormd.comp.fab-menu.tertiary-container.list-item.container.shadow-color | #000000 md.comp.fab-menu.tertiary-container.list-item.container.shadow-color
|
FAB menu tertiary list item icon colormd.comp.fab-menu.tertiary-container.list-item.icon.color | #633B48 md.comp.fab-menu.tertiary-container.list-item.icon.color
|
FAB menu tertiary list item label text colormd.comp.fab-menu.tertiary-container.list-item.label-text.color | #633B48 md.comp.fab-menu.tertiary-container.list-item.label-text.color
|
Hovered
| Token | Value |
|---|---|
FAB menu tertiary list item hovered container elevationmd.comp.fab-menu.tertiary-container.list-item.hovered.container.elevation | 8dp md.comp.fab-menu.tertiary-container.list-item.hovered.container.elevation
|
FAB menu tertiary list item hovered icon colormd.comp.fab-menu.tertiary-container.list-item.hovered.icon.color | #633B48 md.comp.fab-menu.tertiary-container.list-item.hovered.icon.color
|
FAB menu tertiary list item hovered label text colormd.comp.fab-menu.tertiary-container.list-item.hovered.label-text.color | #633B48 md.comp.fab-menu.tertiary-container.list-item.hovered.label-text.color
|
FAB menu tertiary list item hovered state layer colormd.comp.fab-menu.tertiary-container.list-item.hovered.state-layer.color | #633B48 md.comp.fab-menu.tertiary-container.list-item.hovered.state-layer.color
|
FAB menu tertiary list item hovered state layer opacitymd.comp.fab-menu.tertiary-container.list-item.hovered.state-layer.opacity | 8% md.comp.fab-menu.tertiary-container.list-item.hovered.state-layer.opacity
|
Focused
| Token | Value |
|---|---|
FAB menu tertiary list item focused container elevationmd.comp.fab-menu.tertiary-container.list-item.focused.container.elevation | 6dp md.comp.fab-menu.tertiary-container.list-item.focused.container.elevation
|
FAB menu tertiary list item focused icon colormd.comp.fab-menu.tertiary-container.list-item.focused.icon.color | #633B48 md.comp.fab-menu.tertiary-container.list-item.focused.icon.color
|
FAB menu tertiary list item focused label text colormd.comp.fab-menu.tertiary-container.list-item.focused.label-text.color | #633B48 md.comp.fab-menu.tertiary-container.list-item.focused.label-text.color
|
FAB menu tertiary list item focused state layer colormd.comp.fab-menu.tertiary-container.list-item.focused.state-layer.color | #633B48 md.comp.fab-menu.tertiary-container.list-item.focused.state-layer.color
|
FAB menu tertiary list item focused state layer opacitymd.comp.fab-menu.tertiary-container.list-item.focused.state-layer.opacity | 10% md.comp.fab-menu.tertiary-container.list-item.focused.state-layer.opacity
|
Pressed
| Token | Value |
|---|---|
FAB menu tertiary list item pressed container elevationmd.comp.fab-menu.tertiary-container.list-item.pressed.container.elevation | 6dp md.comp.fab-menu.tertiary-container.list-item.pressed.container.elevation
|
FAB menu tertiary list item pressed icon colormd.comp.fab-menu.tertiary-container.list-item.pressed.icon.color | #633B48 md.comp.fab-menu.tertiary-container.list-item.pressed.icon.color
|
FAB menu tertiary list item pressed label text colormd.comp.fab-menu.tertiary-container.list-item.pressed.label-text.color | #633B48 md.comp.fab-menu.tertiary-container.list-item.pressed.label-text.color
|
FAB menu tertiary list item pressed state layer colormd.comp.fab-menu.tertiary-container.list-item.pressed.state-layer.color | #633B48 md.comp.fab-menu.tertiary-container.list-item.pressed.state-layer.color
|
FAB menu tertiary list item pressed state layer opacitymd.comp.fab-menu.tertiary-container.list-item.pressed.state-layer.opacity | 10% md.comp.fab-menu.tertiary-container.list-item.pressed.state-layer.opacity
|
FAB menu close button - Color - Tertiary
Enabled
| Token | Value |
|---|---|
FAB menu tertiary close button container colormd.comp.fab-menu.tertiary.close-button.container.color | #7D5260 md.comp.fab-menu.tertiary.close-button.container.color
|
FAB menu tertiary close button container shadow colormd.comp.fab-menu.tertiary.close-button.container.shadow-color | #000000 md.comp.fab-menu.tertiary.close-button.container.shadow-color
|
FAB menu tertiary close button icon colormd.comp.fab-menu.tertiary.close-button.icon.color | #FFFFFF md.comp.fab-menu.tertiary.close-button.icon.color
|
Hovered
| Token | Value |
|---|---|
FAB menu tertiary close button hovered container elevationmd.comp.fab-menu.tertiary.close-button.hovered.container.elevation | 8dp md.comp.fab-menu.tertiary.close-button.hovered.container.elevation
|
FAB menu tertiary close button hovered icon colormd.comp.fab-menu.tertiary.close-button.hovered.icon.color | #FFFFFF md.comp.fab-menu.tertiary.close-button.hovered.icon.color
|
FAB menu tertiary close button hovered state layer colormd.comp.fab-menu.tertiary.close-button.hovered.state-layer.color | #FFFFFF md.comp.fab-menu.tertiary.close-button.hovered.state-layer.color
|
FAB menu tertiary close button hovered state layer opacitymd.comp.fab-menu.tertiary.close-button.hovered.state-layer.opacity | 8% md.comp.fab-menu.tertiary.close-button.hovered.state-layer.opacity
|
Focused
| Token | Value |
|---|---|
FAB menu tertiary close button focused container elevationmd.comp.fab-menu.tertiary.close-button.focused.container.elevation | 6dp md.comp.fab-menu.tertiary.close-button.focused.container.elevation
|
FAB menu tertiary close button focused icon colormd.comp.fab-menu.tertiary.close-button.focused.icon.color | #FFFFFF md.comp.fab-menu.tertiary.close-button.focused.icon.color
|
FAB menu tertiary close button focused state layer colormd.comp.fab-menu.tertiary.close-button.focused.state-layer.color | #FFFFFF md.comp.fab-menu.tertiary.close-button.focused.state-layer.color
|
FAB menu tertiary close button focused state layer opacitymd.comp.fab-menu.tertiary.close-button.focused.state-layer.opacity | 10% md.comp.fab-menu.tertiary.close-button.focused.state-layer.opacity
|
Pressed
| Token | Value |
|---|---|
FAB menu tertiary close button pressed container elevationmd.comp.fab-menu.tertiary.close-button.pressed.container.elevation | 6dp md.comp.fab-menu.tertiary.close-button.pressed.container.elevation
|
FAB menu tertiary close button pressed icon colormd.comp.fab-menu.tertiary.close-button.pressed.icon.color | #FFFFFF md.comp.fab-menu.tertiary.close-button.pressed.icon.color
|
FAB menu tertiary close button pressed state layer colormd.comp.fab-menu.tertiary.close-button.pressed.state-layer.color | #FFFFFF md.comp.fab-menu.tertiary.close-button.pressed.state-layer.color
|
FAB menu tertiary close button pressed state layer opacitymd.comp.fab-menu.tertiary.close-button.pressed.state-layer.opacity | 10% md.comp.fab-menu.tertiary.close-button.pressed.state-layer.opacity
|