Command Bar

Display a command bar with a list of commands

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.

PropTypeDefault
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.

PropTypeDefault
action
function
-
label
string
-
shortcut
string
-
Was this helpful?
Ask Anything
FAQ
What is Medusa?
How can I create a module?
How can I create a data model?
How do I create a workflow?
How can I extend a data model in the Product Module?
Recipes
How do I build a marketplace with Medusa?
How do I build digital products with Medusa?
How do I build subscription-based purchases with Medusa?
What other recipes are available in the Medusa documentation?
Chat is cleared on refresh
Line break