A FAB (Floating Action Button) is the highest-priority action on a screen. It stays fixed in the bottom-right corner and is always reachable regardless of scroll position.
When to Use
- The page has one highest-priority action that should always be reachable
- The action affects the entire page (not a single list item)
- You need strong visual contrast against the content to guide users
When NOT to Use
- The action isn't the most important on the page — use a regular Button instead
- Multiple actions share equal priority — FAB expresses only one primary action
- The action is destructive (delete / clear) — avoid using FAB
Variants
| Variant | Description |
|---|---|
| Default | Black background — neutral, high-contrast |
| Brand 1 | Brand pink — primary brand accent |
| Brand 2 | Brand purple — secondary brand accent |
| Brand 3 | Brand blue — tertiary brand accent |
Expandable Options
When options are provided, the FAB becomes a speed dial — clicking it toggles an action list above the button. Each option is a pill-shaped button styled to match the FAB's variant.
Placement
The FAB is always fixed to the bottom-right corner of the viewport:
- Mobile:
bottom-4 right-4(16px) - Desktop:
bottom-6 right-6(24px)