Theme
Command palette
Every command, one search away. The app supplies the commands, in groups, with icons and keywords. Given to an AppShell as its palette, the sidebar's search button opens it.
Examples
Props
CommandPalette
Every command, one search away. Cmd+K or Ctrl+K (or the trigger) opens it; typing filters, arrow keys move, Enter runs, Escape closes and returns focus. In an AppShell's palette slot the sidebar's search button opens it, and it shows no trigger of its own.
| Prop | Type | Default | Description |
|---|---|---|---|
commands | readonly Command[] | — | |
onAction | (id: string) => void | — | Called with the chosen command's id; the palette closes. |
label? | string | "Search commands" | The trigger button's text; the shortcut works without the button being visible. |
Keyboard
| Key | Does |
|---|---|
| ⌘K or Ctrl+K | Opens or closes it |
| Type | Filters the commands by label and keywords |
| ArrowUp or ArrowDown | Move through the results |
| Enter | Runs the focused command and closes it |
| Escape | Closes it and returns focus |
Accessibility
- A modal dialog holding React Aria's Autocomplete: a labelled search field that drives a menu through aria-activedescendant, so focus stays in the field while the arrow keys move through the results.
- The button and the sidebar's search announce the shortcut with aria-keyshortcuts, and show it as ⌘K on Apple devices and Ctrl K elsewhere.
- Only one palette answers the shortcut: the one mounted last, so a page holding two opens one.