Command Palette

The Command Palette component allows users to quickly find and execute commands via keyboard navigation or search, with optional async search support.

Usage

Default

<CommandPalette 
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  commands={[
    { label: "Open Dashboard", action: () => alert("Dashboard opened") },
    { label: "View Settings", action: () => alert("Settings opened") },
    { label: "Log Out", action: () => alert("Logged out") },
  ]}
/>

Props

Data table
	Type	Description
asyncSearch	((query: string) => Promise<CommandItem[]>)	Callback to handle the search input asynchronously.
className	string	Custom classname for the command palette.
commands	CommandItem[]	Array of available command options.
data-testid	string	Optional test ID for testing frameworks.
debounceMs	number	Optional debounce time (in ms) for the search input.
emptyMessage	string	Message announced when there are no matching commands.
inputAriaDescribedBy	string	Accessible description reference for the search input.
inputAriaLabel	string	Accessible label for the search input.
inputAriaLabelledBy	string	Accessible label reference for the search input.
inputId	string	Optional ID for the input element.
inputLabel	string	Optional visible or screen-reader-only label for the input.
isOpen	boolean	Whether the command palette is currently open.
listAriaLabel	string	Accessible label for the command results list.
listboxId	string	Optional ID for the listbox element.
modal	boolean	Whether the palette should behave like a modal dialog for assistive tech.
onClose	() => void	Callback to close the command palette.
paletteId	string	Optional ID for the palette container/dialog.
placeholder	string	Optional placeholder for the input field.
restoreFocusOnClose	boolean	Whether focus should return to the trigger element on close.
resultsAnnouncement	string	Accessible live region message prefix for result count updates.
rounding	RoundingType	Rounding style for the palette ('none' \| 'small' \| 'medium' \| 'large' \| 'full').
shadow	ShadowType	Shadow style for the palette ('none' \| 'light' \| 'medium' \| 'strong' \| 'intense').
state	StateType	The state of the command palette ('success' \| 'error' \| 'warning' \| 'disabled' \| '').
theme	ThemeType	Theme style for the palette ('primary' \| 'secondary' \| 'tertiary' \| 'quaternary' \| 'clear').
trapFocus	boolean	Whether focus should be trapped while the palette is open.