pleate.ui
Overlay

Action Bar

A contextual bar for a selection. It slides up from the bottom with a rolling count and the actions that apply; edge to edge on phones, centered on wider screens.
import { ActionBar } from "pleate/action-bar";

Selecting bookings

Props

open

Shows the bar.

boolean

count

Selected items; the number rolls when it changes.

number

countLabel

Text after the count.

stringdefault "selected"

actions

Usually a few small Buttons.

ReactNode

onClear

Adds a clear button that ends the selection.

() => void

label

Accessible name of the toolbar.

stringdefault "Selection"

offset

Extra px above the bottom edge, e.g. to clear a TabBar.

numberdefault 0

position

Pinned to the viewport bottom or in flow.

"fixed" | "static"default "fixed"

Accessibility

  • role="toolbar" with an aria-label.
  • The count is a polite live region, so changes are announced.
  • The clear button has an accessible name (clearLabel).
  • Respects the home-indicator safe area.