# Fab

Floating action button, filled or glass, that can stretch into a labelled pill, show a spinner while work finishes, and mark an active state with a soft inner ring.

> Primitive · Free · Actions — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add fab
```

## Import

```tsx
import { Fab } from "@/components/ui/fab/fab";
```

## Variants

- `extended` — Extended: `npx @lumioui/cli add fab-extended`
- `glass` — Glass disc: `npx @lumioui/cli add fab-glass`
- `quick-actions` — Quick Actions: `npx @lumioui/cli add fab-quick-actions`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `icon` | `React.ReactNode` | Icon rendered inside the button. |
| `extended?` | `boolean` | Extended pill variant: icon + label. |
| `label?` | `string` | Label shown when `extended` is true. |
| `size?` | `"sm" | "md"` | Footprint: "md" (56pt, the default) or "sm" (44pt mini for  dense toolbars / secondary surfaces). |
| `position?` | `"bottom-right" | "bottom-left" | "none"` | Position helper. "bottom-right" (default) applies absolute placement above the home indicator; "none" leaves placement to you. |
| `haptic?` | `"light" | "medium" | "heavy" | false` | Haptic style on press. Default "medium"; false to disable. |
| `loading?` | `boolean` | Crossfade to a spinner and block presses while true. |
| `glass?` | `boolean` | Lumio glass surface — the button floats as a glass disc over  content instead of a filled primary blob. |
| `asyncTracking?` | `boolean` | Auto-track async onPress — when onPress returns a Promise, the button  automatically enters loading state until it resolves. Default true. |
| `onPress?` | `(e: GestureResponderEvent) => void | Promise<unknown>` | Called on press. May return a Promise — tracked by asyncTracking. |
| `lit?` | `boolean` | Held state shown as light: an inner ring brightens once, then holds  lit while true (a paused session, a recording armed). Default false. |
| `className?` | `string` | — |

Source: https://lumioui.com/components/fab