A floating action button that fans out a staggered speed dial as its plus turns to ×.
Installation
One command copies the source into your app — you own the code and can change anything.
Usage
useKit(). Wrap your app in <KitProvider accent="#6366f1" radius={14}> to re-skin every component at once.Props
| Prop | Type | Default |
|---|---|---|
| actions Speed-dial items, bottom → top (arc: first → last). icon can be a node or ({ color }) => node; with color the icon colour contrasts automatically. Omit for a plain FAB. | { label, icon, onPress?, color? }[] | — |
| onPress Called when there are no actions. | () => void | — |
| icon Main icon (rotates 135° when open). A function is re-coloured as the button turns neutral when open. | ReactNode | ({ color }) => ReactNode | plus |
| label Makes it an extended FAB (icon + label). | string | — |
| extended Set false (e.g. while scrolling) to collapse the label into a circle. | boolean | true |
| open / onOpenChange Controlled speed dial (or use defaultOpen). | boolean | — |
| defaultOpen Speed dial starts open when uncontrolled. | boolean | false |
| layout Labelled column, or mini buttons fanned out on a quarter circle (half circle for bottom-center). Arc hides the chips; labels stay as accessibility labels. | "list" | "arc" | "list" |
| position Corner of the parent it sits in. | "bottom-right" | "bottom-left" | "bottom-center" | "bottom-right" |
| variant accent: solid fill + same-colour glow; gradient: opt-in two-tone; tonal: soft tinted surface; primary / secondary: theme surfaces. | "accent" | "gradient" | "tonal" | "primary" | "secondary" | "accent" |
| size Main button 40, 56 or 64pt (speed-dial buttons 36 / 42 / 46pt). | "sm" | "md" | "lg" | "md" |
| color Tint for accent, gradient and tonal; glow, foreground (and the opt-in gradient stops) are derived from it. | string | theme accent |
| backdrop Dim the parent while open; tap to close. | boolean | true |
| pulse Looping attention ring (skipped with Reduce Motion), e.g. for empty-state calls to action. | boolean | false |
| offset Distance from the parent's edges. | number | 20 |
| rotate Rotate the icon into × when open. | boolean | true |
| haptics Tap on toggle. | boolean | true |
| style Style for the absolutely positioned stack holding the main button and list actions. | StyleProp<ViewStyle> | — |
Behaviour & accessibility
- Touch
- Tapping the button opens the speed dial over an optional dimmed backdrop; tapping the backdrop closes it. Without actions it just calls onPress.
- Motion
- Actions spring out one after another as a labelled list or an arc. An extended FAB springs between a pill and a circle, and pulse loops a ring around it.
- Reduced motion
- The pulse ring stays off when reduce motion is on.
- Haptics
- A light impact when the button opens or closes the dial, or fires onPress.
- Screen readers
- The main button and each action are buttons; the main button reads "Open actions" / "Close actions" with an expanded state when it has a dial.
Source
Did you like the content?