Action Bar

InstallCopy Anchor Link

pnpm exec vegastack-design verify action-bar

pnpm dlx shadcn@4.21.0 add @vegastack/action-bar

UsageCopy Anchor Link

import {
  ActionBar,
  ActionBarButton,
  ActionBarSeparator,
} from "@/components/ui/action-bar";

<ActionBar open={count > 0} status={`${count} selected`}>
  <ActionBarButton onClick={tag}>Tag</ActionBarButton>
  <ActionBarSeparator />
  <ActionBarButton
    render={<Button variant="destructive" size="sm" />}
    onClick={archive}
  >
    Archive
  </ActionBarButton>
</ActionBar>;

Bulk selection is the bar's most common recipe — never its identity. The same object serves an unsaved-changes bar and a batch-progress bar; only the words change.

Compose the actions as ActionBarButton. The bar is a Base UI Toolbar, and a toolbar builds its single tab stop from the items that register with it — a bare <Button> still renders, but keeps its own tab stop and the arrow keys skip it. Pass render when an action needs a different shape (a destructive button, an icon-only Button size="icon-sm", a menu trigger).

On a phone (below 640px) the bar docks full width, 8px in from each edge, above the safe area, and an ActionBarButton whose children are an icon and a text label shows its icon alone — the text stays its accessible name — so the count, the actions, ⋯ and × fit one row.

ScopeCopy Anchor Link

AnatomyCopy Anchor Link

Action Bar is a compound component. Every exported part, with the data-slot it renders (generated from the canonical source):

ExamplesCopy Anchor Link

Unsaved changesCopy Anchor Link

Over a docked playerCopy Anchor Link

The bar sits 16px above the bottom edge plus --dock-inset-bottom. GlobalAudioPlayer sets that on the AppShell root while it is open, so the bar floats 8px above the player instead of covering it; set it yourself for another bottom dock.

Secondary actions on a phoneCopy Anchor Link

Pass the primary actions as children and the rest as secondaryActions. From sm up they are buttons in the bar; on a phone they fold into a ⋯ menu (moreLabel, "More actions"), so the primary actions stay visible and the bar never scrolls sideways.

<ActionBar
  open={count > 0}
  status={`${count} selected`}
  secondaryActions={[
    { label: "Move", onClick: move },
    { label: "Delete", destructive: true, onClick: remove },
  ]}
>
  <ActionBarButton onClick={share}>Share</ActionBarButton>
</ActionBar>

Closing the setCopy Anchor Link

end holds what closes the set — a separator and a Clear button — after secondaryActions, so a Clear never sits between the primary actions and the secondary ones. It stays a button beside the ⋯ menu on a phone. DataList's selection bar puts its Clear here.

<ActionBar
  status={`${count} selected`}
  secondaryActions={[{ label: "Archive", onClick: archive }]}
  end={
    <>
      <ActionBarSeparator />
      <ActionBarButton
        render={<Button variant="ghost" size="icon-sm" />}
        aria-label="Clear selection"
        onClick={clear}
      >
        <X />
      </ActionBarButton>
    </>
  }
>
  <ActionBarButton onClick={move}>Move…</ActionBarButton>
</ActionBar>

Batch progress (pending)Copy Anchor Link

While pending, the actions are inert and dimmed but the status stays readable — a bulk operation in flight should not be re-triggerable.

API ReferenceCopy Anchor Link

ActionBarCopy Anchor Link

ActionBarButtonCopy Anchor Link

One action, registered with the bar's roving focus. Takes every Base UI Toolbar.Button prop; render defaults to a ghost sm Button.

ActionBarSeparatorCopy Anchor Link

The hairline between two clusters of actions. Takes every Base UI Toolbar.Separator prop; the orientation defaults to perpendicular to the bar, so a horizontal bar gets a vertical rule.

AccessibilityCopy Anchor Link

• The bar is a Base UI Toolbar labelled by aria-label — pass a specific one ("Bulk actions", "Import progress") rather than the generic default. The whole bar is one tab stop: the arrow keys move between actions and wrap at the ends, and Shift + Tab leaves in a single press.
• Status changes are announced through a polite live region — a plain-string status announces itself; composite status markup needs an announcement.
• Actions with visible text must not carry aria-label (WCAG 2.5.3) — the visible text is the name.
• The bar sits at z-10, below the z-50 band upstream's overlays use, so a dialog opened from one of its actions correctly covers it. While hidden (and while pending, for the actions) the subtree is inert — nothing invisible or in-flight stays focusable or activatable.

Do / Don'tCopy Anchor Link