Skip to content
Skip design navigation
Etesie Alpha
Loading account
Components · Floating action button

Floating action button

The primary action of a screen. Sizes small through large, optionally extended with a label.

Anatomy

  • 1 .fab-root Elevated action surface. Carries no positioning — where a FAB sits belongs to the page, not to the component.
  • 2 .fab-icon The glyph.
  • 3 .fab-label Optional label, present only on an extended FAB.

Variants

  • Icon One glyph, no label.
  • Extended Adds a label beside the glyph.
Default

When to use

Use a floating action button for the screen’s primary action when that action should remain prominent while content scrolls.