# Toolbar

Bottom bar of contextual actions in edge-to-edge, docked-button or floating capsule styles. When the context changes, the old actions fade out and the new ones appear left to right.

> Composed · Free · Navigation — React Native, Expo Go compatible.

## Install

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

## Import

```tsx
import { Toolbar } from "@/components/ui/toolbar/toolbar";
```

## Variants

- `mail` — Mail: `npx @lumioui/cli add toolbar-mail`
- `material` — Bottom app bar: `npx @lumioui/cli add toolbar-material`
- `selection` — Selection mode: `npx @lumioui/cli add toolbar-selection`

## Props

### Toolbar

| Prop | Type | Notes |
| --- | --- | --- |
| `variant?` | `ToolbarVariant | "ios" | "material"` | "edge" edge-to-edge bar · "docked" taller bar with a docked FAB · "floating" capsule. Default "edge". `"ios"` and `"material"` are deprecated aliases — use "edge" and "docked". |
| `material?` | `"solid" | "glass"` | Surface. "solid" (default) or "glass" — glass only when content scrolls under the bar. |
| `labels?` | `boolean` | Show text labels under item glyphs (tablet style). Default false. |
| `safeArea?` | `boolean` | Pad the bottom safe-area inset into the bar. Default false. |
| `hidden?` | `boolean` | Dim and lower the bar off-screen (scroll-to-hide). |
| `contentKey?` | `string | number` | Change this to swap the bar's contents in place — e.g. "browse" → "select". |
| `className?` | `string` | — |
| `children?` | `React.ReactNode` | — |

### ToolbarItem

| Prop | Type | Notes |
| --- | --- | --- |
| `icon` | `IconName | React.ReactElement` | Glyph name, or a custom element. |
| `label` | `string` | Accessibility label, and the visible label when the bar has `labels`. |
| `onPress?` | `() => void` | — |
| `active?` | `boolean` | Toggle state (bookmark, flag). Filled glyph + selected state. |
| `disabled?` | `boolean` | — |
| `badge?` | `number` | Count badge on the glyph. |
| `tone?` | `"default" | "primary" | "destructive"` | "default" ink, "primary" accent tint, "destructive". Default "default". |
| `className?` | `string` | — |

### ToolbarTextButton

| Prop | Type | Notes |
| --- | --- | --- |
| `children` | `string` | Visible label — "Select", "Done", "Edit". |
| `onPress?` | `() => void` | — |
| `emphasized?` | `boolean` | Bold the label (confirm actions like Done). |
| `disabled?` | `boolean` | — |
| `tone?` | `"primary" | "destructive" | "default"` | — |
| `className?` | `string` | — |

### ToolbarStatus

| Prop | Type | Notes |
| --- | --- | --- |
| `title` | `string` | Main line — "Updated just now", "3 Photos Selected". |
| `subtitle?` | `string` | Second line — "12 unread". |
| `trend?` | `"up" | "down"` | Direction of a count in the title. When set, the new line arrives from that side (≤4pt) as it swaps in; omit for a pure in-place swap. |
| `className?` | `string` | — |

### ToolbarFab

| Prop | Type | Notes |
| --- | --- | --- |
| `icon` | `IconName` | — |
| `label` | `string` | Accessibility label. |
| `onPress?` | `() => void` | — |
| `className?` | `string` | — |

## Icons rendered

- `edit` — /icons.html?i=edit
- `send` — /icons.html?i=send
- `plus` — /icons.html?i=plus

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