Material Design 3 "Floating Action Button (FAB)" tokens: All tokens
Preview
Create
Create
Create
Create
Create
Create
Browse tokens
Color
FAB - Size - Regular
| Token | Value |
|---|---|
FAB container heightmd.comp.fab.container.height | 56dp md.comp.fab.container.height |
FAB container shapemd.comp.fab.container.shape | 16dp md.comp.fab.container.shape
|
FAB container widthmd.comp.fab.container.width | 56dp md.comp.fab.container.width |
FAB icon sizemd.comp.fab.icon.size | 24dp md.comp.fab.icon.size |
FAB - Size - Large
| Token | Value |
|---|---|
FAB large container heightmd.comp.fab.large.container.height | 96dp md.comp.fab.large.container.height |
FAB large container shapemd.comp.fab.large.container.shape | 28dp md.comp.fab.large.container.shape
|
FAB large container widthmd.comp.fab.large.container.width | 96dp md.comp.fab.large.container.width |
FAB large icon sizemd.comp.fab.large.icon.size | 36dp md.comp.fab.large.icon.size |
FAB - Size - Medium
| Token | Value |
|---|---|
FAB medium container heightmd.comp.fab.medium.container.height | 80dp md.comp.fab.medium.container.height |
FAB medium container shapemd.comp.fab.medium.container.shape | 20dp md.comp.fab.medium.container.shape
|
FAB medium container widthmd.comp.fab.medium.container.width | 80dp md.comp.fab.medium.container.width |
FAB medium icon sizemd.comp.fab.medium.icon.size | 28dp md.comp.fab.medium.icon.size |
FAB - Color - Tonal primary
Enabled
| Token | Value |
|---|---|
FAB tonal primary container colormd.comp.fab.primary-container.container.color | #EADDFF md.comp.fab.primary-container.container.color
|
FAB tonal primary container elevationmd.comp.fab.primary-container.container.elevation | 6dp md.comp.fab.primary-container.container.elevation
|
FAB tonal primary container shadow colormd.comp.fab.primary-container.container.shadow-color | #000000 md.comp.fab.primary-container.container.shadow-color
|
FAB tonal primary icon colormd.comp.fab.primary-container.icon.color | #4F378B md.comp.fab.primary-container.icon.color
|
Hovered
| Token | Value |
|---|---|
FAB tonal primary hovered container elevationmd.comp.fab.primary-container.hovered.container.elevation | 8dp md.comp.fab.primary-container.hovered.container.elevation
|
FAB tonal primary hovered icon colormd.comp.fab.primary-container.hovered.icon.color | #4F378B md.comp.fab.primary-container.hovered.icon.color
|
FAB tonal primary hovered state layer colormd.comp.fab.primary-container.hovered.state-layer.color | #4F378B md.comp.fab.primary-container.hovered.state-layer.color
|
FAB tonal primary hovered state layer opacitymd.comp.fab.primary-container.hovered.state-layer.opacity | 8% md.comp.fab.primary-container.hovered.state-layer.opacity
|
Focused
| Token | Value |
|---|---|
FAB tonal primary focused container elevationmd.comp.fab.primary-container.focused.container.elevation | 6dp md.comp.fab.primary-container.focused.container.elevation
|
FAB tonal primary focused icon colormd.comp.fab.primary-container.focused.icon.color | #4F378B md.comp.fab.primary-container.focused.icon.color
|
FAB tonal primary focused state layer colormd.comp.fab.primary-container.focused.state-layer.color | #4F378B md.comp.fab.primary-container.focused.state-layer.color
|
FAB tonal primary focused state layer opacitymd.comp.fab.primary-container.focused.state-layer.opacity | 10% md.comp.fab.primary-container.focused.state-layer.opacity
|
Pressed
| Token | Value |
|---|---|
FAB tonal primary pressed container elevationmd.comp.fab.primary-container.pressed.container.elevation | 6dp md.comp.fab.primary-container.pressed.container.elevation
|
FAB tonal primary pressed icon colormd.comp.fab.primary-container.pressed.icon.color | #4F378B md.comp.fab.primary-container.pressed.icon.color
|
FAB tonal primary pressed state layer colormd.comp.fab.primary-container.pressed.state-layer.color | #4F378B md.comp.fab.primary-container.pressed.state-layer.color
|
FAB tonal primary pressed state layer opacitymd.comp.fab.primary-container.pressed.state-layer.opacity | 10% md.comp.fab.primary-container.pressed.state-layer.opacity
|
FAB - Color - Tonal secondary
Enabled
| Token | Value |
|---|---|
FAB tonal secondary container colormd.comp.fab.secondary-container.container.color | #E8DEF8 md.comp.fab.secondary-container.container.color
|
FAB tonal secondary container elevationmd.comp.fab.secondary-container.container.elevation | 6dp md.comp.fab.secondary-container.container.elevation
|
FAB tonal secondary container shadow colormd.comp.fab.secondary-container.container.shadow-color | #000000 md.comp.fab.secondary-container.container.shadow-color
|
FAB tonal secondary icon colormd.comp.fab.secondary-container.icon.color | #4A4458 md.comp.fab.secondary-container.icon.color
|
Hovered
| Token | Value |
|---|---|
FAB tonal secondary hovered container elevationmd.comp.fab.secondary-container.hovered.container.elevation | 8dp md.comp.fab.secondary-container.hovered.container.elevation
|
FAB tonal secondary hovered icon colormd.comp.fab.secondary-container.hovered.icon.color | #4A4458 md.comp.fab.secondary-container.hovered.icon.color
|
FAB tonal secondary hovered state layer colormd.comp.fab.secondary-container.hovered.state-layer.color | #4A4458 md.comp.fab.secondary-container.hovered.state-layer.color
|
FAB tonal secondary hovered state layer opacitymd.comp.fab.secondary-container.hovered.state-layer.opacity | 8% md.comp.fab.secondary-container.hovered.state-layer.opacity
|
Focused
| Token | Value |
|---|---|
FAB tonal secondary focused container elevationmd.comp.fab.secondary-container.focused.container.elevation | 6dp md.comp.fab.secondary-container.focused.container.elevation
|
FAB tonal secondary focused icon colormd.comp.fab.secondary-container.focused.icon.color | #4A4458 md.comp.fab.secondary-container.focused.icon.color
|
FAB tonal secondary focused state layer colormd.comp.fab.secondary-container.focused.state-layer.color | #4A4458 md.comp.fab.secondary-container.focused.state-layer.color
|
FAB tonal secondary focused state layer opacitymd.comp.fab.secondary-container.focused.state-layer.opacity | 10% md.comp.fab.secondary-container.focused.state-layer.opacity
|
Pressed
| Token | Value |
|---|---|
FAB tonal secondary pressed container elevationmd.comp.fab.secondary-container.pressed.container.elevation | 6dp md.comp.fab.secondary-container.pressed.container.elevation
|
FAB tonal secondary pressed icon colormd.comp.fab.secondary-container.pressed.icon.color | #4A4458 md.comp.fab.secondary-container.pressed.icon.color
|
FAB tonal secondary pressed state layer colormd.comp.fab.secondary-container.pressed.state-layer.color | #4A4458 md.comp.fab.secondary-container.pressed.state-layer.color
|
FAB tonal secondary pressed state layer opacitymd.comp.fab.secondary-container.pressed.state-layer.opacity | 10% md.comp.fab.secondary-container.pressed.state-layer.opacity
|
FAB - Size - Small
| Token | Value |
|---|---|
FAB small container heightmd.comp.fab.small.container.height | 40dp md.comp.fab.small.container.height |
FAB small container shapemd.comp.fab.small.container.shape | 12dp md.comp.fab.small.container.shape
|
FAB small container widthmd.comp.fab.small.container.width | 40dp md.comp.fab.small.container.width |
FAB small icon sizemd.comp.fab.small.icon.size | 24dp md.comp.fab.small.icon.size |
FAB - Color - Tonal tertiary
Enabled
| Token | Value |
|---|---|
FAB tonal tertiary container colormd.comp.fab.tertiary-container.container.color | #FFD8E4 md.comp.fab.tertiary-container.container.color
|
FAB tonal tertiary container elevationmd.comp.fab.tertiary-container.container.elevation | 6dp md.comp.fab.tertiary-container.container.elevation
|
FAB tonal tertiary container shadow colormd.comp.fab.tertiary-container.container.shadow-color | #000000 md.comp.fab.tertiary-container.container.shadow-color
|
FAB tonal tertiary icon colormd.comp.fab.tertiary-container.icon.color | #633B48 md.comp.fab.tertiary-container.icon.color
|
Hovered
| Token | Value |
|---|---|
FAB tonal tertiary hovered container elevationmd.comp.fab.tertiary-container.hovered.container.elevation | 8dp md.comp.fab.tertiary-container.hovered.container.elevation
|
FAB tonal tertiary hovered icon colormd.comp.fab.tertiary-container.hovered.icon.color | #633B48 md.comp.fab.tertiary-container.hovered.icon.color
|
FAB tonal tertiary hovered state layer colormd.comp.fab.tertiary-container.hovered.state-layer.color | #633B48 md.comp.fab.tertiary-container.hovered.state-layer.color
|
FAB tonal tertiary hovered state layer opacitymd.comp.fab.tertiary-container.hovered.state-layer.opacity | 8% md.comp.fab.tertiary-container.hovered.state-layer.opacity
|
Focused
| Token | Value |
|---|---|
FAB tonal tertiary focused container elevationmd.comp.fab.tertiary-container.focused.container.elevation | 6dp md.comp.fab.tertiary-container.focused.container.elevation
|
FAB tonal tertiary focused icon colormd.comp.fab.tertiary-container.focused.icon.color | #633B48 md.comp.fab.tertiary-container.focused.icon.color
|
FAB tonal tertiary focused state layer colormd.comp.fab.tertiary-container.focused.state-layer.color | #633B48 md.comp.fab.tertiary-container.focused.state-layer.color
|
FAB tonal tertiary focused state layer opacitymd.comp.fab.tertiary-container.focused.state-layer.opacity | 10% md.comp.fab.tertiary-container.focused.state-layer.opacity
|
Pressed
| Token | Value |
|---|---|
FAB tonal tertiary pressed container elevationmd.comp.fab.tertiary-container.pressed.container.elevation | 6dp md.comp.fab.tertiary-container.pressed.container.elevation
|
FAB tonal tertiary pressed icon colormd.comp.fab.tertiary-container.pressed.icon.color | #633B48 md.comp.fab.tertiary-container.pressed.icon.color
|
FAB tonal tertiary pressed state layer colormd.comp.fab.tertiary-container.pressed.state-layer.color | #633B48 md.comp.fab.tertiary-container.pressed.state-layer.color
|
FAB tonal tertiary pressed state layer opacitymd.comp.fab.tertiary-container.pressed.state-layer.opacity | 10% md.comp.fab.tertiary-container.pressed.state-layer.opacity
|
[Deprecated] FAB - Primary, large
[Deprecated] Enabled
[Deprecated] Container
| Token | Value |
|---|---|
FAB (large primary) container colormd.comp.fab.primary.large.container.color | #EADDFF md.comp.fab.primary.large.container.color
|
FAB (large primary) container elevationmd.comp.fab.primary.large.container.elevation | 6dp md.comp.fab.primary.large.container.elevation
|
FAB (large primary) container heightmd.comp.fab.primary.large.container.height | 96dp md.comp.fab.primary.large.container.height |
FAB (large primary) container shadow colormd.comp.fab.primary.large.container.shadow-color | #000000 md.comp.fab.primary.large.container.shadow-color
|
FAB (large primary) container shapemd.comp.fab.primary.large.container.shape | 28dp md.comp.fab.primary.large.container.shape
|
FAB (large primary) container widthmd.comp.fab.primary.large.container.width | 96dp md.comp.fab.primary.large.container.width |
FAB (large primary) lowered container elevationmd.comp.fab.primary.large.lowered.container.elevation | 1dp md.comp.fab.primary.large.lowered.container.elevation
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (large primary) icon colormd.comp.fab.primary.large.icon.color | #4F378B md.comp.fab.primary.large.icon.color
|
FAB (large primary) icon sizemd.comp.fab.primary.large.icon.size | 36dp md.comp.fab.primary.large.icon.size |
[Deprecated] Hovered
[Deprecated] Container
| Token | Value |
|---|---|
FAB (large primary) hover container elevationmd.comp.fab.primary.large.hover.container.elevation | 8dp md.comp.fab.primary.large.hover.container.elevation
|
FAB (large primary) lowered hover container elevationmd.comp.fab.primary.large.lowered.hover.container.elevation | 3dp md.comp.fab.primary.large.lowered.hover.container.elevation
|
[Deprecated] State layer
| Token | Value |
|---|---|
FAB (large primary) hover state layer colormd.comp.fab.primary.large.hover.state-layer.color | #4F378B md.comp.fab.primary.large.hover.state-layer.color
|
FAB (large primary) hover state layer opacitymd.comp.fab.primary.large.hover.state-layer.opacity | 8% md.comp.fab.primary.large.hover.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (large primary) hover icon colormd.comp.fab.primary.large.hover.icon.color | #4F378B md.comp.fab.primary.large.hover.icon.color
|
[Deprecated] Focused
[Deprecated] Focus indicator
| Token | Value |
|---|---|
FAB (large primary) focus indicator colormd.comp.fab.primary.large.focus.indicator.color | #625B71 md.comp.fab.primary.large.focus.indicator.color
|
FAB (large primary) focus indicator offsetmd.comp.fab.primary.large.focus.indicator.outline.offset | 2dp md.comp.fab.primary.large.focus.indicator.outline.offset
|
FAB (large primary) focus indicator thicknessmd.comp.fab.primary.large.focus.indicator.thickness | 3dp md.comp.fab.primary.large.focus.indicator.thickness
|
[Deprecated] Container
| Token | Value |
|---|---|
FAB (large primary) focus container elevationmd.comp.fab.primary.large.focus.container.elevation | 6dp md.comp.fab.primary.large.focus.container.elevation
|
FAB (large primary) lowered focus container elevationmd.comp.fab.primary.large.lowered.focus.container.elevation | 1dp md.comp.fab.primary.large.lowered.focus.container.elevation
|
[Deprecated] State layer
| Token | Value |
|---|---|
FAB (large primary) focus state layer colormd.comp.fab.primary.large.focus.state-layer.color | #4F378B md.comp.fab.primary.large.focus.state-layer.color
|
FAB (large primary) focus state layer opacitymd.comp.fab.primary.large.focus.state-layer.opacity | 10% md.comp.fab.primary.large.focus.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (large primary) focus icon colormd.comp.fab.primary.large.focus.icon.color | #4F378B md.comp.fab.primary.large.focus.icon.color
|
[Deprecated] Pressed (ripple)
[Deprecated] Container
| Token | Value |
|---|---|
FAB (large primary) lowered pressed container elevationmd.comp.fab.primary.large.lowered.pressed.container.elevation | 1dp md.comp.fab.primary.large.lowered.pressed.container.elevation
|
FAB (large primary) pressed container elevationmd.comp.fab.primary.large.pressed.container.elevation | 6dp md.comp.fab.primary.large.pressed.container.elevation
|
[Deprecated] State layer
| Token | Value |
|---|---|
FAB (large primary) pressed state layer colormd.comp.fab.primary.large.pressed.state-layer.color | #4F378B md.comp.fab.primary.large.pressed.state-layer.color
|
FAB (large primary) pressed state layer opacitymd.comp.fab.primary.large.pressed.state-layer.opacity | 10% md.comp.fab.primary.large.pressed.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (large primary) pressed icon colormd.comp.fab.primary.large.pressed.icon.color | #4F378B md.comp.fab.primary.large.pressed.icon.color
|
[Deprecated] FAB - Tertiary, small
[Deprecated] Enabled
[Deprecated] Container
| Token | Value |
|---|---|
FAB (small tertiary) container colormd.comp.fab.tertiary.small.container.color | #FFD8E4 md.comp.fab.tertiary.small.container.color
|
FAB (small tertiary) container elevationmd.comp.fab.tertiary.small.container.elevation | 6dp md.comp.fab.tertiary.small.container.elevation
|
FAB (small tertiary) container heightmd.comp.fab.tertiary.small.container.height | 40dp md.comp.fab.tertiary.small.container.height |
FAB (small tertiary) container shadow colormd.comp.fab.tertiary.small.container.shadow-color | #000000 md.comp.fab.tertiary.small.container.shadow-color
|
FAB (small tertiary) container shapemd.comp.fab.tertiary.small.container.shape | 12dp md.comp.fab.tertiary.small.container.shape
|
FAB (small tertiary) container widthmd.comp.fab.tertiary.small.container.width | 40dp md.comp.fab.tertiary.small.container.width |
FAB (small tertiary) lowered container elevationmd.comp.fab.tertiary.small.lowered.container.elevation | 1dp md.comp.fab.tertiary.small.lowered.container.elevation
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (small tertiary) icon colormd.comp.fab.tertiary.small.icon.color | #633B48 md.comp.fab.tertiary.small.icon.color
|
FAB (small tertiary) icon sizemd.comp.fab.tertiary.small.icon.size | 24dp md.comp.fab.tertiary.small.icon.size |
[Deprecated] Hovered
[Deprecated] Container
| Token | Value |
|---|---|
FAB (small tertiary) hover container elevationmd.comp.fab.tertiary.small.hover.container.elevation | 8dp md.comp.fab.tertiary.small.hover.container.elevation
|
FAB (small tertiary) lowered hover container elevationmd.comp.fab.tertiary.small.lowered.hover.container.elevation | 3dp md.comp.fab.tertiary.small.lowered.hover.container.elevation
|
[Deprecated] State layer
| Token | Value |
|---|---|
FAB (small tertiary) hover state layer colormd.comp.fab.tertiary.small.hover.state-layer.color | #633B48 md.comp.fab.tertiary.small.hover.state-layer.color
|
FAB (small tertiary) hover state layer opacitymd.comp.fab.tertiary.small.hover.state-layer.opacity | 8% md.comp.fab.tertiary.small.hover.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (small tertiary) hover icon colormd.comp.fab.tertiary.small.hover.icon.color | #633B48 md.comp.fab.tertiary.small.hover.icon.color
|
[Deprecated] Focused
[Deprecated] Focus indicator
| Token | Value |
|---|---|
FAB (small tertiary) focus indicator colormd.comp.fab.tertiary.small.focus.indicator.color | #625B71 md.comp.fab.tertiary.small.focus.indicator.color
|
FAB (small tertiary) focus indicator offsetmd.comp.fab.tertiary.small.focus.indicator.outline.offset | 2dp md.comp.fab.tertiary.small.focus.indicator.outline.offset
|
FAB (small tertiary) focus indicator thicknessmd.comp.fab.tertiary.small.focus.indicator.thickness | 3dp md.comp.fab.tertiary.small.focus.indicator.thickness
|
[Deprecated] Container
| Token | Value |
|---|---|
FAB (small tertiary) focus container elevationmd.comp.fab.tertiary.small.focus.container.elevation | 6dp md.comp.fab.tertiary.small.focus.container.elevation
|
FAB (small tertiary) lowered focus container elevationmd.comp.fab.tertiary.small.lowered.focus.container.elevation | 1dp md.comp.fab.tertiary.small.lowered.focus.container.elevation
|
[Deprecated] State layer
| Token | Value |
|---|---|
FAB (small tertiary) focus state layer colormd.comp.fab.tertiary.small.focus.state-layer.color | #633B48 md.comp.fab.tertiary.small.focus.state-layer.color
|
FAB (small tertiary) focus state layer opacitymd.comp.fab.tertiary.small.focus.state-layer.opacity | 10% md.comp.fab.tertiary.small.focus.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (small tertiary) focus icon colormd.comp.fab.tertiary.small.focus.icon.color | #633B48 md.comp.fab.tertiary.small.focus.icon.color
|
[Deprecated] Pressed (ripple)
[Deprecated] Container
| Token | Value |
|---|---|
FAB (small tertiary) lowered pressed container elevationmd.comp.fab.tertiary.small.lowered.pressed.container.elevation | 1dp md.comp.fab.tertiary.small.lowered.pressed.container.elevation
|
FAB (small tertiary) pressed container elevationmd.comp.fab.tertiary.small.pressed.container.elevation | 6dp md.comp.fab.tertiary.small.pressed.container.elevation
|
[Deprecated] State layer
| Token | Value |
|---|---|
FAB (small tertiary) pressed state layer colormd.comp.fab.tertiary.small.pressed.state-layer.color | #633B48 md.comp.fab.tertiary.small.pressed.state-layer.color
|
FAB (small tertiary) pressed state layer opacitymd.comp.fab.tertiary.small.pressed.state-layer.opacity | 10% md.comp.fab.tertiary.small.pressed.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (small tertiary) pressed icon colormd.comp.fab.tertiary.small.pressed.icon.color | #633B48 md.comp.fab.tertiary.small.pressed.icon.color
|
[Deprecated] FAB - Secondary, large
[Deprecated] Enabled
[Deprecated] Container
| Token | Value |
|---|---|
FAB (large secondary) container colormd.comp.fab.secondary.large.container.color | #E8DEF8 md.comp.fab.secondary.large.container.color
|
FAB (large secondary) container elevationmd.comp.fab.secondary.large.container.elevation | 6dp md.comp.fab.secondary.large.container.elevation
|
FAB (large secondary) container heightmd.comp.fab.secondary.large.container.height | 96dp md.comp.fab.secondary.large.container.height |
FAB (large secondary) container shadow colormd.comp.fab.secondary.large.container.shadow-color | #000000 md.comp.fab.secondary.large.container.shadow-color
|
FAB (large secondary) container shapemd.comp.fab.secondary.large.container.shape | 28dp md.comp.fab.secondary.large.container.shape
|
FAB (large secondary) container widthmd.comp.fab.secondary.large.container.width | 96dp md.comp.fab.secondary.large.container.width |
FAB (secondary) lowered container elevationmd.comp.fab.secondary.large.lowered.container.elevation | 1dp md.comp.fab.secondary.large.lowered.container.elevation
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (large secondary) icon colormd.comp.fab.secondary.large.icon.color | #4A4458 md.comp.fab.secondary.large.icon.color
|
FAB (large secondary) icon sizemd.comp.fab.secondary.large.icon.size | 36dp md.comp.fab.secondary.large.icon.size |
[Deprecated] Hovered
[Deprecated] Container
| Token | Value |
|---|---|
FAB (large secondary) hover container elevationmd.comp.fab.secondary.large.hover.container.elevation | 8dp md.comp.fab.secondary.large.hover.container.elevation
|
FAB (secondary) lowered hover container elevationmd.comp.fab.secondary.large.lowered.hover.container.elevation | 3dp md.comp.fab.secondary.large.lowered.hover.container.elevation
|
[Deprecated] State layer
| Token | Value |
|---|---|
FAB (large secondary) hover state layer colormd.comp.fab.secondary.large.hover.state-layer.color | #4A4458 md.comp.fab.secondary.large.hover.state-layer.color
|
FAB (large secondary) hover state layer opacitymd.comp.fab.secondary.large.hover.state-layer.opacity | 8% md.comp.fab.secondary.large.hover.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (large secondary) hover icon colormd.comp.fab.secondary.large.hover.icon.color | #4A4458 md.comp.fab.secondary.large.hover.icon.color
|
[Deprecated] Focused
[Deprecated] Focus indicator
| Token | Value |
|---|---|
FAB (large secondary) focus indicator colormd.comp.fab.secondary.large.focus.indicator.color | #625B71 md.comp.fab.secondary.large.focus.indicator.color
|
FAB (large secondary) focus indicator offsetmd.comp.fab.secondary.large.focus.indicator.outline.offset | 2dp md.comp.fab.secondary.large.focus.indicator.outline.offset
|
FAB (large secondary) focus indicator thicknessmd.comp.fab.secondary.large.focus.indicator.thickness | 3dp md.comp.fab.secondary.large.focus.indicator.thickness
|
[Deprecated] Container
| Token | Value |
|---|---|
FAB (secondary) focus container elevationmd.comp.fab.secondary.large.focus.container.elevation | 6dp md.comp.fab.secondary.large.focus.container.elevation
|
FAB (secondary) lowered focus container elevationmd.comp.fab.secondary.large.lowered.focus.container.elevation | 1dp md.comp.fab.secondary.large.lowered.focus.container.elevation
|
[Deprecated] State layer
| Token | Value |
|---|---|
FAB (large secondary) focus state layer colormd.comp.fab.secondary.large.focus.state-layer.color | #4A4458 md.comp.fab.secondary.large.focus.state-layer.color
|
FAB (large secondary) focus state layer opacitymd.comp.fab.secondary.large.focus.state-layer.opacity | 10% md.comp.fab.secondary.large.focus.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (large secondary) focus icon colormd.comp.fab.secondary.large.focus.icon.color | #4A4458 md.comp.fab.secondary.large.focus.icon.color
|
[Deprecated] Pressed (ripple)
[Deprecated] Container
| Token | Value |
|---|---|
FAB (secondary) lowered pressed container elevationmd.comp.fab.secondary.large.lowered.pressed.container.elevation | 1dp md.comp.fab.secondary.large.lowered.pressed.container.elevation
|
FAB (large secondary) pressed container elevationmd.comp.fab.secondary.large.pressed.container.elevation | 6dp md.comp.fab.secondary.large.pressed.container.elevation
|
[Deprecated] State layer
| Token | Value |
|---|---|
FAB (large secondary) pressed state layer colormd.comp.fab.secondary.large.pressed.state-layer.color | #4A4458 md.comp.fab.secondary.large.pressed.state-layer.color
|
FAB (large secondary) pressed state layer opacitymd.comp.fab.secondary.large.pressed.state-layer.opacity | 10% md.comp.fab.secondary.large.pressed.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (large secondary) pressed icon colormd.comp.fab.secondary.large.pressed.icon.color | #4A4458 md.comp.fab.secondary.large.pressed.icon.color
|
FAB - Color - Tertiary
Enabled
| Token | Value |
|---|---|
FAB tertiary container colormd.comp.fab.tertiary.container.color | #7D5260 md.comp.fab.tertiary.container.color
|
FAB tertiary container elevationmd.comp.fab.tertiary.container.elevation | 6dp md.comp.fab.tertiary.container.elevation
|
FAB tertiary container shadow colormd.comp.fab.tertiary.container.shadow-color | #000000 md.comp.fab.tertiary.container.shadow-color
|
FAB tertiary icon colormd.comp.fab.tertiary.icon.color | #FFFFFF md.comp.fab.tertiary.icon.color
|
Hovered
| Token | Value |
|---|---|
FAB tertiary hovered container elevationmd.comp.fab.tertiary.hovered.container.elevation | 8dp md.comp.fab.tertiary.hovered.container.elevation
|
FAB tertiary hovered icon colormd.comp.fab.tertiary.hovered.icon.color | #FFFFFF md.comp.fab.tertiary.hovered.icon.color
|
FAB tertiary hovered state layer colormd.comp.fab.tertiary.hovered.state-layer.color | #FFFFFF md.comp.fab.tertiary.hovered.state-layer.color
|
FAB tertiary hovered state layer opacitymd.comp.fab.tertiary.hovered.state-layer.opacity | 8% md.comp.fab.tertiary.hovered.state-layer.opacity
|
Focused
| Token | Value |
|---|---|
FAB tertiary focused container elevationmd.comp.fab.tertiary.focused.container.elevation | 6dp md.comp.fab.tertiary.focused.container.elevation
|
FAB tertiary focused icon colormd.comp.fab.tertiary.focused.icon.color | #FFFFFF md.comp.fab.tertiary.focused.icon.color
|
FAB tertiary focused state layer colormd.comp.fab.tertiary.focused.state-layer.color | #FFFFFF md.comp.fab.tertiary.focused.state-layer.color
|
FAB tertiary focused state layer opacitymd.comp.fab.tertiary.focused.state-layer.opacity | 10% md.comp.fab.tertiary.focused.state-layer.opacity
|
Pressed
| Token | Value |
|---|---|
FAB tertiary pressed container elevationmd.comp.fab.tertiary.pressed.container.elevation | 6dp md.comp.fab.tertiary.pressed.container.elevation
|
FAB tertiary pressed icon colormd.comp.fab.tertiary.pressed.icon.color | #FFFFFF md.comp.fab.tertiary.pressed.icon.color
|
FAB tertiary pressed state layer colormd.comp.fab.tertiary.pressed.state-layer.color | #FFFFFF md.comp.fab.tertiary.pressed.state-layer.color
|
FAB tertiary pressed state layer opacitymd.comp.fab.tertiary.pressed.state-layer.opacity | 10% md.comp.fab.tertiary.pressed.state-layer.opacity
|
[Deprecated] Enabled
[Deprecated] Container
| Token | Value |
|---|---|
FAB (tertiary) container heightmd.comp.fab.tertiary.container.height | 56dp md.comp.fab.tertiary.container.height |
FAB (tertiary) container shapemd.comp.fab.tertiary.container.shape | 16dp md.comp.fab.tertiary.container.shape
|
FAB (tertiary) container widthmd.comp.fab.tertiary.container.width | 56dp md.comp.fab.tertiary.container.width |
FAB (tertiary) lowered container elevationmd.comp.fab.tertiary.lowered.container.elevation | 1dp md.comp.fab.tertiary.lowered.container.elevation
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (tertiary) icon sizemd.comp.fab.tertiary.icon.size | 24dp md.comp.fab.tertiary.icon.size |
[Deprecated] Hovered
[Deprecated] Container
| Token | Value |
|---|---|
FAB (tertiary) hover container elevationmd.comp.fab.tertiary.hover.container.elevation | 8dp md.comp.fab.tertiary.hover.container.elevation
|
FAB (tertiary) lowered hover container elevationmd.comp.fab.tertiary.lowered.hover.container.elevation | 3dp md.comp.fab.tertiary.lowered.hover.container.elevation
|
[Deprecated] State layer
| Token | Value |
|---|---|
FAB (tertiary) hover state layer colormd.comp.fab.tertiary.hover.state-layer.color | #633B48 md.comp.fab.tertiary.hover.state-layer.color
|
FAB (tertiary) hover state layer opacitymd.comp.fab.tertiary.hover.state-layer.opacity | 8% md.comp.fab.tertiary.hover.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (tertiary) hover icon colormd.comp.fab.tertiary.hover.icon.color | #633B48 md.comp.fab.tertiary.hover.icon.color
|
[Deprecated] Focused
[Deprecated] Focus indicator
| Token | Value |
|---|---|
FAB (tertiary) focus indicator colormd.comp.fab.tertiary.focus.indicator.color | #625B71 md.comp.fab.tertiary.focus.indicator.color
|
FAB (tertiary) focus indicator offsetmd.comp.fab.tertiary.focus.indicator.outline.offset | 2dp md.comp.fab.tertiary.focus.indicator.outline.offset
|
FAB (tertiary) focus indicator thicknessmd.comp.fab.tertiary.focus.indicator.thickness | 3dp md.comp.fab.tertiary.focus.indicator.thickness
|
[Deprecated] Container
| Token | Value |
|---|---|
FAB (tertiary) focus container elevationmd.comp.fab.tertiary.focus.container.elevation | 6dp md.comp.fab.tertiary.focus.container.elevation
|
FAB (tertiary) lowered focus container elevationmd.comp.fab.tertiary.lowered.focus.container.elevation | 1dp md.comp.fab.tertiary.lowered.focus.container.elevation
|
[Deprecated] State layer
| Token | Value |
|---|---|
FAB (tertiary) focus state layer colormd.comp.fab.tertiary.focus.state-layer.color | #633B48 md.comp.fab.tertiary.focus.state-layer.color
|
FAB (tertiary) focus state layer opacitymd.comp.fab.tertiary.focus.state-layer.opacity | 10% md.comp.fab.tertiary.focus.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (tertiary) focus icon colormd.comp.fab.tertiary.focus.icon.color | #633B48 md.comp.fab.tertiary.focus.icon.color
|
[Deprecated] Pressed (ripple)
[Deprecated] Container
| Token | Value |
|---|---|
FAB (tertiary) lowered pressed container elevationmd.comp.fab.tertiary.lowered.pressed.container.elevation | 1dp md.comp.fab.tertiary.lowered.pressed.container.elevation
|
FAB - Color - Primary
Enabled
| Token | Value |
|---|---|
FAB primary container colormd.comp.fab.primary.container.color | #6750A4 md.comp.fab.primary.container.color
|
FAB primary container elevationmd.comp.fab.primary.container.elevation | 6dp md.comp.fab.primary.container.elevation
|
FAB primary container shadow colormd.comp.fab.primary.container.shadow-color | #000000 md.comp.fab.primary.container.shadow-color
|
FAB primary icon colormd.comp.fab.primary.icon.color | #FFFFFF md.comp.fab.primary.icon.color
|
Hovered
| Token | Value |
|---|---|
FAB primary hovered container elevationmd.comp.fab.primary.hovered.container.elevation | 8dp md.comp.fab.primary.hovered.container.elevation
|
FAB primary hovered icon colormd.comp.fab.primary.hovered.icon.color | #FFFFFF md.comp.fab.primary.hovered.icon.color
|
FAB primary hovered state layer colormd.comp.fab.primary.hovered.state-layer.color | #FFFFFF md.comp.fab.primary.hovered.state-layer.color
|
FAB primary hovered state layer opacitymd.comp.fab.primary.hovered.state-layer.opacity | 8% md.comp.fab.primary.hovered.state-layer.opacity
|
Focused
| Token | Value |
|---|---|
FAB primary focused container elevationmd.comp.fab.primary.focused.container.elevation | 6dp md.comp.fab.primary.focused.container.elevation
|
FAB primary focused icon colormd.comp.fab.primary.focused.icon.color | #FFFFFF md.comp.fab.primary.focused.icon.color
|
FAB primary focused state layer colormd.comp.fab.primary.focused.state-layer.color | #FFFFFF md.comp.fab.primary.focused.state-layer.color
|
FAB primary focused state layer opacitymd.comp.fab.primary.focused.state-layer.opacity | 10% md.comp.fab.primary.focused.state-layer.opacity
|
Pressed
| Token | Value |
|---|---|
FAB primary pressed container elevationmd.comp.fab.primary.pressed.container.elevation | 6dp md.comp.fab.primary.pressed.container.elevation
|
FAB primary pressed icon colormd.comp.fab.primary.pressed.icon.color | #FFFFFF md.comp.fab.primary.pressed.icon.color
|
FAB primary pressed state layer colormd.comp.fab.primary.pressed.state-layer.color | #FFFFFF md.comp.fab.primary.pressed.state-layer.color
|
FAB primary pressed state layer opacitymd.comp.fab.primary.pressed.state-layer.opacity | 10% md.comp.fab.primary.pressed.state-layer.opacity
|
[Deprecated] Enabled
[Deprecated] Container
| Token | Value |
|---|---|
FAB (primary) container heightmd.comp.fab.primary.container.height | 56dp md.comp.fab.primary.container.height |
FAB (primary) container shapemd.comp.fab.primary.container.shape | 16dp md.comp.fab.primary.container.shape
|
FAB (primary) container widthmd.comp.fab.primary.container.width | 56dp md.comp.fab.primary.container.width |
FAB (primary) lowered container elevationmd.comp.fab.primary.lowered.container.elevation | 1dp md.comp.fab.primary.lowered.container.elevation
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (primary) icon sizemd.comp.fab.primary.icon.size | 24dp md.comp.fab.primary.icon.size |
[Deprecated] Hovered
[Deprecated] Container
| Token | Value |
|---|---|
FAB (primary) hover container elevationmd.comp.fab.primary.hover.container.elevation | 8dp md.comp.fab.primary.hover.container.elevation
|
FAB (primary) lowered hover container elevationmd.comp.fab.primary.lowered.hover.container.elevation | 3dp md.comp.fab.primary.lowered.hover.container.elevation
|
[Deprecated] State layer
| Token | Value |
|---|---|
FAB (primary) hover state layer colormd.comp.fab.primary.hover.state-layer.color | #4F378B md.comp.fab.primary.hover.state-layer.color
|
FAB (primary) hover state layer opacitymd.comp.fab.primary.hover.state-layer.opacity | 8% md.comp.fab.primary.hover.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (primary) hover icon colormd.comp.fab.primary.hover.icon.color | #4F378B md.comp.fab.primary.hover.icon.color
|
[Deprecated] Focused
[Deprecated] Focus indicator
| Token | Value |
|---|---|
FAB (primary) focus indicator colormd.comp.fab.primary.focus.indicator.color | #625B71 md.comp.fab.primary.focus.indicator.color
|
FAB (primary) focus indicator offsetmd.comp.fab.primary.focus.indicator.outline.offset | 2dp md.comp.fab.primary.focus.indicator.outline.offset
|
FAB (primary) focus indicator thicknessmd.comp.fab.primary.focus.indicator.thickness | 3dp md.comp.fab.primary.focus.indicator.thickness
|
[Deprecated] Container
| Token | Value |
|---|---|
FAB (primary) focus container elevationmd.comp.fab.primary.focus.container.elevation | 6dp md.comp.fab.primary.focus.container.elevation
|
FAB (primary) lowered focus container elevationmd.comp.fab.primary.lowered.focus.container.elevation | 1dp md.comp.fab.primary.lowered.focus.container.elevation
|
[Deprecated] State layer
| Token | Value |
|---|---|
FAB (primary) focus state layer colormd.comp.fab.primary.focus.state-layer.color | #4F378B md.comp.fab.primary.focus.state-layer.color
|
FAB (primary) focus state layer opacitymd.comp.fab.primary.focus.state-layer.opacity | 10% md.comp.fab.primary.focus.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (primary) focus icon colormd.comp.fab.primary.focus.icon.color | #4F378B md.comp.fab.primary.focus.icon.color
|
[Deprecated] Pressed (ripple)
[Deprecated] Container
| Token | Value |
|---|---|
FAB (primary) lowered pressed container elevationmd.comp.fab.primary.lowered.pressed.container.elevation | 1dp md.comp.fab.primary.lowered.pressed.container.elevation
|
FAB - Color - Surface
Enabled
Container
| Token | Value |
|---|---|
FAB (surface) container colormd.comp.fab.surface.container.color | #ECE6F0 md.comp.fab.surface.container.color
|
FAB (surface) container elevationmd.comp.fab.surface.container.elevation | 6dp md.comp.fab.surface.container.elevation
|
FAB (surface) container heightmd.comp.fab.surface.container.height | 56dp md.comp.fab.surface.container.height |
FAB (surface) container shadow colormd.comp.fab.surface.container.shadow-color | #000000 md.comp.fab.surface.container.shadow-color
|
FAB (surface) container shapemd.comp.fab.surface.container.shape | 16dp md.comp.fab.surface.container.shape
|
FAB (surface) container surface tint layer colormd.comp.fab.surface.container.surface-tint-layer.color | #6750A4 md.comp.fab.surface.container.surface-tint-layer.color
|
FAB (surface) container widthmd.comp.fab.surface.container.width | 56dp md.comp.fab.surface.container.width |
FAB (surface) lowered container colormd.comp.fab.surface.lowered.container.color | #F7F2FA md.comp.fab.surface.lowered.container.color
|
Surface FAB lowered container elevationmd.comp.fab.surface.lowered.container.elevation | 1dp md.comp.fab.surface.lowered.container.elevation
|
Icon
| Token | Value |
|---|---|
FAB (surface) icon colormd.comp.fab.surface.icon.color | #6750A4 md.comp.fab.surface.icon.color
|
FAB (surface) icon sizemd.comp.fab.surface.icon.size | 24dp md.comp.fab.surface.icon.size |
Hovered
Container
| Token | Value |
|---|---|
FAB (surface) hover container elevationmd.comp.fab.surface.hover.container.elevation | 8dp md.comp.fab.surface.hover.container.elevation
|
Surface FAB lowered hover container elevationmd.comp.fab.surface.lowered.hover.container.elevation | 3dp md.comp.fab.surface.lowered.hover.container.elevation
|
State layer
| Token | Value |
|---|---|
FAB (surface) hover state layer colormd.comp.fab.surface.hover.state-layer.color | #6750A4 md.comp.fab.surface.hover.state-layer.color
|
FAB (surface) hover state layer opacitymd.comp.fab.surface.hover.state-layer.opacity | 8% md.comp.fab.surface.hover.state-layer.opacity
|
Icon
| Token | Value |
|---|---|
FAB (surface) hover icon colormd.comp.fab.surface.hover.icon.color | #6750A4 md.comp.fab.surface.hover.icon.color
|
Focused
Focus indicator
| Token | Value |
|---|---|
FAB (surface) focus indicator colormd.comp.fab.surface.focus.indicator.color | #625B71 md.comp.fab.surface.focus.indicator.color
|
FAB (surface) focus indicator offsetmd.comp.fab.surface.focus.indicator.outline.offset | 2dp md.comp.fab.surface.focus.indicator.outline.offset
|
FAB (surface) focus indicator thicknessmd.comp.fab.surface.focus.indicator.thickness | 3dp md.comp.fab.surface.focus.indicator.thickness
|
Container
| Token | Value |
|---|---|
Surface FAB focus container elevationmd.comp.fab.surface.focus.container.elevation | 6dp md.comp.fab.surface.focus.container.elevation
|
Surface FAB lowered focus container elevationmd.comp.fab.surface.lowered.focus.container.elevation | 1dp md.comp.fab.surface.lowered.focus.container.elevation
|
State layer
| Token | Value |
|---|---|
FAB (surface) focus state layer colormd.comp.fab.surface.focus.state-layer.color | #6750A4 md.comp.fab.surface.focus.state-layer.color
|
FAB (surface) focus state layer opacitymd.comp.fab.surface.focus.state-layer.opacity | 10% md.comp.fab.surface.focus.state-layer.opacity
|
Icon
| Token | Value |
|---|---|
FAB (surface) focus icon colormd.comp.fab.surface.focus.icon.color | #6750A4 md.comp.fab.surface.focus.icon.color
|
Pressed (ripple)
Container
| Token | Value |
|---|---|
Surface FAB lowered pressed container elevationmd.comp.fab.surface.lowered.pressed.container.elevation | 1dp md.comp.fab.surface.lowered.pressed.container.elevation
|
FAB (surface) pressed container elevationmd.comp.fab.surface.pressed.container.elevation | 6dp md.comp.fab.surface.pressed.container.elevation
|
State layer
| Token | Value |
|---|---|
FAB (surface) pressed state layer colormd.comp.fab.surface.pressed.state-layer.color | #6750A4 md.comp.fab.surface.pressed.state-layer.color
|
FAB (surface) pressed state layer opacitymd.comp.fab.surface.pressed.state-layer.opacity | 10% md.comp.fab.surface.pressed.state-layer.opacity
|
Icon
| Token | Value |
|---|---|
FAB (surface) pressed icon colormd.comp.fab.surface.pressed.icon.color | #6750A4 md.comp.fab.surface.pressed.icon.color
|
[Deprecated] FAB - Surface, large
[Deprecated] Enabled
[Deprecated] Container
| Token | Value |
|---|---|
FAB (large surface) container colormd.comp.fab.surface.large.container.color | #ECE6F0 md.comp.fab.surface.large.container.color
|
FAB (large surface) container elevationmd.comp.fab.surface.large.container.elevation | 6dp md.comp.fab.surface.large.container.elevation
|
FAB (large surface) container heightmd.comp.fab.surface.large.container.height | 96dp md.comp.fab.surface.large.container.height |
FAB (large surface) container shadow colormd.comp.fab.surface.large.container.shadow-color | #000000 md.comp.fab.surface.large.container.shadow-color
|
FAB (large surface) container shapemd.comp.fab.surface.large.container.shape | 28dp md.comp.fab.surface.large.container.shape
|
FAB (large surface) container surface tint layer colormd.comp.fab.surface.large.container.surface-tint-layer.color | #6750A4 md.comp.fab.surface.large.container.surface-tint-layer.color
|
FAB (large surface) container widthmd.comp.fab.surface.large.container.width | 96dp md.comp.fab.surface.large.container.width |
FAB (large surface) lowered container colormd.comp.fab.surface.large.lowered.container.color | #F7F2FA md.comp.fab.surface.large.lowered.container.color
|
FAB (large surface) lowered container elevationmd.comp.fab.surface.large.lowered.container.elevation | 1dp md.comp.fab.surface.large.lowered.container.elevation
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (large surface) icon colormd.comp.fab.surface.large.icon.color | #6750A4 md.comp.fab.surface.large.icon.color
|
FAB (large surface) icon sizemd.comp.fab.surface.large.icon.size | 36dp md.comp.fab.surface.large.icon.size |
[Deprecated] Hovered
[Deprecated] Container
| Token | Value |
|---|---|
FAB (large surface) hover container elevationmd.comp.fab.surface.large.hover.container.elevation | 8dp md.comp.fab.surface.large.hover.container.elevation
|
FAB (large surface) lowered hover container elevationmd.comp.fab.surface.large.lowered.hover.container.elevation | 3dp md.comp.fab.surface.large.lowered.hover.container.elevation
|
[Deprecated] State layer
| Token | Value |
|---|---|
FAB (large surface) hover state layer colormd.comp.fab.surface.large.hover.state-layer.color | #6750A4 md.comp.fab.surface.large.hover.state-layer.color
|
FAB (large surface) hover state layer opacitymd.comp.fab.surface.large.hover.state-layer.opacity | 8% md.comp.fab.surface.large.hover.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (large surface) hover icon colormd.comp.fab.surface.large.hover.icon.color | #6750A4 md.comp.fab.surface.large.hover.icon.color
|
[Deprecated] Focused
[Deprecated] Focus indicator
| Token | Value |
|---|---|
FAB (large surface) focus indicator colormd.comp.fab.surface.large.focus.indicator.color | #625B71 md.comp.fab.surface.large.focus.indicator.color
|
FAB (large surface) focus indicator offsetmd.comp.fab.surface.large.focus.indicator.outline.offset | 2dp md.comp.fab.surface.large.focus.indicator.outline.offset
|
FAB (large surface) focus indicator thicknessmd.comp.fab.surface.large.focus.indicator.thickness | 3dp md.comp.fab.surface.large.focus.indicator.thickness
|
[Deprecated] Container
| Token | Value |
|---|---|
FAB (large surface) focus container elevationmd.comp.fab.surface.large.focus.container.elevation | 6dp md.comp.fab.surface.large.focus.container.elevation
|
FAB (large surface) lowered focus container elevationmd.comp.fab.surface.large.lowered.focus.container.elevation | 1dp md.comp.fab.surface.large.lowered.focus.container.elevation
|
[Deprecated] State layer
| Token | Value |
|---|---|
FAB (large surface) focus state layer colormd.comp.fab.surface.large.focus.state-layer.color | #6750A4 md.comp.fab.surface.large.focus.state-layer.color
|
FAB (large surface) focus state layer opacitymd.comp.fab.surface.large.focus.state-layer.opacity | 10% md.comp.fab.surface.large.focus.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (large surface) focus icon colormd.comp.fab.surface.large.focus.icon.color | #6750A4 md.comp.fab.surface.large.focus.icon.color
|
[Deprecated] Pressed (ripple)
[Deprecated] Container
| Token | Value |
|---|---|
FAB (large surface) lowered pressed container elevationmd.comp.fab.surface.large.lowered.pressed.container.elevation | 1dp md.comp.fab.surface.large.lowered.pressed.container.elevation
|
FAB (large surface) pressed container elevationmd.comp.fab.surface.large.pressed.container.elevation | 6dp md.comp.fab.surface.large.pressed.container.elevation
|
[Deprecated] State layer
| Token | Value |
|---|---|
FAB (large surface) pressed state layer colormd.comp.fab.surface.large.pressed.state-layer.color | #6750A4 md.comp.fab.surface.large.pressed.state-layer.color
|
FAB (large surface) pressed state layer opacitymd.comp.fab.surface.large.pressed.state-layer.opacity | 10% md.comp.fab.surface.large.pressed.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (large surface) pressed icon colormd.comp.fab.surface.large.pressed.icon.color | #6750A4 md.comp.fab.surface.large.pressed.icon.color
|
[Deprecated] FAB - Secondary, small
[Deprecated] Enabled
[Deprecated] Container
| Token | Value |
|---|---|
FAB (small secondary) container colormd.comp.fab.secondary.small.container.color | #E8DEF8 md.comp.fab.secondary.small.container.color
|
FAB (small secondary) container elevationmd.comp.fab.secondary.small.container.elevation | 6dp md.comp.fab.secondary.small.container.elevation
|
FAB (small secondary) container heightmd.comp.fab.secondary.small.container.height | 40dp md.comp.fab.secondary.small.container.height |
FAB (small secondary) container shadow colormd.comp.fab.secondary.small.container.shadow-color | #000000 md.comp.fab.secondary.small.container.shadow-color
|
FAB (small secondary) container shapemd.comp.fab.secondary.small.container.shape | 12dp md.comp.fab.secondary.small.container.shape
|
FAB (small secondary) container widthmd.comp.fab.secondary.small.container.width | 40dp md.comp.fab.secondary.small.container.width |
FAB (small secondary) lowered container elevationmd.comp.fab.secondary.small.lowered.container.elevation | 1dp md.comp.fab.secondary.small.lowered.container.elevation
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (small secondary) icon colormd.comp.fab.secondary.small.icon.color | #4A4458 md.comp.fab.secondary.small.icon.color
|
FAB (small secondary) icon sizemd.comp.fab.secondary.small.icon.size | 24dp md.comp.fab.secondary.small.icon.size |
[Deprecated] Hovered
[Deprecated] Container
| Token | Value |
|---|---|
FAB (small secondary) hover container elevationmd.comp.fab.secondary.small.hover.container.elevation | 8dp md.comp.fab.secondary.small.hover.container.elevation
|
FAB (small secondary) lowered hover container elevationmd.comp.fab.secondary.small.lowered.hover.container.elevation | 3dp md.comp.fab.secondary.small.lowered.hover.container.elevation
|
[Deprecated] State layer
| Token | Value |
|---|---|
FAB (small secondary) hover state layer colormd.comp.fab.secondary.small.hover.state-layer.color | #4A4458 md.comp.fab.secondary.small.hover.state-layer.color
|
FAB (small secondary) hover state layer opacitymd.comp.fab.secondary.small.hover.state-layer.opacity | 8% md.comp.fab.secondary.small.hover.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (small secondary) hover icon colormd.comp.fab.secondary.small.hover.icon.color | #4A4458 md.comp.fab.secondary.small.hover.icon.color
|
[Deprecated] Focused
[Deprecated] Focus indicator
| Token | Value |
|---|---|
FAB (small secondary) focus indicator colormd.comp.fab.secondary.small.focus.indicator.color | #625B71 md.comp.fab.secondary.small.focus.indicator.color
|
FAB (small secondary) focus indicator offsetmd.comp.fab.secondary.small.focus.indicator.outline.offset | 2dp md.comp.fab.secondary.small.focus.indicator.outline.offset
|
FAB (small secondary) focus indicator thicknessmd.comp.fab.secondary.small.focus.indicator.thickness | 3dp md.comp.fab.secondary.small.focus.indicator.thickness
|
[Deprecated] Container
| Token | Value |
|---|---|
FAB (small secondary) focus container elevationmd.comp.fab.secondary.small.focus.container.elevation | 6dp md.comp.fab.secondary.small.focus.container.elevation
|
FAB (small secondary) lowered focus container elevationmd.comp.fab.secondary.small.lowered.focus.container.elevation | 1dp md.comp.fab.secondary.small.lowered.focus.container.elevation
|
[Deprecated] State layer
| Token | Value |
|---|---|
FAB (small secondary) focus state layer colormd.comp.fab.secondary.small.focus.state-layer.color | #4A4458 md.comp.fab.secondary.small.focus.state-layer.color
|
FAB (small secondary) focus state layer opacitymd.comp.fab.secondary.small.focus.state-layer.opacity | 10% md.comp.fab.secondary.small.focus.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (small secondary) focus icon colormd.comp.fab.secondary.small.focus.icon.color | #4A4458 md.comp.fab.secondary.small.focus.icon.color
|
[Deprecated] Pressed (ripple)
[Deprecated] Container
| Token | Value |
|---|---|
FAB (small secondary) lowered pressed container elevationmd.comp.fab.secondary.small.lowered.pressed.container.elevation | 1dp md.comp.fab.secondary.small.lowered.pressed.container.elevation
|
FAB (small secondary) pressed container elevationmd.comp.fab.secondary.small.pressed.container.elevation | 6dp md.comp.fab.secondary.small.pressed.container.elevation
|
[Deprecated] State layer
| Token | Value |
|---|---|
FAB (small secondary) pressed state layer colormd.comp.fab.secondary.small.pressed.state-layer.color | #4A4458 md.comp.fab.secondary.small.pressed.state-layer.color
|
FAB (small secondary) pressed state layer opacitymd.comp.fab.secondary.small.pressed.state-layer.opacity | 10% md.comp.fab.secondary.small.pressed.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (small secondary) pressed icon colormd.comp.fab.secondary.small.pressed.icon.color | #4A4458 md.comp.fab.secondary.small.pressed.icon.color
|
[Deprecated] FAB - Tertiary, large
[Deprecated] Enabled
[Deprecated] Container
| Token | Value |
|---|---|
FAB (large tertiary) container colormd.comp.fab.tertiary.large.container.color | #FFD8E4 md.comp.fab.tertiary.large.container.color
|
FAB (large tertiary) container elevationmd.comp.fab.tertiary.large.container.elevation | 6dp md.comp.fab.tertiary.large.container.elevation
|
FAB (large tertiary) container heightmd.comp.fab.tertiary.large.container.height | 96dp md.comp.fab.tertiary.large.container.height |
FAB (large tertiary) container shadow colormd.comp.fab.tertiary.large.container.shadow-color | #000000 md.comp.fab.tertiary.large.container.shadow-color
|
FAB (large tertiary) container shapemd.comp.fab.tertiary.large.container.shape | 28dp md.comp.fab.tertiary.large.container.shape
|
FAB (large tertiary) container widthmd.comp.fab.tertiary.large.container.width | 96dp md.comp.fab.tertiary.large.container.width |
FAB (large tertiary) lowered container elevationmd.comp.fab.tertiary.large.lowered.container.elevation | 1dp md.comp.fab.tertiary.large.lowered.container.elevation
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (large tertiary) icon colormd.comp.fab.tertiary.large.icon.color | #633B48 md.comp.fab.tertiary.large.icon.color
|
FAB (large tertiary) icon sizemd.comp.fab.tertiary.large.icon.size | 36dp md.comp.fab.tertiary.large.icon.size |
[Deprecated] Hovered
[Deprecated] Container
| Token | Value |
|---|---|
FAB (large tertiary) hover container elevationmd.comp.fab.tertiary.large.hover.container.elevation | 8dp md.comp.fab.tertiary.large.hover.container.elevation
|
FAB (large tertiary) lowered hover container elevationmd.comp.fab.tertiary.large.lowered.hover.container.elevation | 3dp md.comp.fab.tertiary.large.lowered.hover.container.elevation
|
[Deprecated] State layer
| Token | Value |
|---|---|
FAB (large tertiary) hover state layer colormd.comp.fab.tertiary.large.hover.state-layer.color | #633B48 md.comp.fab.tertiary.large.hover.state-layer.color
|
FAB (large tertiary) hover state layer opacitymd.comp.fab.tertiary.large.hover.state-layer.opacity | 8% md.comp.fab.tertiary.large.hover.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (large tertiary) hover icon colormd.comp.fab.tertiary.large.hover.icon.color | #633B48 md.comp.fab.tertiary.large.hover.icon.color
|
[Deprecated] Focused
[Deprecated] Focus indicator
| Token | Value |
|---|---|
FAB (large tertiary) focus indicator colormd.comp.fab.tertiary.large.focus.indicator.color | #625B71 md.comp.fab.tertiary.large.focus.indicator.color
|
FAB (large tertiary) focus indicator offsetmd.comp.fab.tertiary.large.focus.indicator.outline.offset | 2dp md.comp.fab.tertiary.large.focus.indicator.outline.offset
|
FAB (large tertiary) focus indicator thicknessmd.comp.fab.tertiary.large.focus.indicator.thickness | 3dp md.comp.fab.tertiary.large.focus.indicator.thickness
|
[Deprecated] Container
| Token | Value |
|---|---|
FAB (large tertiary) focus container elevationmd.comp.fab.tertiary.large.focus.container.elevation | 6dp md.comp.fab.tertiary.large.focus.container.elevation
|
FAB (large tertiary) lowered focus container elevationmd.comp.fab.tertiary.large.lowered.focus.container.elevation | 1dp md.comp.fab.tertiary.large.lowered.focus.container.elevation
|
[Deprecated] State layer
| Token | Value |
|---|---|
FAB (large tertiary) focus state layer colormd.comp.fab.tertiary.large.focus.state-layer.color | #633B48 md.comp.fab.tertiary.large.focus.state-layer.color
|
FAB (large tertiary) focus state layer opacitymd.comp.fab.tertiary.large.focus.state-layer.opacity | 10% md.comp.fab.tertiary.large.focus.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (large tertiary) focus icon colormd.comp.fab.tertiary.large.focus.icon.color | #633B48 md.comp.fab.tertiary.large.focus.icon.color
|
[Deprecated] Pressed (ripple)
[Deprecated] Container
| Token | Value |
|---|---|
FAB (large tertiary) lowered pressed container elevationmd.comp.fab.tertiary.large.lowered.pressed.container.elevation | 1dp md.comp.fab.tertiary.large.lowered.pressed.container.elevation
|
FAB (large tertiary) pressed container elevationmd.comp.fab.tertiary.large.pressed.container.elevation | 6dp md.comp.fab.tertiary.large.pressed.container.elevation
|
[Deprecated] State layer
| Token | Value |
|---|---|
FAB (large tertiary) pressed state layer colormd.comp.fab.tertiary.large.pressed.state-layer.color | #633B48 md.comp.fab.tertiary.large.pressed.state-layer.color
|
FAB (large tertiary) pressed state layer opacitymd.comp.fab.tertiary.large.pressed.state-layer.opacity | 10% md.comp.fab.tertiary.large.pressed.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (large tertiary) pressed icon colormd.comp.fab.tertiary.large.pressed.icon.color | #633B48 md.comp.fab.tertiary.large.pressed.icon.color
|
FAB - Color - Secondary
Enabled
| Token | Value |
|---|---|
FAB secondary container colormd.comp.fab.secondary.container.color | #625B71 md.comp.fab.secondary.container.color
|
FAB secondary container elevationmd.comp.fab.secondary.container.elevation | 6dp md.comp.fab.secondary.container.elevation
|
FAB secondary container shadow colormd.comp.fab.secondary.container.shadow-color | #000000 md.comp.fab.secondary.container.shadow-color
|
FAB secondary icon colormd.comp.fab.secondary.icon.color | #FFFFFF md.comp.fab.secondary.icon.color
|
Hovered
| Token | Value |
|---|---|
FAB secondary hovered container elevationmd.comp.fab.secondary.hovered.container.elevation | 8dp md.comp.fab.secondary.hovered.container.elevation
|
FAB secondary hovered icon colormd.comp.fab.secondary.hovered.icon.color | #FFFFFF md.comp.fab.secondary.hovered.icon.color
|
FAB secondary hovered state layer colormd.comp.fab.secondary.hovered.state-layer.color | #FFFFFF md.comp.fab.secondary.hovered.state-layer.color
|
FAB secondary hovered state layer opacitymd.comp.fab.secondary.hovered.state-layer.opacity | 8% md.comp.fab.secondary.hovered.state-layer.opacity
|
Focused
| Token | Value |
|---|---|
FAB secondary focused container elevationmd.comp.fab.secondary.focused.container.elevation | 6dp md.comp.fab.secondary.focused.container.elevation
|
FAB secondary focused icon colormd.comp.fab.secondary.focused.icon.color | #FFFFFF md.comp.fab.secondary.focused.icon.color
|
FAB secondary focused state layer colormd.comp.fab.secondary.focused.state-layer.color | #FFFFFF md.comp.fab.secondary.focused.state-layer.color
|
FAB secondary focused state layer opacitymd.comp.fab.secondary.focused.state-layer.opacity | 10% md.comp.fab.secondary.focused.state-layer.opacity
|
Pressed
| Token | Value |
|---|---|
FAB secondary pressed container elevationmd.comp.fab.secondary.pressed.container.elevation | 6dp md.comp.fab.secondary.pressed.container.elevation
|
FAB secondary pressed icon colormd.comp.fab.secondary.pressed.icon.color | #FFFFFF md.comp.fab.secondary.pressed.icon.color
|
FAB secondary pressed state layer colormd.comp.fab.secondary.pressed.state-layer.color | #FFFFFF md.comp.fab.secondary.pressed.state-layer.color
|
FAB secondary pressed state layer opacitymd.comp.fab.secondary.pressed.state-layer.opacity | 10% md.comp.fab.secondary.pressed.state-layer.opacity
|
[Deprecated] Enabled
[Deprecated] Container
| Token | Value |
|---|---|
FAB (secondary) container heightmd.comp.fab.secondary.container.height | 56dp md.comp.fab.secondary.container.height |
FAB (secondary) container shapemd.comp.fab.secondary.container.shape | 16dp md.comp.fab.secondary.container.shape
|
FAB (secondary) container widthmd.comp.fab.secondary.container.width | 56dp md.comp.fab.secondary.container.width |
FAB (secondary) lowered container elevationmd.comp.fab.secondary.lowered.container.elevation | 1dp md.comp.fab.secondary.lowered.container.elevation
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (secondary) icon sizemd.comp.fab.secondary.icon.size | 24dp md.comp.fab.secondary.icon.size |
[Deprecated] Hovered
[Deprecated] Container
| Token | Value |
|---|---|
FAB (secondary) hover container elevationmd.comp.fab.secondary.hover.container.elevation | 8dp md.comp.fab.secondary.hover.container.elevation
|
FAB (secondary) lowered hover container elevationmd.comp.fab.secondary.lowered.hover.container.elevation | 3dp md.comp.fab.secondary.lowered.hover.container.elevation
|
[Deprecated] State layer
| Token | Value |
|---|---|
FAB (secondary) hover state layer colormd.comp.fab.secondary.hover.state-layer.color | #4A4458 md.comp.fab.secondary.hover.state-layer.color
|
FAB (secondary) hover state layer opacitymd.comp.fab.secondary.hover.state-layer.opacity | 8% md.comp.fab.secondary.hover.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (secondary) hover icon colormd.comp.fab.secondary.hover.icon.color | #4A4458 md.comp.fab.secondary.hover.icon.color
|
[Deprecated] Focused
[Deprecated] Container
| Token | Value |
|---|---|
FAB (secondary) focus container elevationmd.comp.fab.secondary.focus.container.elevation | 6dp md.comp.fab.secondary.focus.container.elevation
|
FAB (secondary) lowered focus container elevationmd.comp.fab.secondary.lowered.focus.container.elevation | 1dp md.comp.fab.secondary.lowered.focus.container.elevation
|
[Deprecated] State layer
| Token | Value |
|---|---|
FAB (secondary) focus state layer colormd.comp.fab.secondary.focus.state-layer.color | #4A4458 md.comp.fab.secondary.focus.state-layer.color
|
FAB (secondary) focus state layer opacitymd.comp.fab.secondary.focus.state-layer.opacity | 10% md.comp.fab.secondary.focus.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (secondary) focus icon colormd.comp.fab.secondary.focus.icon.color | #4A4458 md.comp.fab.secondary.focus.icon.color
|
[Deprecated] Focus indicator
| Token | Value |
|---|---|
FAB (secondary) focus indicator colormd.comp.fab.secondary.focus.indicator.color | #625B71 md.comp.fab.secondary.focus.indicator.color
|
FAB (secondary) focus indicator offsetmd.comp.fab.secondary.focus.indicator.outline.offset | 2dp md.comp.fab.secondary.focus.indicator.outline.offset
|
FAB (secondary) focus indicator thicknessmd.comp.fab.secondary.focus.indicator.thickness | 3dp md.comp.fab.secondary.focus.indicator.thickness
|
[Deprecated] Pressed (ripple)
[Deprecated] Container
| Token | Value |
|---|---|
FAB (secondary) lowered pressed container elevationmd.comp.fab.secondary.lowered.pressed.container.elevation | 1dp md.comp.fab.secondary.lowered.pressed.container.elevation
|
[Deprecated] FAB - Surface, small
[Deprecated] Enabled
[Deprecated] Container
| Token | Value |
|---|---|
FAB (small surface) container colormd.fab.surface.small.container.color | #ECE6F0 md.fab.surface.small.container.color
|
FAB (small surface) container elevationmd.fab.surface.small.container.elevation | 6dp md.fab.surface.small.container.elevation
|
FAB (small surface) container heightmd.fab.surface.small.container.height | 40dp md.fab.surface.small.container.height |
FAB (small surface) container shadow colormd.fab.surface.small.container.shadow-color | #000000 md.fab.surface.small.container.shadow-color
|
FAB (small surface) container shapemd.fab.surface.small.container.shape | 12dp md.fab.surface.small.container.shape
|
FAB (small surface) container surface tint layer colormd.fab.surface.small.container.surface-tint-layer.color | #6750A4 md.fab.surface.small.container.surface-tint-layer.color
|
FAB (small surface) container widthmd.fab.surface.small.container.width | 40dp md.fab.surface.small.container.width |
FAB (small surface) lowered container colormd.fab.surface.small.lowered.container.color | #F7F2FA md.fab.surface.small.lowered.container.color
|
FAB (small surface) lowered container elevationmd.fab.surface.small.lowered.container.elevation | 1dp md.fab.surface.small.lowered.container.elevation
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (small surface) icon colormd.fab.surface.small.icon.color | #6750A4 md.fab.surface.small.icon.color
|
FAB (small surface) icon sizemd.fab.surface.small.icon.size | 24dp md.fab.surface.small.icon.size |
[Deprecated] Hovered
[Deprecated] Container
| Token | Value |
|---|---|
FAB (small surface) hover container elevationmd.fab.surface.small.hover.container.elevation | 8dp md.fab.surface.small.hover.container.elevation
|
FAB (small surface) lowered hover container elevationmd.fab.surface.small.lowered.hover.container.elevation | 3dp md.fab.surface.small.lowered.hover.container.elevation
|
[Deprecated] State layer
| Token | Value |
|---|---|
FAB (small surface) hover state layer colormd.fab.surface.small.hover.state-layer.color | #6750A4 md.fab.surface.small.hover.state-layer.color
|
FAB (small surface) hover state layer opacitymd.fab.surface.small.hover.state-layer.opacity | 8% md.fab.surface.small.hover.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (small surface) hover icon colormd.fab.surface.small.hover.icon.color | #6750A4 md.fab.surface.small.hover.icon.color
|
[Deprecated] Focused
[Deprecated] Focus indicator
| Token | Value |
|---|---|
FAB (small surface) focus indicator colormd.fab.surface.small.focus.indicator.color | #625B71 md.fab.surface.small.focus.indicator.color
|
FAB (small surface) focus indicator offsetmd.fab.surface.small.focus.indicator.outline.offset | 2dp md.fab.surface.small.focus.indicator.outline.offset
|
FAB (small surface) focus indicator thicknessmd.fab.surface.small.focus.indicator.thickness | 3dp md.fab.surface.small.focus.indicator.thickness
|
[Deprecated] Container
| Token | Value |
|---|---|
FAB (small surface) focus container elevationmd.fab.surface.small.focus.container.elevation | 6dp md.fab.surface.small.focus.container.elevation
|
FAB (small surface) lowered focus container elevationmd.fab.surface.small.lowered.focus.container.elevation | 1dp md.fab.surface.small.lowered.focus.container.elevation
|
[Deprecated] State layer
| Token | Value |
|---|---|
FAB (small surface) focus state layer colormd.fab.surface.small.focus.state-layer.color | #6750A4 md.fab.surface.small.focus.state-layer.color
|
FAB (small surface) focus state layer opacitymd.fab.surface.small.focus.state-layer.opacity | 10% md.fab.surface.small.focus.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (small surface) focus icon colormd.fab.surface.small.focus.icon.color | #6750A4 md.fab.surface.small.focus.icon.color
|
[Deprecated] Pressed (ripple)
[Deprecated] Container
| Token | Value |
|---|---|
FAB (small surface) lowered pressed container elevationmd.fab.surface.small.lowered.pressed.container.elevation | 1dp md.fab.surface.small.lowered.pressed.container.elevation
|
FAB (small surface) pressed container elevationmd.fab.surface.small.pressed.container.elevation | 6dp md.fab.surface.small.pressed.container.elevation
|
[Deprecated] State layer
| Token | Value |
|---|---|
FAB (small surface) pressed state layer colormd.fab.surface.small.pressed.state-layer.color | #6750A4 md.fab.surface.small.pressed.state-layer.color
|
FAB (small surface) pressed state layer opacitymd.fab.surface.small.pressed.state-layer.opacity | 10% md.fab.surface.small.pressed.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (small surface) pressed icon colormd.fab.surface.small.pressed.icon.color | #6750A4 md.fab.surface.small.pressed.icon.color
|
[Deprecated] FAB - Primary, small
[Deprecated] Enabled
[Deprecated] Container
| Token | Value |
|---|---|
FAB (small primary) container colormd.comp.fab.primary.small.container.color | #EADDFF md.comp.fab.primary.small.container.color
|
FAB (small primary) container elevationmd.comp.fab.primary.small.container.elevation | 6dp md.comp.fab.primary.small.container.elevation
|
FAB (small primary) container heightmd.comp.fab.primary.small.container.height | 40dp md.comp.fab.primary.small.container.height |
FAB (small primary) container shadow colormd.comp.fab.primary.small.container.shadow-color | #000000 md.comp.fab.primary.small.container.shadow-color
|
FAB (small primary) container shapemd.comp.fab.primary.small.container.shape | 12dp md.comp.fab.primary.small.container.shape
|
FAB (small primary) container widthmd.comp.fab.primary.small.container.width | 40dp md.comp.fab.primary.small.container.width |
FAB (small primary) lowered container elevationmd.comp.fab.primary.small.lowered.container.elevation | 1dp md.comp.fab.primary.small.lowered.container.elevation
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (small primary) icon colormd.comp.fab.primary.small.icon.color | #4F378B md.comp.fab.primary.small.icon.color
|
FAB (small primary) icon sizemd.comp.fab.primary.small.icon.size | 24dp md.comp.fab.primary.small.icon.size |
[Deprecated] Hovered
[Deprecated] Container
| Token | Value |
|---|---|
FAB (small primary) hover container elevationmd.comp.fab.primary.small.hover.container.elevation | 8dp md.comp.fab.primary.small.hover.container.elevation
|
FAB (small primary) lowered hover container elevationmd.comp.fab.primary.small.lowered.hover.container.elevation | 3dp md.comp.fab.primary.small.lowered.hover.container.elevation
|
[Deprecated] State layer
| Token | Value |
|---|---|
FAB (small primary) hover state layer colormd.comp.fab.primary.small.hover.state-layer.color | #4F378B md.comp.fab.primary.small.hover.state-layer.color
|
FAB (small primary) hover state layer opacitymd.comp.fab.primary.small.hover.state-layer.opacity | 8% md.comp.fab.primary.small.hover.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (small primary) hover icon colormd.comp.fab.primary.small.hover.icon.color | #4F378B md.comp.fab.primary.small.hover.icon.color
|
[Deprecated] Focused
[Deprecated] Focus indicator
| Token | Value |
|---|---|
FAB (small primary) focus indicator colormd.comp.fab.primary.small.focus.indicator.color | #625B71 md.comp.fab.primary.small.focus.indicator.color
|
FAB (small primary) focus indicator offsetmd.comp.fab.primary.small.focus.indicator.outline.offset | 2dp md.comp.fab.primary.small.focus.indicator.outline.offset
|
FAB (small primary) focus indicator thicknessmd.comp.fab.primary.small.focus.indicator.thickness | 3dp md.comp.fab.primary.small.focus.indicator.thickness
|
[Deprecated] Container
| Token | Value |
|---|---|
FAB (small primary) focus container elevationmd.comp.fab.primary.small.focus.container.elevation | 6dp md.comp.fab.primary.small.focus.container.elevation
|
FAB (small primary) lowered focus container elevationmd.comp.fab.primary.small.lowered.focus.container.elevation | 1dp md.comp.fab.primary.small.lowered.focus.container.elevation
|
[Deprecated] State layer
| Token | Value |
|---|---|
FAB (small primary) focus state layer colormd.comp.fab.primary.small.focus.state-layer.color | #4F378B md.comp.fab.primary.small.focus.state-layer.color
|
FAB (small primary) focus state layer opacitymd.comp.fab.primary.small.focus.state-layer.opacity | 10% md.comp.fab.primary.small.focus.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (small primary) focus icon colormd.comp.fab.primary.small.focus.icon.color | #4F378B md.comp.fab.primary.small.focus.icon.color
|
[Deprecated] Pressed (ripple)
[Deprecated] Container
| Token | Value |
|---|---|
FAB (small primary) lowered pressed container elevationmd.comp.fab.primary.small.lowered.pressed.container.elevation | 1dp md.comp.fab.primary.small.lowered.pressed.container.elevation
|
FAB (small primary) pressed container elevationmd.comp.fab.primary.small.pressed.container.elevation | 6dp md.comp.fab.primary.small.pressed.container.elevation
|
[Deprecated] State layer
| Token | Value |
|---|---|
FAB (small primary) pressed state layer colormd.comp.fab.primary.small.pressed.state-layer.color | #4F378B md.comp.fab.primary.small.pressed.state-layer.color
|
FAB (small primary) pressed state layer opacitymd.comp.fab.primary.small.pressed.state-layer.opacity | 10% md.comp.fab.primary.small.pressed.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (small primary) pressed icon colormd.comp.fab.primary.small.pressed.icon.color | #4F378B md.comp.fab.primary.small.pressed.icon.color
|
FAB - Color - Branded
Enabled
Container
| Token | Value |
|---|---|
FAB (branded) container colormd.comp.fab.branded.container.color | #ECE6F0 md.comp.fab.branded.container.color
|
FAB (branded) container elevationmd.comp.fab.branded.container.elevation | 6dp md.comp.fab.branded.container.elevation
|
FAB (branded) container heightmd.comp.fab.branded.container.height | 56dp md.comp.fab.branded.container.height |
Branded FAB container shadow colormd.comp.fab.branded.container.shadow-color | #000000 md.comp.fab.branded.container.shadow-color
|
FAB (branded) container shapemd.comp.fab.branded.container.shape | 16dp md.comp.fab.branded.container.shape
|
FAB (branded) container surface tint layer colormd.comp.fab.branded.container.surface-tint-layer.color | #6750A4 md.comp.fab.branded.container.surface-tint-layer.color
|
FAB (branded) container widthmd.comp.fab.branded.container.width | 56dp md.comp.fab.branded.container.width |
FAB (branded) lowered container colormd.comp.fab.branded.lowered.container.color | #F7F2FA md.comp.fab.branded.lowered.container.color
|
Branded FAB lowered container elevationmd.comp.fab.branded.lowered.container.elevation | 1dp md.comp.fab.branded.lowered.container.elevation
|
Icon
| Token | Value |
|---|---|
FAB (branded) icon sizemd.comp.fab.branded.icon.size | 36dp md.comp.fab.branded.icon.size |
Hovered
Container
| Token | Value |
|---|---|
FAB (branded) hover container elevationmd.comp.fab.branded.hover.container.elevation | 8dp md.comp.fab.branded.hover.container.elevation
|
Branded FAB lowered hover container elevationmd.comp.fab.branded.lowered.hover.container.elevation | 3dp md.comp.fab.branded.lowered.hover.container.elevation
|
State layer
| Token | Value |
|---|---|
FAB (branded) hover state layer colormd.comp.fab.branded.hover.state-layer.color | #6750A4 md.comp.fab.branded.hover.state-layer.color
|
FAB (branded) hover state layer opacitymd.comp.fab.branded.hover.state-layer.opacity | 8% md.comp.fab.branded.hover.state-layer.opacity
|
Focused
Focus indicator
| Token | Value |
|---|---|
FAB (branded) focus indicator colormd.comp.fab.branded.focus.indicator.color | #625B71 md.comp.fab.branded.focus.indicator.color
|
FAB (branded) focus indicator thicknessmd.comp.fab.branded.focus.indicator.thickness | 3dp md.comp.fab.branded.focus.indicator.thickness
|
FAB (branded) focus indicator offsetmd.comp.fab.branded.indicator.outline.offset | 2dp md.comp.fab.branded.indicator.outline.offset
|
Container
| Token | Value |
|---|---|
Branded FAB lowered focus container elevationmd.comp.fab.branded.focus.container.elevation | 6dp md.comp.fab.branded.focus.container.elevation
|
Branded FAB lowered focus container elevationmd.comp.fab.branded.lowered.focus.container.elevation | 1dp md.comp.fab.branded.lowered.focus.container.elevation
|
State layer
| Token | Value |
|---|---|
FAB (branded) focus state layer colormd.comp.fab.branded.focus.state-layer.color | #6750A4 md.comp.fab.branded.focus.state-layer.color
|
FAB (branded) focus state layer opacitymd.comp.fab.branded.focus.state-layer.opacity | 10% md.comp.fab.branded.focus.state-layer.opacity
|
Pressed (ripple)
Container
| Token | Value |
|---|---|
Branded FAB lowered pressed container elevationmd.comp.fab.branded.lowered.pressed.container.elevation | 1dp md.comp.fab.branded.lowered.pressed.container.elevation
|
FAB (branded) pressed container elevationmd.comp.fab.branded.pressed.container.elevation | 6dp md.comp.fab.branded.pressed.container.elevation
|
State layer
| Token | Value |
|---|---|
FAB (branded) pressed state layer colormd.comp.fab.branded.pressed.state-layer.color | #6750A4 md.comp.fab.branded.pressed.state-layer.color
|
FAB (branded) pressed state layer opacitymd.comp.fab.branded.pressed.state-layer.opacity | 10% md.comp.fab.branded.pressed.state-layer.opacity
|
[Deprecated] FAB - Branded, large
[Deprecated] Enabled
[Deprecated] Container
| Token | Value |
|---|---|
FAB (large branded) container colormd.comp.fab.branded.large.container.color | #ECE6F0 md.comp.fab.branded.large.container.color
|
FAB (large branded) container elevationmd.comp.fab.branded.large.container.elevation | 6dp md.comp.fab.branded.large.container.elevation
|
FAB (large branded) container heightmd.comp.fab.branded.large.container.height | 96dp md.comp.fab.branded.large.container.height |
FAB (large branded) container shadow colormd.comp.fab.branded.large.container.shadow-color | #000000 md.comp.fab.branded.large.container.shadow-color
|
FAB (large branded) container shapemd.comp.fab.branded.large.container.shape | 28dp md.comp.fab.branded.large.container.shape
|
FAB (large branded) container surface tint layer colormd.comp.fab.branded.large.container.surface-tint-layer.color | #6750A4 md.comp.fab.branded.large.container.surface-tint-layer.color
|
FAB (large branded) container widthmd.comp.fab.branded.large.container.width | 96dp md.comp.fab.branded.large.container.width |
FAB (large branded) lowered container colormd.comp.fab.branded.large.lowered.container.color | #F7F2FA md.comp.fab.branded.large.lowered.container.color
|
FAB (large branded) lowered container elevationmd.comp.fab.branded.large.lowered.container.elevation | 1dp md.comp.fab.branded.large.lowered.container.elevation
|
[Deprecated] Icon
| Token | Value |
|---|---|
FAB (large branded) icon colormd.comp.fab.branded.large.icon.color | #FFFFFF md.comp.fab.branded.large.icon.color
|
FAB (large branded) icon sizemd.comp.fab.branded.large.icon.size | 48dp md.comp.fab.branded.large.icon.size |
[Deprecated] Hovered
[Deprecated] Container
| Token | Value |
|---|---|
FAB (large branded) hover container elevationmd.comp.fab.branded.large.hover.container.elevation | 8dp md.comp.fab.branded.large.hover.container.elevation
|
FAB (large branded) lowered hover container elevationmd.comp.fab.branded.large.lowered.hover.container.elevation | 3dp md.comp.fab.branded.large.lowered.hover.container.elevation
|
[Deprecated] State layer
| Token | Value |
|---|---|
FAB (large branded) hover state layer colormd.comp.fab.branded.large.hover.state-layer.color | #6750A4 md.comp.fab.branded.large.hover.state-layer.color
|
FAB (large branded) hover state layer opacitymd.comp.fab.branded.large.hover.state-layer.opacity | 8% md.comp.fab.branded.large.hover.state-layer.opacity
|
[Deprecated] Focused
[Deprecated] Focus indicator
| Token | Value |
|---|---|
FAB (large branded) focus indicator colormd.comp.fab.branded.large.focus.indicator.color | #625B71 md.comp.fab.branded.large.focus.indicator.color
|
FAB (large branded) focus indicator offsetmd.comp.fab.branded.large.focus.indicator.outline.offset | 2dp md.comp.fab.branded.large.focus.indicator.outline.offset
|
FAB (large branded) focus indicator thicknessmd.comp.fab.branded.large.focus.indicator.thickness | 3dp md.comp.fab.branded.large.focus.indicator.thickness
|
[Deprecated] Container
| Token | Value |
|---|---|
FAB (large branded) focus focus container elevationmd.comp.fab.branded.large.focus.container.elevation | 6dp md.comp.fab.branded.large.focus.container.elevation
|
FAB (large branded) lowered focus container elevationmd.comp.fab.branded.large.lowered.focus.container.elevation | 1dp md.comp.fab.branded.large.lowered.focus.container.elevation
|
[Deprecated] State layer
| Token | Value |
|---|---|
FAB (large branded) focus state layer colormd.comp.fab.branded.large.focus.state-layer.color | #6750A4 md.comp.fab.branded.large.focus.state-layer.color
|
FAB (large branded) focus state layer opacitymd.comp.fab.branded.large.focus.state-layer.opacity | 10% md.comp.fab.branded.large.focus.state-layer.opacity
|
[Deprecated] Pressed (ripple)
[Deprecated] Container
| Token | Value |
|---|---|
FAB (large branded) lowered pressed container elevationmd.comp.fab.branded.large.lowered.pressed.container.elevation | 1dp md.comp.fab.branded.large.lowered.pressed.container.elevation
|
FAB (large branded) pressed container elevationmd.comp.fab.branded.large.pressed.container.elevation | 6dp md.comp.fab.branded.large.pressed.container.elevation
|
[Deprecated] State layer
| Token | Value |
|---|---|
FAB (large branded) pressed state layer colormd.comp.fab.branded.large.pressed.state-layer.color | #6750A4 md.comp.fab.branded.large.pressed.state-layer.color
|
FAB (large branded) pressed state layer opacitymd.comp.fab.branded.large.pressed.state-layer.opacity | 10% md.comp.fab.branded.large.pressed.state-layer.opacity
|