When to Use
Example: community home feed + compose FAB
- 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
Usage Guidelines
DO
Use FAB for the single most important action on the page. Place at the bottom-right corner of the viewport
Don’t
Don't use FAB when the action isn't the most important on the page — use a regular Button instead
DO
Use options for speed dial when multiple related actions share the same trigger
Don’t
Don't use FAB for destructive actions (delete / clear). Don't use multiple FABs on the same page
DO
When options are provided, the FAB becomes a speed dial — clicking it toggles an action list above the button
Don’t
Don't use multiple FABs on the same page
Accessibility
- Always provide
aria-label— the FAB contains no visible text - When
optionsare provided, the button getsaria-expandedandaria-haspopup="menu"automatically - Option buttons include
rolegroup semantics via their container - All interactive states are keyboard-navigable with
focus-visiblerings