Components
The Fab components include the following:
- Fab - Floating action button with speed dial
- FabTrigger - Main trigger button for FAB
- FabClose - Optional close button for FAB
- FabMainAction - Optional main action for FAB
The Fab components include the following:
The Fab component creates a floating action button that stays fixed in the bottom corner of the screen. When clicked or focused, it reveals additional action buttons in a vertical list or quarter-circle arrangement. The component uses CSS-only behavior with :focus-within for opening/closing, requiring no JavaScript.
The FabTrigger component is the main button that opens the FAB speed dial. It automatically handles the Safari focus workaround by rendering as a focusable div with proper ARIA attributes. Apply button classes and styling via attributes.
The FabClose component replaces the main FAB button with a close button when the FAB is open. Cannot be used together with FabMainAction (mutually exclusive).
The FabMainAction component replaces the main FAB button with a different action button when the FAB is open. Cannot be used together with FabClose (mutually exclusive).