FAB
Last Updated: September 2026Floating Action Buttons serve as a clear and bold action trigger for the primary action on the page. They are intended to float over or in direct context with the content they create.
Source CodeAnatomy
link- 1Container
- 2Prefix
- 3Label
Variants
linkIcon-only
Compact circular FAB. Requires aria-label.
Extended
Icon plus label for clearer primary actions.
Disabled
Non-interactive FAB while a prerequisite is unmet.
Positioned
Place the FAB in a corner of a relative container or viewport.
Usage Guidelines
linkWhen to use
- •For the single most important create/compose action on a screen.
- •When the action should stay reachable while the user scrolls content.
- •On views where a floating primary action is expected (lists, inboxes).
When not to use
- •When there are multiple primary actions — use Buttons in the page header instead.
- •Inside dense forms or dialogs — use a standard Button.
- •For destructive actions — use a Danger Button with confirmation.
Use one FAB per view for the primary create/compose action.
Don't place multiple FABs on the same screen.
Prefer an extended label when the icon alone is ambiguous.
Don't use an ambiguous icon without a label or clear aria-label.
Behaviors
linkPlacement
- •Position the FAB yourself (absolute/fixed). The component does not pin itself.
- •Keep clear of bottom navigation, toasts, and other floating UI.
Disabled state
- •Set disabled when the action is unavailable.
- •Disabled FABs are not focusable.
Content Guidelines
linkLabels
- •Use a short verb phrase ('Compose', 'New claim').
- •Omit the label only when the icon is universally understood (e.g. add).
Icons
- •Prefer add, edit, or create-style icons for primary compose actions.
- •Keep the same FAB icon/label across related screens for consistency.
Accessibility
linkText & Labels
- •Icon-only FABs require aria-label.
- •Extended FABs use the visible label as the accessible name.
ARIA attributes
- •aria-label on icon-only FABs.
- •disabled removes the control from the tab order.
Keyboard Support
- •Tab → focus.
- •Space / Enter → activate.
WCAG Compliance Standards
FAQs
linkFAB vs primary Button?
Use a FAB when the primary action should float above scrolling content. Use a primary Button in headers, forms, and dialogs.
Can I change the FAB color or size?
FAB ships as a single accent elevated style. For other emphases, use Button or IconButton.
Where should I place it?
Typically bottom-end of the content area, with enough margin from edges and other chrome.