Fab
A page's one main action on a phone, floating at the app pane's bottom right just over the composer: Add service.
Over a page
The black CTA on a squircle, lifted off the page. It stands in the shell's app-page frame, so it stays put as the page scrolls. From 1024px it's gone: the page's own button does the job there — narrow the window under 1024px to see it.
Services
import { Fab } from "@/components/shared/fab";
<Fab icon={Plus} label="Add service" onClick={add} />API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | Icon | — | What it does, drawn: Plus to add. |
| label | string | — | What it does in words, for assistive tech and a long press: “Add service”. |
| onClick | () => void | — | The action. |
| className | string | — | Placement, when bottom right isn't the spot. |
Guidelines
- One per page, for its main action — the same one the page's button carries side by side, which puts itself away on a phone.
- Give the page room at its foot (pb-20 on a phone) so the last row never sits under it.