A floating action button; the application owns its action and placement. These classes belong to the opt-in Official preset. Add
@presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight
used alongside these structural shortcuts.
Classes
fab
Example
The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.
<button class="fab" type="button" aria-label="Create item">+</button>Variants and composition
fab is fixed by default. Add a positioning utility when embedding the action inside a local frame; hidden remains the native hidden state.
Behavior and accessibility
The fixed position is a presentation choice. Give the trigger an accessible name, keep action targets reachable, and restore focus when an expanded action set closes.
Reference
See the interactive Storybook specimen. Continue to Field or return to the Official preset overview.