Component

Material Design 3 primary FAB tokens

Browse tokens

TokenValue
Enabled
Enabled tokens
TokenValue
FAB (primary) container shapemd.comp.fab.primary.container.shape
md.sys.shape.corner.largeShow reference chainHide reference chain
md.comp.fab.primary.container.shape
  • md.sys.shape.corner.large
Rounded Corners · DefaultSize: 16dp
Container
Container tokens
TokenValue
FAB (primary) container heightmd.comp.fab.primary.container.height56dp
FAB (primary) container widthmd.comp.fab.primary.container.width56dp
Icon
Icon tokens
TokenValue
FAB (primary) icon sizemd.comp.fab.primary.icon.size24dp
Large
Large tokens
TokenValue
FAB (large primary) container shapemd.comp.fab.primary.large.container.shape
md.sys.shape.corner.extra-largeShow reference chainHide reference chain
md.comp.fab.primary.large.container.shape
  • md.sys.shape.corner.extra-large
Rounded Corners · DefaultSize: 28dp
Container
Container tokens
TokenValue
FAB (large primary) container heightmd.comp.fab.primary.large.container.height96dp
FAB (large primary) container widthmd.comp.fab.primary.large.container.width96dp
Icon
Icon tokens
TokenValue
FAB (large primary) icon sizemd.comp.fab.primary.large.icon.size36dp
Small
Small tokens
TokenValue
FAB (small primary) container shapemd.comp.fab.primary.small.container.shape
md.sys.shape.corner.mediumShow reference chainHide reference chain
md.comp.fab.primary.small.container.shape
  • md.sys.shape.corner.medium
Rounded Corners · DefaultSize: 12dp
Container
Container tokens
TokenValue
FAB (small primary) container heightmd.comp.fab.primary.small.container.height40dp
FAB (small primary) container widthmd.comp.fab.primary.small.container.width40dp
Icon
Icon tokens
TokenValue
FAB (small primary) icon sizemd.comp.fab.primary.small.icon.size24dp
Focused
Indicator
Indicator tokens
TokenValue
FAB (primary) focus indicator thicknessmd.comp.fab.primary.focus.indicator.thickness
md.sys.state.focus-indicator.thicknessShow reference chainHide reference chain
md.comp.fab.primary.focus.indicator.thickness
  • md.sys.state.focus-indicator.thickness
3dp
Outline
Outline tokens
TokenValue
FAB (primary) focus indicator offsetmd.comp.fab.primary.focus.indicator.outline.offset
md.sys.state.focus-indicator.outer-offsetShow reference chainHide reference chain
md.comp.fab.primary.focus.indicator.outline.offset
  • md.sys.state.focus-indicator.outer-offset
2dp
Large
Indicator
Indicator tokens
TokenValue
FAB (large primary) focus indicator thicknessmd.comp.fab.primary.large.focus.indicator.thickness
md.sys.state.focus-indicator.thicknessShow reference chainHide reference chain
md.comp.fab.primary.large.focus.indicator.thickness
  • md.sys.state.focus-indicator.thickness
3dp
Outline
Outline tokens
TokenValue
FAB (large primary) focus indicator offsetmd.comp.fab.primary.large.focus.indicator.outline.offset
md.sys.state.focus-indicator.outer-offsetShow reference chainHide reference chain
md.comp.fab.primary.large.focus.indicator.outline.offset
  • md.sys.state.focus-indicator.outer-offset
2dp
Small
Indicator
Indicator tokens
TokenValue
FAB (small primary) focus indicator thicknessmd.comp.fab.primary.small.focus.indicator.thickness
md.sys.state.focus-indicator.thicknessShow reference chainHide reference chain
md.comp.fab.primary.small.focus.indicator.thickness
  • md.sys.state.focus-indicator.thickness
3dp
Outline
Outline tokens
TokenValue
FAB (small primary) focus indicator offsetmd.comp.fab.primary.small.focus.indicator.outline.offset
md.sys.state.focus-indicator.outer-offsetShow reference chainHide reference chain
md.comp.fab.primary.small.focus.indicator.outline.offset
  • md.sys.state.focus-indicator.outer-offset
2dp