Floating Action Button

actions

FABs represent the most important action on a screen. They put key actions within reach and are used for high-emphasis, primary actions.

Variants

Surface

Default

FAB with surface container color

Primary

FAB with primary color

Secondary

FAB with secondary color

Tertiary

FAB with tertiary color

Branded

FAB with branded logo icon

Properties

Name Type Required Default Description
variant enum - surface Color variant of the FAB
size enum - medium Size of the FAB
label string - - Text label for extended FAB
lowered boolean - - Lowers the FAB elevation

States

enabled

Default interactive state

hovered

Mouse hover state

focused

Keyboard focus state

pressed

Active/pressed state

Accessibility

Role: button
Keyboard Support:
  • Enter - Activate the FAB
  • Space - Activate the FAB
  • Tab - Move focus to/from the FAB
Screen Reader Notes: Icon-only FABs require aria-label. Extended FABs with label attribute are announced automatically.

LLM Context

Intent: Provide quick access to the primary action on a screen
Anti-Patterns:
  • Multiple FABs on the same screen
  • FAB without aria-label (icon-only)
  • Using FAB for navigation
  • FAB for destructive actions
  • FAB that covers important content
Example Usage: 
<md-fab aria-label="Create"><md-icon slot="icon">add</md-icon></md-fab>
<md-fab variant="primary" aria-label="Compose"><md-icon slot="icon">edit</md-icon></md-fab>
<md-fab label="Compose" variant="primary"><md-icon slot="icon">edit</md-icon></md-fab>
<md-fab size="small" lowered aria-label="Add"><md-icon slot="icon">add</md-icon></md-fab>