Command bars

Usage and anatomy

CommandBar presents contextual bulk actions near the bottom of the viewport. Use <CommandBar.Root /> to control visibility, <CommandBar.Bar /> for the surface, and compose actions with <CommandBar.Item />.

import * as CommandBar from "@acme/ui/command-bar"

<CommandBar.Root open={hasSelection}>
  <CommandBar.Bar>
    <CommandBar.Value>3 selected</CommandBar.Value>
    <CommandBar.Separator />
    <CommandBar.Item onClick={handleArchive}>
      <CommandBar.Item.Label>Archive</CommandBar.Item.Label>
      <CommandBar.Item.Shortcut>A</CommandBar.Item.Shortcut>
    </CommandBar.Item>
  </CommandBar.Bar>
</CommandBar.Root>

• Show the bar only when one or more objects have a relevant contextual action.
• Use CommandBar.Value to summarize the current selection.
• Add shortcuts only when the same keyboard command is implemented in the surrounding application.

API reference

CommandBar.Root

CommandBar.Root also accepts Radix Popover anchor props. CommandBar.Item renders a native button and exposes Item.Label, Item.Icon, and Item.Shortcut composition helpers.