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
<CommandBar open={open}>
  <CommandBar.Bar>
    <CommandBar.Value>{count} selected</CommandBar.Value>
    <CommandBar.Seperator />
    <CommandBar.Command
      action={onDelete}
      label="Delete"
      shortcut="d"
    />
    <CommandBar.Seperator />
    <CommandBar.Command
      action={onEdit}
      label="Edit"
      shortcut="e"
    />
  </CommandBar.Bar>
</CommandBar>

API Reference#

CommandBar#

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

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 separator component of the command bar. This component is used to display a separator 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?

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

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