Components
FAB
Floating action button with elevation, plus an optional speed-dial FabMenu for multiple labeled actions.
Tap to show a QR code for the Expo showcase deep link. The web preview below runs in the browser.
Installation
Install the registry item directly, then add any package dependencies if you are setting the component up manually.
Install the component
Run the registry command below to add fab to your project.
watermelon add fabImport the component
Import FAB from your local UI registry output.
Import
import { FAB } from "@/components/ui/fab";Import
Import
import { Fab, FabMenu, type FabMenuAction } from "@/components/ui/fab";Usage
Provide an icon (or glyph) as children and set accessibilityLabel. Sizes include sm, default, and lg. Use variant="secondary" for a softer surface.
| prop | type | default | description |
|---|---|---|---|
| size | "sm" | "default" | "lg" | "default" | Diameter of the FAB. |
| variant | "default" | "secondary" | "default" | Primary vs secondary fill. |
For a speed dial, use FabMenu: pass actions (id, label, optional onPress and icon) and optionally renderMain so the main button switches between open and closed icons. The menu uses an in-area dimmed backdrop; give the preview container enough height (about 220px) so actions stack above the main FAB.
| prop | type | default | description |
|---|---|---|---|
| actions | FabMenuAction[] | — | Stacked secondary actions with labels. |
| renderMain | (open: boolean) => ReactNode | + / × | Main FAB content for open vs closed. |
| accessibilityLabel | string | "Open actions menu" | Main FAB when closed. |