# Action Bar

Docked bottom bar for detail screens with a price or summary and one main action. Its optional confirm button turns into a check that shows the result in place. Solid or glass styles.

> Composed · Pro · Layout — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/action-bar
```

## Import

```tsx
import { ActionBarSummary, ActionBarIconButton, ActionBarCommit, ActionBar } from "@/components/ui/action-bar/action-bar";
```

## Variants

- `booking` — Dual CTA: `npx @lumioui/cli add pro/action-bar-booking`
- `glass` — Glass over photo: `npx @lumioui/cli add pro/action-bar-glass`
- `price` — Price in bar: `npx @lumioui/cli add pro/action-bar-price`
- `stepper` — Stepper + add: `npx @lumioui/cli add pro/action-bar-stepper`

## Props

### ActionBar

| Prop | Type | Notes |
| --- | --- | --- |
| `surface?` | `"solid" | "glass"` | `solid` docked bar or `glass` floating capsule. Default "solid". |
| `floating?` | `boolean` | Pin to the bottom of the nearest positioned parent. Default true. |
| `safeArea?` | `boolean` | Pad for the home indicator. Default true; false inside bounded previews. |
| `visible?` | `boolean` | Show or hide the bar — it slides in on `spring.panel` and recedes  faster on the way out. Default true. |
| `note?` | `string` | Optional line above the row (a reassurance or legal note). |
| `onHeightChange?` | `(height: number) => void` | Reports the bar's rendered height so content can pad beneath it. |
| `className?` | `string` | — |
| `contentClassName?` | `string` | Classes for the inner row. |
| `children?` | `React.ReactNode` | — |

### ActionBarSummary

| Prop | Type | Notes |
| --- | --- | --- |
| `value` | `string` | The figure — price, total, nightly rate. |
| `unit?` | `string` | Unit after the figure ("night", "person"). |
| `label?` | `string` | Small muted line above the figure ("Total", "From"). |
| `strike?` | `string` | Original price, struck through after the figure. |
| `caption?` | `string` | Line under the figure — dates, delivery promise. |
| `onCaptionPress?` | `() => void` | Makes the caption a link (underlined), e.g. to change dates. |
| `className?` | `string` | — |

### ActionBarIconButton

| Prop | Type | Notes |
| --- | --- | --- |
| `icon` | `IconName` | — |
| `accessibilityLabel` | `string` | Required — icon-only control. |
| `onPress?` | `() => void` | — |
| `active?` | `boolean` | Toggle state (save, like). Fills the icon and pops it. |
| `activeColor?` | `keyof ColorTokens` | Icon colour token while active. Default "primaryText". |
| `variant?` | `"outline" | "plain"` | `outline` hairline ring (solid bars) or `plain` (inside glass). Default "outline". |
| `disabled?` | `boolean` | — |
| `className?` | `string` | — |

### ActionBarCommit

| Prop | Type | Notes |
| --- | --- | --- |
| `children` | `React.ReactNode` | Label — a string, or a node (e.g. a rolling price). |
| `onPress?` | `() => void | Promise<unknown>` | The commit. Return a promise to hold the label dim until it settles;  a rejection flickers the pill back to idle. |
| `doneLabel?` | `string` | Label the pill keeps beside its check once committed. Default "Done". |
| `done?` | `boolean` | Committed state from outside. Flip it back to false to re-arm the pill  (e.g. the order changed); omit to let the pill own it. |
| `onResolved?` | `() => void` | Fires after the result has held — resolve the summary / note here. |
| `disabled?` | `boolean` | — |
| `accessibilityLabel?` | `string` | Accessible name when `children` is not a string. |
| `className?` | `string` | — |

Source: https://lumioui.com/components/action-bar