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

Sortable data table
Prop	Type	Default	Description
commands	{ label: string; action: () => void; icon?: React.ReactNode; }[]	-	Array of command objects. Each command contains a label, an action callback, and an optional icon.
placeholder	string	"Search..."	Placeholder text for the search input field.
isOpen	boolean	-	Controls whether the command palette is visible.
onClose	() => void	-	Callback triggered when the palette should close.
asyncSearch	(query: string) => Promise<{ label: string; action: () => void; icon?: React.ReactNode; }[]>	-	Optional asynchronous search function for dynamic filtering.
debounceMs	number	300	Debounce delay in milliseconds for async search queries.
theme	"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "clear"	Configured Default	Theme variant for the command palette.
rounding	"none" \| "small" \| "medium" \| "large"	Configured Default"	Rounding style for the command palette container.
shadow	"none" \| "light" \| "medium" \| "strong" \| "intense"	Configured Default	Shadow intensity for the command palette container.
state	"" \| "success" \| "error" \| "warning"	-	Visual state variant, such as error or focus indicators.
data-testid	string	"command-palette"	Test ID for targeting the component in tests.
className	string	-	Additional CSS class names for the palette container.