Command Bar

Display a command bar with a list of commands

Was this example helpful?

Usage


import { CommandBar } from "@medusajs/ui"
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.

PropTypeDefault
openbooleanfalse
Was this section 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.

PropTypeDefault
actionfunction-
labelstring-
shortcutstring-
Was this section helpful?