Help

Command Bar

A component that displays a command bar with a list of commands to perform on a bulk selection of items.

In this guide, you'll learn how to use the Command Bar component.

Item One

Check the box to view the command bar

Was this example helpful?

Usage#

Code
import { CommandBar } from "@medusajs/ui"

Code
1<CommandBar open={open}>2  <CommandBar.Bar>3    <CommandBar.Value>{count} selected</CommandBar.Value>4    <CommandBar.Seperator />5    <CommandBar.Command6      action={onDelete}7      label="Delete"8      shortcut="d"9    />10    <CommandBar.Seperator />11    <CommandBar.Command12      action={onEdit}13      label="Edit"14      shortcut="e"15    />16  </CommandBar.Bar>17</CommandBar>

API Reference#

CommandBar#

The root component of the command bar. This component manages the state of the command bar.

Prop	Type	Default
`open`	`boolean`	`false`
`onOpenChange`	`function`	-
`defaultOpen`	`boolean`	`false`
`disableAutoFocus`	`boolean`	`true`

CommandBar.Bar#

The bar component of the command bar. This component is used to display the commands.

CommandBar.Value#

The value component of the command bar. This component is used to display a value, such as the number of selected items which the commands will act on.

CommandBar.Seperator#

The seperator component of the command bar. This component is used to display a seperator between commands.

CommandBar.Command#

The command component of the command bar. This component is used to display a command, as well as registering the keyboad shortcut.

Prop	Type	Default
`action`	`function`	-
`label`	`string`	-
`shortcut`	`string`	-

Was this guide helpful?