Fab
A floating action button for phone layouts. With actions it opens a speed dial: labelled actions rise above it one after another.
import { Fab } from "pleate/fab";Speed dial
Lisbon
12 to 16 May · 4 nights
Props
- label
Accessible name of the main button (required).
string- icon
Main glyph; the default plus turns into a close mark while open.
ReactNodedefault plus- onClick
Plain button mode, without actions.
() => void- actions
Speed-dial actions, nearest the button first.
{ id, label, icon, onSelect }[]- position
Pinned bottom-end or in flow.
"fixed" | "static"default "fixed"- hideFrom
Hide on wider screens.
"never" | "md" | "lg"default "never"- offset
Extra px above the bottom edge, e.g. to clear a TabBar.
numberdefault 0
Accessibility
- The main button has aria-expanded and aria-controls pointing at the action list.
- Escape closes the dial and returns focus to the button; a press outside closes it.
- Respects the home-indicator safe area.