- Get Started
- Product
- Resources
- Tools & SDKs
- Reference
Menu
- Get Started
- Product
- Resources
- Tools & SDKs
- Reference
Command Bar
Display a command bar with a list of commands
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 page 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 page helpful?