Action Bar

Pro

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.

Preview

Installation

npx @lumioui/cli add pro/action-bar

Usage

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

Also exported: ActionBarSummary, ActionBarIconButton, ActionBarCommit.

Examples

Dual CTA

A cabin stay's request step: two equal actions (ask the host, request the dates) with a reassurance note above them and the trip total in the row.

Glass over photo

A night-walk event page that is all photograph: the bar floats as a glass capsule over the sky, and tapping the photo hides the chrome (it recedes, then springs back).

Price in bar

A footwear product page: price with the original struck through on the left, save and a full-width "Add to bag" on the right.

Stepper + add

A noodle bar's dish sheet: quantity stepper on the left, "Add 2 · $31.00" on the right, the price inside the button rolling per digit with every add-on and quantity change.

API reference

ActionBar

Prop Type Default
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 Default
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 Default
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".

 "primaryText"
variant "outline" | "plain"

outline hairline ring (solid bars) or plain (inside glass). Default "outline".

 "outline"
disabled boolean —
className string —

ActionBarCommit

Prop Type Default
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"
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 —