Button [Floating Action Button]

Overview

The Floating Action Button (FAB) is a persistent, elevated trigger for the primary or most frequent action on a screen. It stays fixed in the layout, always within reach but never intrusive, with 3 semantic variants, 2 sizes, and 2 shape modes built for both mobile and desktop.

When should you use them?

Use a FAB for the single most important or most frequent action on a screen, like composing a new message, adding an item, or starting a key flow. Because it floats above content and stays fixed, reserve it for one primary action rather than competing options.

How should you use them?

• Use only one FAB per screen, for the single most important action.
• Place it in a consistent, reachable position (typically bottom-right) so users always know where to find it.
• Choose Large for mobile touch targets, Medium for denser desktop layouts.
• Match the variant to your surface: Primary for emphasis, Neutral or Inverse for subtler contexts.
• Keep the icon clear and recognizable, since a FAB usually has no text label.
• Give the FAB an accessible label for screen readers and keep it keyboard-focusable.