Material Design 3 "Extended FAB" tokens: All tokens
Preview
Browse tokens
Color
Extended FAB - Size - Baseline
| Token | Value |
|---|---|
Extended FAB container heightmd.comp.extended-fab.container.height | 56dp md.comp.extended-fab.container.height |
Extended FAB container shapemd.comp.extended-fab.container.shape | 16dp md.comp.extended-fab.container.shape
|
Extended FAB icon label spacemd.comp.extended-fab.icon-label-space | 12dp md.comp.extended-fab.icon-label-space
|
Extended FAB icon sizemd.comp.extended-fab.icon.size | 24dp md.comp.extended-fab.icon.size |
Extended FAB label textmd.comp.extended-fab.label-text | Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt md.comp.extended-fab.label-text
|
Extended FAB leading spacemd.comp.extended-fab.leading-space | 16dp md.comp.extended-fab.leading-space
|
Extended FAB trailing spacemd.comp.extended-fab.trailing-space | 20dp md.comp.extended-fab.trailing-space
|
Extended FAB - Size - Large
| Token | Value |
|---|---|
Extended FAB large container heightmd.comp.extended-fab.large.container.height | 96dp md.comp.extended-fab.large.container.height |
Extended FAB large container shapemd.comp.extended-fab.large.container.shape | 28dp md.comp.extended-fab.large.container.shape
|
Extended FAB large icon label spacemd.comp.extended-fab.large.icon-label-space | 16dp md.comp.extended-fab.large.icon-label-space
|
Extended FAB large icon sizemd.comp.extended-fab.large.icon.size | 36dp md.comp.extended-fab.large.icon.size |
Extended FAB large label textmd.comp.extended-fab.large.label-text | Roboto · 24pt · weight 400 · line height 32pt · tracking 0pt md.comp.extended-fab.large.label-text
|
Extended FAB large leading spacemd.comp.extended-fab.large.leading-space | 28dp md.comp.extended-fab.large.leading-space |
Extended FAB large trailing spacemd.comp.extended-fab.large.trailing-space | 28dp md.comp.extended-fab.large.trailing-space |
Extended FAB - Size - Medium
| Token | Value |
|---|---|
Extended FAB medium container heightmd.comp.extended-fab.medium.container.height | 80dp md.comp.extended-fab.medium.container.height |
Extended FAB medium container shapemd.comp.extended-fab.medium.container.shape | 20dp md.comp.extended-fab.medium.container.shape
|
Extended FAB medium icon label spacemd.comp.extended-fab.medium.icon-label-space | 12dp md.comp.extended-fab.medium.icon-label-space
|
Extended FAB medium icon sizemd.comp.extended-fab.medium.icon.size | 28dp md.comp.extended-fab.medium.icon.size |
Extended FAB medium label textmd.comp.extended-fab.medium.label-text | Roboto · 22pt · weight 400 · line height 28pt · tracking 0pt md.comp.extended-fab.medium.label-text
|
Extended FAB medium leading spacemd.comp.extended-fab.medium.leading-space | 26dp md.comp.extended-fab.medium.leading-space |
Extended FAB medium trailing spacemd.comp.extended-fab.medium.trailing-space | 26dp md.comp.extended-fab.medium.trailing-space |
Extended FAB - Color - Tonal primary
Enabled
| Token | Value |
|---|---|
Extended FAB tonal primary container colormd.comp.extended-fab.primary-container.container.color | #EADDFF md.comp.extended-fab.primary-container.container.color
|
Extended FAB tonal primary container elevationmd.comp.extended-fab.primary-container.container.elevation | 6dp md.comp.extended-fab.primary-container.container.elevation
|
Extended FAB tonal primary container shadow colormd.comp.extended-fab.primary-container.container.shadow-color | #000000 md.comp.extended-fab.primary-container.container.shadow-color
|
Extended FAB tonal primary container icon colormd.comp.extended-fab.primary-container.icon.color | #4F378B md.comp.extended-fab.primary-container.icon.color
|
Extended FAB tonal primary label text colormd.comp.extended-fab.primary-container.label-text.color | #4F378B md.comp.extended-fab.primary-container.label-text.color
|
Hovered
| Token | Value |
|---|---|
Extended FAB tonal primary hovered container elevationmd.comp.extended-fab.primary-container.hovered.container.elevation | 8dp md.comp.extended-fab.primary-container.hovered.container.elevation
|
Extended FAB tonal primary hovered icon colormd.comp.extended-fab.primary-container.hovered.icon.color | #4F378B md.comp.extended-fab.primary-container.hovered.icon.color
|
Extended FAB tonal primary hovered label text colormd.comp.extended-fab.primary-container.hovered.label-text.color | #4F378B md.comp.extended-fab.primary-container.hovered.label-text.color
|
Extended FAB tonal primary hovered state layer colormd.comp.extended-fab.primary-container.hovered.state-layer.color | #4F378B md.comp.extended-fab.primary-container.hovered.state-layer.color
|
Extended FAB tonal primary hovered state layer opacitymd.comp.extended-fab.primary-container.hovered.state-layer.opacity | 8% md.comp.extended-fab.primary-container.hovered.state-layer.opacity
|
Focused
| Token | Value |
|---|---|
Extended FAB tonal primary focused container elevationmd.comp.extended-fab.primary-container.focused.container.elevation | 6dp md.comp.extended-fab.primary-container.focused.container.elevation
|
Extended FAB tonal primary focused icon colormd.comp.extended-fab.primary-container.focused.icon.color | #4F378B md.comp.extended-fab.primary-container.focused.icon.color
|
Extended FAB tonal primary focused label text colormd.comp.extended-fab.primary-container.focused.label-text.color | #4F378B md.comp.extended-fab.primary-container.focused.label-text.color
|
Extended FAB tonal primary focused state layer colormd.comp.extended-fab.primary-container.focused.state-layer.color | #4F378B md.comp.extended-fab.primary-container.focused.state-layer.color
|
Extended FAB tonal primary focused state layer opacitymd.comp.extended-fab.primary-container.focused.state-layer.opacity | 10% md.comp.extended-fab.primary-container.focused.state-layer.opacity
|
Pressed
| Token | Value |
|---|---|
Extended FAB tonal primary pressed container elevationmd.comp.extended-fab.primary-container.pressed.container.elevation | 6dp md.comp.extended-fab.primary-container.pressed.container.elevation
|
Extended FAB tonal primary pressed icon colormd.comp.extended-fab.primary-container.pressed.icon.color | #4F378B md.comp.extended-fab.primary-container.pressed.icon.color
|
Extended FAB tonal primary pressed label text colormd.comp.extended-fab.primary-container.pressed.label-text.color | #4F378B md.comp.extended-fab.primary-container.pressed.label-text.color
|
Extended FAB tonal primary pressed state layer colormd.comp.extended-fab.primary-container.pressed.state-layer.color | #4F378B md.comp.extended-fab.primary-container.pressed.state-layer.color
|
Extended FAB tonal primary pressed state layer opacitymd.comp.extended-fab.primary-container.pressed.state-layer.opacity | 10% md.comp.extended-fab.primary-container.pressed.state-layer.opacity
|
Extended FAB - Color - Tonal secondary
Enabled
| Token | Value |
|---|---|
Extended FAB tonal secondary container colormd.comp.extended-fab.secondary-container.container.color | #E8DEF8 md.comp.extended-fab.secondary-container.container.color
|
Extended FAB tonal secondary container elevationmd.comp.extended-fab.secondary-container.container.elevation | 6dp md.comp.extended-fab.secondary-container.container.elevation
|
Extended FAB tonal secondary container shadow colormd.comp.extended-fab.secondary-container.container.shadow-color | #000000 md.comp.extended-fab.secondary-container.container.shadow-color
|
Extended FAB tonal secondary container icon colormd.comp.extended-fab.secondary-container.icon.color | #4A4458 md.comp.extended-fab.secondary-container.icon.color
|
Extended FAB tonal secondary label text colormd.comp.extended-fab.secondary-container.label-text.color | #4A4458 md.comp.extended-fab.secondary-container.label-text.color
|
Hovered
| Token | Value |
|---|---|
Extended FAB tonal secondary hovered container elevationmd.comp.extended-fab.secondary-container.hovered.container.elevation | 8dp md.comp.extended-fab.secondary-container.hovered.container.elevation
|
Extended FAB tonal secondary hovered icon colormd.comp.extended-fab.secondary-container.hovered.icon.color | #4A4458 md.comp.extended-fab.secondary-container.hovered.icon.color
|
Extended FAB tonal secondary hovered label text colormd.comp.extended-fab.secondary-container.hovered.label-text.color | #4A4458 md.comp.extended-fab.secondary-container.hovered.label-text.color
|
Extended FAB tonal secondary hovered state layer colormd.comp.extended-fab.secondary-container.hovered.state-layer.color | #4A4458 md.comp.extended-fab.secondary-container.hovered.state-layer.color
|
Extended FAB tonal secondary hovered state layer opacitymd.comp.extended-fab.secondary-container.hovered.state-layer.opacity | 8% md.comp.extended-fab.secondary-container.hovered.state-layer.opacity
|
Focused
| Token | Value |
|---|---|
Extended FAB tonal secondary focused container elevationmd.comp.extended-fab.secondary-container.focused.container.elevation | 6dp md.comp.extended-fab.secondary-container.focused.container.elevation
|
Extended FAB tonal secondary focused icon colormd.comp.extended-fab.secondary-container.focused.icon.color | #4A4458 md.comp.extended-fab.secondary-container.focused.icon.color
|
Extended FAB tonal secondary focused label text colormd.comp.extended-fab.secondary-container.focused.label-text.color | #4A4458 md.comp.extended-fab.secondary-container.focused.label-text.color
|
Extended FAB tonal secondary focused state layer colormd.comp.extended-fab.secondary-container.focused.state-layer.color | #4A4458 md.comp.extended-fab.secondary-container.focused.state-layer.color
|
Extended FAB tonal secondary focused state layer opacitymd.comp.extended-fab.secondary-container.focused.state-layer.opacity | 10% md.comp.extended-fab.secondary-container.focused.state-layer.opacity
|
Pressed
| Token | Value |
|---|---|
Extended FAB tonal secondary pressed container elevationmd.comp.extended-fab.secondary-container.pressed.container.elevation | 6dp md.comp.extended-fab.secondary-container.pressed.container.elevation
|
Extended FAB tonal secondary pressed icon colormd.comp.extended-fab.secondary-container.pressed.icon.color | #4A4458 md.comp.extended-fab.secondary-container.pressed.icon.color
|
Extended FAB tonal secondary pressed label text colormd.comp.extended-fab.secondary-container.pressed.label-text.color | #4A4458 md.comp.extended-fab.secondary-container.pressed.label-text.color
|
Extended FAB tonal secondary pressed state layer colormd.comp.extended-fab.secondary-container.pressed.state-layer.color | #4A4458 md.comp.extended-fab.secondary-container.pressed.state-layer.color
|
Extended FAB tonal secondary pressed state layer opacitymd.comp.extended-fab.secondary-container.pressed.state-layer.opacity | 10% md.comp.extended-fab.secondary-container.pressed.state-layer.opacity
|
Extended FAB - Size - Small
| Token | Value |
|---|---|
Extended FAB small container heightmd.comp.extended-fab.small.container.height | 56dp md.comp.extended-fab.small.container.height |
Extended FAB small container shapemd.comp.extended-fab.small.container.shape | 16dp md.comp.extended-fab.small.container.shape
|
Extended FAB small icon label spacemd.comp.extended-fab.small.icon-label-space | 8dp md.comp.extended-fab.small.icon-label-space
|
Extended FAB small icon sizemd.comp.extended-fab.small.icon.size | 24dp md.comp.extended-fab.small.icon.size |
Extended FAB small label textmd.comp.extended-fab.small.label-text | Roboto · 16pt · weight 500 · line height 24pt · tracking 0.15pt md.comp.extended-fab.small.label-text
|
Extended FAB small leading spacemd.comp.extended-fab.small.leading-space | 16dp md.comp.extended-fab.small.leading-space
|
Extended FAB small trailing spacemd.comp.extended-fab.small.trailing-space | 16dp md.comp.extended-fab.small.trailing-space
|
Extended FAB - Color - Tonal tertiary
Enabled
| Token | Value |
|---|---|
Extended FAB tonal tertiary container colormd.comp.extended-fab.tertiary-container.container.color | #FFD8E4 md.comp.extended-fab.tertiary-container.container.color
|
Extended FAB tonal tertiary container elevationmd.comp.extended-fab.tertiary-container.container.elevation | 6dp md.comp.extended-fab.tertiary-container.container.elevation
|
Extended FAB tonal tertiary container shadow colormd.comp.extended-fab.tertiary-container.container.shadow-color | #000000 md.comp.extended-fab.tertiary-container.container.shadow-color
|
Extended FAB tonal tertiary container icon colormd.comp.extended-fab.tertiary-container.icon.color | #633B48 md.comp.extended-fab.tertiary-container.icon.color
|
Extended FAB tonal tertiary label text colormd.comp.extended-fab.tertiary-container.label-text.color | #633B48 md.comp.extended-fab.tertiary-container.label-text.color
|
Hovered
| Token | Value |
|---|---|
Extended FAB tonal tertiary hovered container elevationmd.comp.extended-fab.tertiary-container.hovered.container.elevation | 8dp md.comp.extended-fab.tertiary-container.hovered.container.elevation
|
Extended FAB tonal tertiary hovered icon colormd.comp.extended-fab.tertiary-container.hovered.icon.color | #633B48 md.comp.extended-fab.tertiary-container.hovered.icon.color
|
Extended FAB tonal tertiary hovered label text colormd.comp.extended-fab.tertiary-container.hovered.label-text.color | #633B48 md.comp.extended-fab.tertiary-container.hovered.label-text.color
|
Extended FAB tonal tertiary hovered state layer colormd.comp.extended-fab.tertiary-container.hovered.state-layer.color | #633B48 md.comp.extended-fab.tertiary-container.hovered.state-layer.color
|
Extended FAB tonal tertiary hovered state layer opacitymd.comp.extended-fab.tertiary-container.hovered.state-layer.opacity | 8% md.comp.extended-fab.tertiary-container.hovered.state-layer.opacity
|
Focused
| Token | Value |
|---|---|
Extended FAB tonal tertiary focused container elevationmd.comp.extended-fab.tertiary-container.focused.container.elevation | 6dp md.comp.extended-fab.tertiary-container.focused.container.elevation
|
Extended FAB tonal tertiary focused icon colormd.comp.extended-fab.tertiary-container.focused.icon.color | #633B48 md.comp.extended-fab.tertiary-container.focused.icon.color
|
Extended FAB tonal tertiary focused label text colormd.comp.extended-fab.tertiary-container.focused.label-text.color | #633B48 md.comp.extended-fab.tertiary-container.focused.label-text.color
|
Extended FAB tonal tertiary focused state layer colormd.comp.extended-fab.tertiary-container.focused.state-layer.color | #633B48 md.comp.extended-fab.tertiary-container.focused.state-layer.color
|
Extended FAB tonal tertiary focused state layer opacitymd.comp.extended-fab.tertiary-container.focused.state-layer.opacity | 10% md.comp.extended-fab.tertiary-container.focused.state-layer.opacity
|
Pressed
| Token | Value |
|---|---|
Extended FAB tonal tertiary pressed container elevationmd.comp.extended-fab.tertiary-container.pressed.container.elevation | 6dp md.comp.extended-fab.tertiary-container.pressed.container.elevation
|
Extended FAB tonal tertiary pressed icon colormd.comp.extended-fab.tertiary-container.pressed.icon.color | #633B48 md.comp.extended-fab.tertiary-container.pressed.icon.color
|
Extended FAB tonal tertiary pressed label text colormd.comp.extended-fab.tertiary-container.pressed.label-text.color | #633B48 md.comp.extended-fab.tertiary-container.pressed.label-text.color
|
Extended FAB tonal tertiary pressed state layer colormd.comp.extended-fab.tertiary-container.pressed.state-layer.color | #633B48 md.comp.extended-fab.tertiary-container.pressed.state-layer.color
|
Extended FAB tonal tertiary pressed state layer opacitymd.comp.extended-fab.tertiary-container.pressed.state-layer.opacity | 10% md.comp.extended-fab.tertiary-container.pressed.state-layer.opacity
|
Extended FAB - Color - Primary
Enabled
| Token | Value |
|---|---|
Extended FAB primary container colormd.comp.extended-fab.primary.container.color | #6750A4 md.comp.extended-fab.primary.container.color
|
Extended FAB primary container elevationmd.comp.extended-fab.primary.container.elevation | 6dp md.comp.extended-fab.primary.container.elevation
|
Extended FAB primary container shadow colormd.comp.extended-fab.primary.container.shadow-color | #000000 md.comp.extended-fab.primary.container.shadow-color
|
Extended FAB primary container icon colormd.comp.extended-fab.primary.icon.color | #FFFFFF md.comp.extended-fab.primary.icon.color
|
Extended FAB primary label text colormd.comp.extended-fab.primary.label-text.color | #FFFFFF md.comp.extended-fab.primary.label-text.color
|
Hovered
| Token | Value |
|---|---|
Extended FAB primary hovered container elevationmd.comp.extended-fab.primary.hovered.container.elevation | 8dp md.comp.extended-fab.primary.hovered.container.elevation
|
Extended FAB primary hovered icon colormd.comp.extended-fab.primary.hovered.icon.color | #FFFFFF md.comp.extended-fab.primary.hovered.icon.color
|
Extended FAB primary hovered label text colormd.comp.extended-fab.primary.hovered.label-text.color | #FFFFFF md.comp.extended-fab.primary.hovered.label-text.color
|
Extended FAB primary hovered state layer colormd.comp.extended-fab.primary.hovered.state-layer.color | #FFFFFF md.comp.extended-fab.primary.hovered.state-layer.color
|
Extended FAB primary hovered state layer opacitymd.comp.extended-fab.primary.hovered.state-layer.opacity | 8% md.comp.extended-fab.primary.hovered.state-layer.opacity
|
Focused
| Token | Value |
|---|---|
Extended FAB primary focused container elevationmd.comp.extended-fab.primary.focused.container.elevation | 6dp md.comp.extended-fab.primary.focused.container.elevation
|
Extended FAB primary focused icon colormd.comp.extended-fab.primary.focused.icon.color | #FFFFFF md.comp.extended-fab.primary.focused.icon.color
|
Extended FAB primary focused label text colormd.comp.extended-fab.primary.focused.label-text.color | #FFFFFF md.comp.extended-fab.primary.focused.label-text.color
|
Extended FAB primary focused state layer colormd.comp.extended-fab.primary.focused.state-layer.color | #FFFFFF md.comp.extended-fab.primary.focused.state-layer.color
|
Extended FAB primary focused state layer opacitymd.comp.extended-fab.primary.focused.state-layer.opacity | 10% md.comp.extended-fab.primary.focused.state-layer.opacity
|
Pressed
| Token | Value |
|---|---|
Extended FAB primary pressed container elevationmd.comp.extended-fab.primary.pressed.container.elevation | 6dp md.comp.extended-fab.primary.pressed.container.elevation
|
Extended FAB primary pressed icon colormd.comp.extended-fab.primary.pressed.icon.color | #FFFFFF md.comp.extended-fab.primary.pressed.icon.color
|
Extended FAB primary pressed label text colormd.comp.extended-fab.primary.pressed.label-text.color | #FFFFFF md.comp.extended-fab.primary.pressed.label-text.color
|
Extended FAB primary pressed state layer colormd.comp.extended-fab.primary.pressed.state-layer.color | #FFFFFF md.comp.extended-fab.primary.pressed.state-layer.color
|
Extended FAB primary pressed state layer opacitymd.comp.extended-fab.primary.pressed.state-layer.opacity | 10% md.comp.extended-fab.primary.pressed.state-layer.opacity
|
[Deprecated] Enabled
[Deprecated] Container
| Token | Value |
|---|---|
Extended FAB (primary) container heightmd.comp.extended-fab.primary.container.height | 56dp md.comp.extended-fab.primary.container.height |
Extended FAB (primary) container shapemd.comp.extended-fab.primary.container.shape | 16dp md.comp.extended-fab.primary.container.shape
|
Primary extended FAB lowered container elevationmd.comp.extended-fab.primary.lowered.container.elevation | 1dp md.comp.extended-fab.primary.lowered.container.elevation
|
[Deprecated] Label text
| Token | Value |
|---|---|
Extended FAB (primary) fontmd.comp.extended-fab.primary.label-text.font | Roboto md.comp.extended-fab.primary.label-text.font
|
Extended FAB (primary) heightmd.comp.extended-fab.primary.label-text.line-height | 20pt md.comp.extended-fab.primary.label-text.line-height
|
Extended FAB (primary) sizemd.comp.extended-fab.primary.label-text.size | 14pt md.comp.extended-fab.primary.label-text.size
|
Extended FAB (primary) trackingmd.comp.extended-fab.primary.label-text.tracking | 0.1pt md.comp.extended-fab.primary.label-text.tracking
|
Label text type stylemd.comp.extended-fab.primary.label-text.type | Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt md.comp.extended-fab.primary.label-text.type
|
Extended FAB (primary) weightmd.comp.extended-fab.primary.label-text.weight | 500 md.comp.extended-fab.primary.label-text.weight
|
[Deprecated] Icon
| Token | Value |
|---|---|
Extended FAB (primary) icon sizemd.comp.extended-fab.primary.icon.size | 24dp md.comp.extended-fab.primary.icon.size |
[Deprecated] Hovered
[Deprecated] Container
| Token | Value |
|---|---|
Extended FAB (primary) hover container elevationmd.comp.extended-fab.primary.hover.container.elevation | 8dp md.comp.extended-fab.primary.hover.container.elevation
|
Primary extended FAB lowered hover container elevationmd.comp.extended-fab.primary.lowered.hover.container.elevation | 3dp md.comp.extended-fab.primary.lowered.hover.container.elevation
|
[Deprecated] Label text
| Token | Value |
|---|---|
Extended FAB (primary) hover label text colormd.comp.extended-fab.primary.hover.label-text.color | #4F378B md.comp.extended-fab.primary.hover.label-text.color
|
[Deprecated] State layer
| Token | Value |
|---|---|
Extended FAB (primary) hover state layer colormd.comp.extended-fab.primary.hover.state-layer.color | #4F378B md.comp.extended-fab.primary.hover.state-layer.color
|
Extended FAB (primary) hover state layer opacitymd.comp.extended-fab.primary.hover.state-layer.opacity | 8% md.comp.extended-fab.primary.hover.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
Extended FAB (primary) hover icon colormd.comp.extended-fab.primary.hover.icon.color | #4F378B md.comp.extended-fab.primary.hover.icon.color
|
[Deprecated] Focused
[Deprecated] Focus indicator
| Token | Value |
|---|---|
Extended FAB (primary) focus indicator colormd.comp.extended-fab.primary.focus.indicator.color | #625B71 md.comp.extended-fab.primary.focus.indicator.color
|
Extended FAB (primary) focus indicator offsetmd.comp.extended-fab.primary.focus.indicator.outline.offset | 2dp md.comp.extended-fab.primary.focus.indicator.outline.offset
|
Extended FAB (primary) focus indicator thicknessmd.comp.extended-fab.primary.focus.indicator.thickness | 3dp md.comp.extended-fab.primary.focus.indicator.thickness
|
[Deprecated] Container
| Token | Value |
|---|---|
Primary extended FAB focus container elevationmd.comp.extended-fab.primary.focus.container.elevation | 6dp md.comp.extended-fab.primary.focus.container.elevation
|
Primary extended FAB lowered focus container elevationmd.comp.extended-fab.primary.lowered.focus.container.elevation | 1dp md.comp.extended-fab.primary.lowered.focus.container.elevation
|
[Deprecated] Label text
| Token | Value |
|---|---|
Extended FAB (primary) focus label text colormd.comp.extended-fab.primary.focus.label-text.color | #4F378B md.comp.extended-fab.primary.focus.label-text.color
|
[Deprecated] State layer
| Token | Value |
|---|---|
Extended FAB (primary) focus state layer colormd.comp.extended-fab.primary.focus.state-layer.color | #4F378B md.comp.extended-fab.primary.focus.state-layer.color
|
Extended FAB (primary) focus state layer opacitymd.comp.extended-fab.primary.focus.state-layer.opacity | 10% md.comp.extended-fab.primary.focus.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
Extended FAB (primary) focus icon colormd.comp.extended-fab.primary.focus.icon.color | #4F378B md.comp.extended-fab.primary.focus.icon.color
|
[Deprecated] Pressed (ripple)
[Deprecated] Container
| Token | Value |
|---|---|
Primary extended FAB lowered pressed container elevationmd.comp.extended-fab.primary.lowered.pressed.container.elevation | 1dp md.comp.extended-fab.primary.lowered.pressed.container.elevation
|
Extended FAB - Color - Surface
Enabled
Container
| Token | Value |
|---|---|
Extended FAB (primary) container colormd.comp.extended-fab.surface.container.color | #ECE6F0 md.comp.extended-fab.surface.container.color
|
Extended FAB (primary) container elevationmd.comp.extended-fab.surface.container.elevation | 6dp md.comp.extended-fab.surface.container.elevation
|
Extended FAB (primary) container heightmd.comp.extended-fab.surface.container.height | 56dp md.comp.extended-fab.surface.container.height |
Surface extended FAB container shadow colormd.comp.extended-fab.surface.container.shadow-color | #000000 md.comp.extended-fab.surface.container.shadow-color
|
Extended FAB (primary) container shapemd.comp.extended-fab.surface.container.shape | 16dp md.comp.extended-fab.surface.container.shape
|
Extended FAB (primary) container surface tint layer colormd.comp.extended-fab.surface.container.surface-tint-layer.color | #6750A4 md.comp.extended-fab.surface.container.surface-tint-layer.color
|
Extended FAB (surface) lowered container colormd.comp.extended-fab.surface.lowered.container.color | #F7F2FA md.comp.extended-fab.surface.lowered.container.color
|
Surface extended FAB lowered container elevationmd.comp.extended-fab.surface.lowered.container.elevation | 1dp md.comp.extended-fab.surface.lowered.container.elevation
|
Label text
| Token | Value |
|---|---|
Extended FAB (primary) colormd.comp.extended-fab.surface.label-text.color | #6750A4 md.comp.extended-fab.surface.label-text.color
|
Extended FAB (primary) fontmd.comp.extended-fab.surface.label-text.font | Roboto md.comp.extended-fab.surface.label-text.font
|
Extended FAB (primary) heightmd.comp.extended-fab.surface.label-text.line-height | 20pt md.comp.extended-fab.surface.label-text.line-height
|
Extended FAB (primary) sizemd.comp.extended-fab.surface.label-text.size | 14pt md.comp.extended-fab.surface.label-text.size
|
Extended FAB (primary) trackingmd.comp.extended-fab.surface.label-text.tracking | 0.1pt md.comp.extended-fab.surface.label-text.tracking
|
Label text type stylemd.comp.extended-fab.surface.label-text.type | Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt md.comp.extended-fab.surface.label-text.type
|
Extended FAB (primary) weightmd.comp.extended-fab.surface.label-text.weight | 500 md.comp.extended-fab.surface.label-text.weight
|
Icon
| Token | Value |
|---|---|
Extended FAB (primary) icon colormd.comp.extended-fab.surface.icon.color | #6750A4 md.comp.extended-fab.surface.icon.color
|
Extended FAB (primary) icon sizemd.comp.extended-fab.surface.icon.size | 24dp md.comp.extended-fab.surface.icon.size |
Hovered
Container
| Token | Value |
|---|---|
Extended FAB (primary) hover container elevationmd.comp.extended-fab.surface.hover.container.elevation | 8dp md.comp.extended-fab.surface.hover.container.elevation
|
Surface extended FAB lowered hover container elevationmd.comp.extended-fab.surface.lowered.hover.container.elevation | 3dp md.comp.extended-fab.surface.lowered.hover.container.elevation
|
Label text
| Token | Value |
|---|---|
Extended FAB (primary) hover colormd.comp.extended-fab.surface.hover.label-text.color | #6750A4 md.comp.extended-fab.surface.hover.label-text.color
|
State layer
| Token | Value |
|---|---|
Extended FAB (primary) hover state layer colormd.comp.extended-fab.surface.hover.state-layer.color | #6750A4 md.comp.extended-fab.surface.hover.state-layer.color
|
Extended FAB (primary) hover state layer opacitymd.comp.extended-fab.surface.hover.state-layer.opacity | 8% md.comp.extended-fab.surface.hover.state-layer.opacity
|
Icon
| Token | Value |
|---|---|
Extended FAB (primary) hover icon colormd.comp.extended-fab.surface.hover.icon.color | #6750A4 md.comp.extended-fab.surface.hover.icon.color
|
Focused
Focus indicator
| Token | Value |
|---|---|
Extended FAB (primary) focus indicator colormd.comp.extended-fab.surface.focus.indicator.color | #625B71 md.comp.extended-fab.surface.focus.indicator.color
|
Extended FAB (primary) focus indicator offsetmd.comp.extended-fab.surface.focus.indicator.outline.offset | 2dp md.comp.extended-fab.surface.focus.indicator.outline.offset
|
Extended FAB (primary) focus indicator thicknessmd.comp.extended-fab.surface.focus.indicator.thickness | 3dp md.comp.extended-fab.surface.focus.indicator.thickness
|
Container
| Token | Value |
|---|---|
Surface extended FAB focus container elevationmd.comp.extended-fab.surface.focus.container.elevation | 6dp md.comp.extended-fab.surface.focus.container.elevation
|
Surface extended FAB lowered focus container elevationmd.comp.extended-fab.surface.lowered.focus.container.elevation | 1dp md.comp.extended-fab.surface.lowered.focus.container.elevation
|
Label text
| Token | Value |
|---|---|
Extended FAB (primary) focus colormd.comp.extended-fab.surface.focus.label-text.color | #6750A4 md.comp.extended-fab.surface.focus.label-text.color
|
State layer
| Token | Value |
|---|---|
Extended FAB (primary) focus state layer colormd.comp.extended-fab.surface.focus.state-layer.color | #6750A4 md.comp.extended-fab.surface.focus.state-layer.color
|
Extended FAB (primary) focus state layer opacitymd.comp.extended-fab.surface.focus.state-layer.opacity | 10% md.comp.extended-fab.surface.focus.state-layer.opacity
|
Icon
| Token | Value |
|---|---|
Extended FAB (primary) focus icon colormd.comp.extended-fab.surface.focus.icon.color | #6750A4 md.comp.extended-fab.surface.focus.icon.color
|
Pressed (ripple)
Container
| Token | Value |
|---|---|
Surface extended FAB lowered pressed container elevationmd.comp.extended-fab.surface.lowered.pressed.container.elevation | 1dp md.comp.extended-fab.surface.lowered.pressed.container.elevation
|
Extended FAB (primary) pressed container elevationmd.comp.extended-fab.surface.pressed.container.elevation | 6dp md.comp.extended-fab.surface.pressed.container.elevation
|
Label text
| Token | Value |
|---|---|
Extended FAB (primary) pressed colormd.comp.extended-fab.surface.pressed.label-text.color | #6750A4 md.comp.extended-fab.surface.pressed.label-text.color
|
State layer
| Token | Value |
|---|---|
Extended FAB (primary) pressed state layer colormd.comp.extended-fab.surface.pressed.state-layer.color | #6750A4 md.comp.extended-fab.surface.pressed.state-layer.color
|
Extended FAB (primary) pressed state layer opacitymd.comp.extended-fab.surface.pressed.state-layer.opacity | 10% md.comp.extended-fab.surface.pressed.state-layer.opacity
|
Icon
| Token | Value |
|---|---|
Extended FAB (primary) pressed icon colormd.comp.extended-fab.surface.pressed.icon.color | #6750A4 md.comp.extended-fab.surface.pressed.icon.color
|
Extended FAB - Color - Secondary
Enabled
| Token | Value |
|---|---|
Extended FAB secondary container colormd.comp.extended-fab.secondary.container.color | #625B71 md.comp.extended-fab.secondary.container.color
|
Extended FAB secondary container elevationmd.comp.extended-fab.secondary.container.elevation | 6dp md.comp.extended-fab.secondary.container.elevation
|
Extended FAB secondary container shadow colormd.comp.extended-fab.secondary.container.shadow-color | #000000 md.comp.extended-fab.secondary.container.shadow-color
|
Extended FAB secondary container icon colormd.comp.extended-fab.secondary.icon.color | #FFFFFF md.comp.extended-fab.secondary.icon.color
|
Extended FAB secondary label text colormd.comp.extended-fab.secondary.label-text.color | #FFFFFF md.comp.extended-fab.secondary.label-text.color
|
Hovered
| Token | Value |
|---|---|
Extended FAB secondary hovered container elevationmd.comp.extended-fab.secondary.hovered.container.elevation | 8dp md.comp.extended-fab.secondary.hovered.container.elevation
|
Extended FAB secondary hovered icon colormd.comp.extended-fab.secondary.hovered.icon.color | #FFFFFF md.comp.extended-fab.secondary.hovered.icon.color
|
Extended FAB secondary hovered label text colormd.comp.extended-fab.secondary.hovered.label-text.color | #FFFFFF md.comp.extended-fab.secondary.hovered.label-text.color
|
Extended FAB secondary hovered state layer colormd.comp.extended-fab.secondary.hovered.state-layer.color | #FFFFFF md.comp.extended-fab.secondary.hovered.state-layer.color
|
Extended FAB secondary hovered state layer opacitymd.comp.extended-fab.secondary.hovered.state-layer.opacity | 8% md.comp.extended-fab.secondary.hovered.state-layer.opacity
|
Focused
| Token | Value |
|---|---|
Extended FAB secondary focused container elevationmd.comp.extended-fab.secondary.focused.container.elevation | 6dp md.comp.extended-fab.secondary.focused.container.elevation
|
Extended FAB secondary focused icon colormd.comp.extended-fab.secondary.focused.icon.color | #FFFFFF md.comp.extended-fab.secondary.focused.icon.color
|
Extended FAB secondary focused label text colormd.comp.extended-fab.secondary.focused.label-text.color | #FFFFFF md.comp.extended-fab.secondary.focused.label-text.color
|
Extended FAB secondary focused state layer colormd.comp.extended-fab.secondary.focused.state-layer.color | #FFFFFF md.comp.extended-fab.secondary.focused.state-layer.color
|
Extended FAB secondary focused state layer opacitymd.comp.extended-fab.secondary.focused.state-layer.opacity | 10% md.comp.extended-fab.secondary.focused.state-layer.opacity
|
Pressed
| Token | Value |
|---|---|
Extended FAB secondary pressed container elevationmd.comp.extended-fab.secondary.pressed.container.elevation | 6dp md.comp.extended-fab.secondary.pressed.container.elevation
|
Extended FAB secondary pressed icon colormd.comp.extended-fab.secondary.pressed.icon.color | #FFFFFF md.comp.extended-fab.secondary.pressed.icon.color
|
Extended FAB secondary pressed label text colormd.comp.extended-fab.secondary.pressed.label-text.color | #FFFFFF md.comp.extended-fab.secondary.pressed.label-text.color
|
Extended FAB secondary pressed state layer colormd.comp.extended-fab.secondary.pressed.state-layer.color | #FFFFFF md.comp.extended-fab.secondary.pressed.state-layer.color
|
Extended FAB secondary pressed state layer opacitymd.comp.extended-fab.secondary.pressed.state-layer.opacity | 10% md.comp.extended-fab.secondary.pressed.state-layer.opacity
|
[Deprecated] Enabled
[Deprecated] Container
| Token | Value |
|---|---|
Extended FAB (secondary) container heightmd.comp.extended-fab.secondary.container.height | 56dp md.comp.extended-fab.secondary.container.height |
Extended FAB (secondary) container shapemd.comp.extended-fab.secondary.container.shape | 16dp md.comp.extended-fab.secondary.container.shape
|
Secondary extended FAB lowered container elevationmd.comp.extended-fab.secondary.lowered.container.elevation | 1dp md.comp.extended-fab.secondary.lowered.container.elevation
|
[Deprecated] Label text
| Token | Value |
|---|---|
Extended FAB (secondary) fontmd.comp.extended-fab.secondary.label-text.font | Roboto md.comp.extended-fab.secondary.label-text.font
|
Extended FAB (secondary) heightmd.comp.extended-fab.secondary.label-text.line-height | 20pt md.comp.extended-fab.secondary.label-text.line-height
|
Extended FAB (secondary) sizemd.comp.extended-fab.secondary.label-text.size | 14pt md.comp.extended-fab.secondary.label-text.size
|
Extended FAB (secondary) trackingmd.comp.extended-fab.secondary.label-text.tracking | 0.1pt md.comp.extended-fab.secondary.label-text.tracking
|
Label text type stylemd.comp.extended-fab.secondary.label-text.type | Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt md.comp.extended-fab.secondary.label-text.type
|
Extended FAB (secondary) weightmd.comp.extended-fab.secondary.label-text.weight | 500 md.comp.extended-fab.secondary.label-text.weight
|
[Deprecated] Icon
| Token | Value |
|---|---|
Extended FAB (secondary) icon sizemd.comp.extended-fab.secondary.icon.size | 24dp md.comp.extended-fab.secondary.icon.size |
[Deprecated] Hovered
[Deprecated] Container
| Token | Value |
|---|---|
Extended FAB (secondary) hover container elevationmd.comp.extended-fab.secondary.hover.container.elevation | 8dp md.comp.extended-fab.secondary.hover.container.elevation
|
Secondary extended FAB lowered hover container elevationmd.comp.extended-fab.secondary.lowered.hover.container.elevation | 3dp md.comp.extended-fab.secondary.lowered.hover.container.elevation
|
[Deprecated] Label text
| Token | Value |
|---|---|
Extended FAB (secondary) hover colormd.comp.extended-fab.secondary.hover.label-text.color | #4A4458 md.comp.extended-fab.secondary.hover.label-text.color
|
[Deprecated] State layer
| Token | Value |
|---|---|
Extended FAB (secondary) hover state layer colormd.comp.extended-fab.secondary.hover.state-layer.color | #4A4458 md.comp.extended-fab.secondary.hover.state-layer.color
|
Extended FAB (secondary) hover state layer opacitymd.comp.extended-fab.secondary.hover.state-layer.opacity | 8% md.comp.extended-fab.secondary.hover.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
Extended FAB (secondary) hover icon colormd.comp.extended-fab.secondary.hover.icon.color | #4A4458 md.comp.extended-fab.secondary.hover.icon.color
|
[Deprecated] Focused
[Deprecated] Focus indicator
| Token | Value |
|---|---|
Extended FAB (secondary) focus indicator colormd.comp.extended-fab.secondary.focus.indicator.color | #625B71 md.comp.extended-fab.secondary.focus.indicator.color
|
Extended FAB (secondary) focus indicator offsetmd.comp.extended-fab.secondary.focus.indicator.outline.offset | 2dp md.comp.extended-fab.secondary.focus.indicator.outline.offset
|
Extended FAB (secondary) focus indicator thicknessmd.comp.extended-fab.secondary.focus.indicator.thickness | 3dp md.comp.extended-fab.secondary.focus.indicator.thickness
|
[Deprecated] Container
| Token | Value |
|---|---|
Secondary extended FAB focus container elevationmd.comp.extended-fab.secondary.focus.container.elevation | 6dp md.comp.extended-fab.secondary.focus.container.elevation
|
Secondary extended FAB lowered focus container elevationmd.comp.extended-fab.secondary.lowered.focus.container.elevation | 1dp md.comp.extended-fab.secondary.lowered.focus.container.elevation
|
[Deprecated] Label text
| Token | Value |
|---|---|
Extended FAB (secondary) focus colormd.comp.extended-fab.secondary.focus.label-text.color | #4A4458 md.comp.extended-fab.secondary.focus.label-text.color
|
[Deprecated] State layer
| Token | Value |
|---|---|
Extended FAB (secondary) focus state layer colormd.comp.extended-fab.secondary.focus.state-layer.color | #4A4458 md.comp.extended-fab.secondary.focus.state-layer.color
|
Extended FAB (secondary) focus state layer opacitymd.comp.extended-fab.secondary.focus.state-layer.opacity | 10% md.comp.extended-fab.secondary.focus.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
Extended FAB (secondary) focus icon colormd.comp.extended-fab.secondary.focus.icon.color | #4A4458 md.comp.extended-fab.secondary.focus.icon.color
|
[Deprecated] Pressed (ripple)
[Deprecated] Container
| Token | Value |
|---|---|
Secondary extended FAB lowered pressed container elevationmd.comp.extended-fab.secondary.lowered.pressed.container.elevation | 1dp md.comp.extended-fab.secondary.lowered.pressed.container.elevation
|
Extended FAB - Color - Tertiary
Enabled
| Token | Value |
|---|---|
Extended FAB tertiary container colormd.comp.extended-fab.tertiary.container.color | #7D5260 md.comp.extended-fab.tertiary.container.color
|
Extended FAB tertiary container elevationmd.comp.extended-fab.tertiary.container.elevation | 6dp md.comp.extended-fab.tertiary.container.elevation
|
Extended FAB tertiary container shadow colormd.comp.extended-fab.tertiary.container.shadow-color | #000000 md.comp.extended-fab.tertiary.container.shadow-color
|
Extended FAB tertiary container icon colormd.comp.extended-fab.tertiary.icon.color | #FFFFFF md.comp.extended-fab.tertiary.icon.color
|
Extended FAB tertiary label text colormd.comp.extended-fab.tertiary.label-text.color | #FFFFFF md.comp.extended-fab.tertiary.label-text.color
|
Hovered
| Token | Value |
|---|---|
Extended FAB tertiary hovered container elevationmd.comp.extended-fab.tertiary.hovered.container.elevation | 8dp md.comp.extended-fab.tertiary.hovered.container.elevation
|
Extended FAB tertiary hovered icon colormd.comp.extended-fab.tertiary.hovered.icon.color | #FFFFFF md.comp.extended-fab.tertiary.hovered.icon.color
|
Extended FAB tertiary hovered label text colormd.comp.extended-fab.tertiary.hovered.label-text.color | #FFFFFF md.comp.extended-fab.tertiary.hovered.label-text.color
|
Extended FAB tertiary hovered state layer colormd.comp.extended-fab.tertiary.hovered.state-layer.color | #FFFFFF md.comp.extended-fab.tertiary.hovered.state-layer.color
|
Extended FAB tertiary hovered state layer opacitymd.comp.extended-fab.tertiary.hovered.state-layer.opacity | 8% md.comp.extended-fab.tertiary.hovered.state-layer.opacity
|
Focused
| Token | Value |
|---|---|
Extended FAB tertiary focused container elevationmd.comp.extended-fab.tertiary.focused.container.elevation | 6dp md.comp.extended-fab.tertiary.focused.container.elevation
|
Extended FAB tertiary focused icon colormd.comp.extended-fab.tertiary.focused.icon.color | #FFFFFF md.comp.extended-fab.tertiary.focused.icon.color
|
Extended FAB tertiary focused label text colormd.comp.extended-fab.tertiary.focused.label-text.color | #FFFFFF md.comp.extended-fab.tertiary.focused.label-text.color
|
Extended FAB tertiary focused state layer colormd.comp.extended-fab.tertiary.focused.state-layer.color | #FFFFFF md.comp.extended-fab.tertiary.focused.state-layer.color
|
Extended FAB tertiary focused state layer opacitymd.comp.extended-fab.tertiary.focused.state-layer.opacity | 10% md.comp.extended-fab.tertiary.focused.state-layer.opacity
|
Pressed
| Token | Value |
|---|---|
Extended FAB tertiary pressed container elevationmd.comp.extended-fab.tertiary.pressed.container.elevation | 6dp md.comp.extended-fab.tertiary.pressed.container.elevation
|
Extended FAB tertiary pressed icon colormd.comp.extended-fab.tertiary.pressed.icon.color | #FFFFFF md.comp.extended-fab.tertiary.pressed.icon.color
|
Extended FAB tertiary pressed label text colormd.comp.extended-fab.tertiary.pressed.label-text.color | #FFFFFF md.comp.extended-fab.tertiary.pressed.label-text.color
|
Extended FAB tertiary pressed state layer colormd.comp.extended-fab.tertiary.pressed.state-layer.color | #FFFFFF md.comp.extended-fab.tertiary.pressed.state-layer.color
|
Extended FAB tertiary pressed state layer opacitymd.comp.extended-fab.tertiary.pressed.state-layer.opacity | 10% md.comp.extended-fab.tertiary.pressed.state-layer.opacity
|
[Deprecated] Enabled
[Deprecated] Container
| Token | Value |
|---|---|
Extended FAB (tertiary) container heightmd.comp.extended-fab.tertiary.container.height | 56dp md.comp.extended-fab.tertiary.container.height |
Extended FAB (tertiary) container shapemd.comp.extended-fab.tertiary.container.shape | 16dp md.comp.extended-fab.tertiary.container.shape
|
Extended FAB (tertiary) lowered container elevationmd.comp.extended-fab.tertiary.lowered.container.elevation | 1dp md.comp.extended-fab.tertiary.lowered.container.elevation
|
[Deprecated] Label text
| Token | Value |
|---|---|
Extended FAB (tertiary) label text fontmd.comp.extended-fab.tertiary.label-text.font | Roboto md.comp.extended-fab.tertiary.label-text.font
|
Extended FAB (tertiary) label text line heightmd.comp.extended-fab.tertiary.label-text.line-height | 20pt md.comp.extended-fab.tertiary.label-text.line-height
|
Extended FAB (tertiary) label text sizemd.comp.extended-fab.tertiary.label-text.size | 14pt md.comp.extended-fab.tertiary.label-text.size
|
Extended FAB (tertiary) label text trackingmd.comp.extended-fab.tertiary.label-text.tracking | 0.1pt md.comp.extended-fab.tertiary.label-text.tracking
|
Label text type stylemd.comp.extended-fab.tertiary.label-text.type | Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt md.comp.extended-fab.tertiary.label-text.type
|
Extended FAB (tertiary) label text weightmd.comp.extended-fab.tertiary.label-text.weight | 500 md.comp.extended-fab.tertiary.label-text.weight
|
[Deprecated] Icon
| Token | Value |
|---|---|
Extended FAB (tertiary) icon sizemd.comp.extended-fab.tertiary.icon.size | 24dp md.comp.extended-fab.tertiary.icon.size |
[Deprecated] Hovered
[Deprecated] Container
| Token | Value |
|---|---|
Extended FAB (tertiary) hover container elevationmd.comp.extended-fab.tertiary.hover.container.elevation | 8dp md.comp.extended-fab.tertiary.hover.container.elevation
|
Extended FAB (tertiary) lowered hover container elevationmd.comp.extended-fab.tertiary.lowered.hover.container.elevation | 3dp md.comp.extended-fab.tertiary.lowered.hover.container.elevation
|
[Deprecated] Label text
| Token | Value |
|---|---|
Extended FAB (tertiary) hover label text colormd.comp.extended-fab.tertiary.hover.label-text.color | #633B48 md.comp.extended-fab.tertiary.hover.label-text.color
|
[Deprecated] State layer
| Token | Value |
|---|---|
Extended FAB (tertiary) hover state layer colormd.comp.extended-fab.tertiary.hover.state-layer.color | #633B48 md.comp.extended-fab.tertiary.hover.state-layer.color
|
Extended FAB (tertiary) hover state layer opacitymd.comp.extended-fab.tertiary.hover.state-layer.opacity | 8% md.comp.extended-fab.tertiary.hover.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
Extended FAB (tertiary) hover icon colormd.comp.extended-fab.tertiary.hover.icon.color | #633B48 md.comp.extended-fab.tertiary.hover.icon.color
|
[Deprecated] Focused
[Deprecated] Focus indicator
| Token | Value |
|---|---|
Extended FAB (tertiary) focus indicator colormd.comp.extended-fab.tertiary.focus.indicator.color | #625B71 md.comp.extended-fab.tertiary.focus.indicator.color
|
Extended FAB (tertiary) focus indicator offsetmd.comp.extended-fab.tertiary.focus.indicator.outline.offset | 2dp md.comp.extended-fab.tertiary.focus.indicator.outline.offset
|
Extended FAB (tertiary) focus indicator thicknessmd.comp.extended-fab.tertiary.focus.indicator.thickness | 3dp md.comp.extended-fab.tertiary.focus.indicator.thickness
|
[Deprecated] Container
| Token | Value |
|---|---|
Extended FAB (tertiary) focus container elevationmd.comp.extended-fab.tertiary.focus.container.elevation | 6dp md.comp.extended-fab.tertiary.focus.container.elevation
|
Extended FAB (tertiary) lowered focus container elevationmd.comp.extended-fab.tertiary.lowered.focus.container.elevation | 1dp md.comp.extended-fab.tertiary.lowered.focus.container.elevation
|
[Deprecated] Label text
| Token | Value |
|---|---|
Extended FAB (tertiary) focus label text colormd.comp.extended-fab.tertiary.focus.label-text.color | #633B48 md.comp.extended-fab.tertiary.focus.label-text.color
|
[Deprecated] State layer
| Token | Value |
|---|---|
Extended FAB (tertiary) focus state layer colormd.comp.extended-fab.tertiary.focus.state-layer.color | #633B48 md.comp.extended-fab.tertiary.focus.state-layer.color
|
Extended FAB (tertiary) focus state layer opacitymd.comp.extended-fab.tertiary.focus.state-layer.opacity | 10% md.comp.extended-fab.tertiary.focus.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
Extended FAB (tertiary) focus icon colormd.comp.extended-fab.tertiary.focus.icon.color | #633B48 md.comp.extended-fab.tertiary.focus.icon.color
|
[Deprecated] Pressed (ripple)
[Deprecated] Container
| Token | Value |
|---|---|
Extended FAB (tertiary) lowered pressed container elevationmd.comp.extended-fab.tertiary.lowered.pressed.container.elevation | 1dp md.comp.extended-fab.tertiary.lowered.pressed.container.elevation
|
Extended FAB - Color - Branded
Enabled
Container
| Token | Value |
|---|---|
Extended FAB (branded) container colormd.comp.extended-fab.branded.container.color | #ECE6F0 md.comp.extended-fab.branded.container.color
|
Extended FAB (branded) container elevationmd.comp.extended-fab.branded.container.elevation | 6dp md.comp.extended-fab.branded.container.elevation
|
Extended FAB (branded) container heightmd.comp.extended-fab.branded.container.height | 56dp md.comp.extended-fab.branded.container.height |
Branded extended FAB container shadow colormd.comp.extended-fab.branded.container.shadow-color | #000000 md.comp.extended-fab.branded.container.shadow-color
|
Extended FAB (branded) container shapemd.comp.extended-fab.branded.container.shape | 16dp md.comp.extended-fab.branded.container.shape
|
Extended FAB (branded) container surface tint layer colormd.comp.extended-fab.branded.container.surface-tint-layer.color | #6750A4 md.comp.extended-fab.branded.container.surface-tint-layer.color
|
Extended FAB (branded) lowered container colormd.comp.extended-fab.branded.lowered.container.color | #F7F2FA md.comp.extended-fab.branded.lowered.container.color
|
Branded extended FAB lowered container elevationmd.comp.extended-fab.branded.lowered.container.elevation | 1dp md.comp.extended-fab.branded.lowered.container.elevation
|
Label text
| Token | Value |
|---|---|
Extended FAB (branded) colormd.comp.extended-fab.branded.label-text.color | #1D1B20 md.comp.extended-fab.branded.label-text.color
|
Extended FAB (branded) fontmd.comp.extended-fab.branded.label-text.font | Roboto md.comp.extended-fab.branded.label-text.font
|
Extended FAB (branded) heightmd.comp.extended-fab.branded.label-text.line-height | 20pt md.comp.extended-fab.branded.label-text.line-height
|
Extended FAB (branded) sizemd.comp.extended-fab.branded.label-text.size | 14pt md.comp.extended-fab.branded.label-text.size
|
Extended FAB (branded) trackingmd.comp.extended-fab.branded.label-text.tracking | 0.1pt md.comp.extended-fab.branded.label-text.tracking
|
Label text type stylemd.comp.extended-fab.branded.label-text.type | Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt md.comp.extended-fab.branded.label-text.type
|
Extended FAB (branded) weightmd.comp.extended-fab.branded.label-text.weight | 500 md.comp.extended-fab.branded.label-text.weight
|
Icon
| Token | Value |
|---|---|
Extended FAB (branded) icon sizemd.comp.extended-fab.branded.icon.size | 36dp md.comp.extended-fab.branded.icon.size |
Hovered
Container
| Token | Value |
|---|---|
Extended FAB (branded) hover container elevationmd.comp.extended-fab.branded.hover.container.elevation | 8dp md.comp.extended-fab.branded.hover.container.elevation
|
Branded extended FAB lowered hover container elevationmd.comp.extended-fab.branded.lowered.hover.container.elevation | 3dp md.comp.extended-fab.branded.lowered.hover.container.elevation
|
Label text
| Token | Value |
|---|---|
Extended FAB (branded) hover colormd.comp.extended-fab.branded.hover.label-text.color | #6750A4 md.comp.extended-fab.branded.hover.label-text.color
|
State layer
| Token | Value |
|---|---|
Extended FAB (branded) hover state layer colormd.comp.extended-fab.branded.hover.state-layer.color | #6750A4 md.comp.extended-fab.branded.hover.state-layer.color
|
Extended FAB (branded) hover state layer opacitymd.comp.extended-fab.branded.hover.state-layer.opacity | 8% md.comp.extended-fab.branded.hover.state-layer.opacity
|
Focused
Focus indicator
| Token | Value |
|---|---|
Extended FAB (branded) focus indicator colormd.comp.extended-fab.branded.focus.indicator.color | #625B71 md.comp.extended-fab.branded.focus.indicator.color
|
Extended FAB (branded) focus indicator offsetmd.comp.extended-fab.branded.focus.indicator.outline.offset | 2dp md.comp.extended-fab.branded.focus.indicator.outline.offset
|
Extended FAB (branded) focus indicator thicknessmd.comp.extended-fab.branded.focus.indicator.thickness | 3dp md.comp.extended-fab.branded.focus.indicator.thickness
|
Container
| Token | Value |
|---|---|
Branded extended FAB focus container elevationmd.comp.extended-fab.branded.focus.container.elevation | 6dp md.comp.extended-fab.branded.focus.container.elevation
|
Branded extended FAB lowered focus container elevationmd.comp.extended-fab.branded.lowered.focus.container.elevation | 1dp md.comp.extended-fab.branded.lowered.focus.container.elevation
|
Label text
| Token | Value |
|---|---|
Extended FAB (branded) focus colormd.comp.extended-fab.branded.focus.label-text.color | #6750A4 md.comp.extended-fab.branded.focus.label-text.color
|
State layer
| Token | Value |
|---|---|
Extended FAB (branded) focus state layer colormd.comp.extended-fab.branded.focus.state-layer.color | #6750A4 md.comp.extended-fab.branded.focus.state-layer.color
|
Extended FAB (branded) focus state layer opacitymd.comp.extended-fab.branded.focus.state-layer.opacity | 10% md.comp.extended-fab.branded.focus.state-layer.opacity
|
Pressed (ripple)
Container
| Token | Value |
|---|---|
Branded extended FAB lowered pressed container elevationmd.comp.extended-fab.branded.lowered.pressed.container.elevation | 1dp md.comp.extended-fab.branded.lowered.pressed.container.elevation
|
Extended FAB (branded) pressed container elevationmd.comp.extended-fab.branded.pressed.container.elevation | 6dp md.comp.extended-fab.branded.pressed.container.elevation
|
Label text
| Token | Value |
|---|---|
Extended FAB (branded) pressed colormd.comp.extended-fab.branded.pressed.label-text.color | #6750A4 md.comp.extended-fab.branded.pressed.label-text.color
|
State layer
| Token | Value |
|---|---|
Extended FAB (branded) pressed state layer colormd.comp.extended-fab.branded.pressed.state-layer.color | #6750A4 md.comp.extended-fab.branded.pressed.state-layer.color
|
Extended FAB (branded) pressed state layer opacitymd.comp.extended-fab.branded.pressed.state-layer.opacity | 10% md.comp.extended-fab.branded.pressed.state-layer.opacity
|