Command Bar
Display a command bar with a list of commands
Check the box to view the command bar
Was this example helpful?
Usage#
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?