Component

Material Design 3 FAB tokens

Browse tokens

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