Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProThe main-action button in plain, small, large and extended forms; the extended form collapses to its icon on scroll and keeps its name for screen readers.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for the single most common action on a screen: compose, add, create. The extended form is for screens where the icon alone is not clear.
Do not use it for several equal actions (use a Speed Dial or a toolbar) or for destructive actions. One FAB per screen.
import { Fab, useCollapseOnScroll } from "@/components/ui/fab"const collapsed = useCollapseOnScroll(scrollRef)
<Fab icon={<PencilIcon />} label="Compose" extended collapsed={collapsed} position="fixed" />| Part | Prop | Type | Default | Description |
|---|---|---|---|---|
Fab | icon / label | ReactNode / string | required | Icon and the text (the accessible name). |
Fab | extended | boolean | false | Show the label beside the icon. |
Fab | collapsed | boolean | false | Shrink an extended FAB to the icon. |
Fab | size | "sm" | "md" | "lg" | "md" | 40, 56 or 96 px. |
Fab | tone | "primary" | "secondary" | "surface" | "primary" | Colour role. |
Fab | position | "fixed" | "static" | "static" | Pin to the bottom end corner. |
- | useCollapseOnScroll(ref?, threshold?) | boolean | - | True while scrolling down. |
The component ships with a Testing Library test (fab.test.tsx). jsdom has no touch or layout, so the test drives the component through its keyboard and pointer-free paths and checks roles, names and state.