Command Bar

Display a command bar with a list of commands

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`

Was this helpful?

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 helpful?