CommandPalette
⌘K-style global command palette. Mission Control uses one for navigation, dataset jumps, task lookups. Carbon doesn't ship one formally but the pattern is widely copied. We build on cmdk + Dialog so it slots into any consuming app.
Live playground
Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.
Edit JSX — preview updates livereact-live
import { CommandPalette, CommandPaletteGroup, CommandPaletteItem, CommandPaletteSeparator } from "@avala/design"; <CommandPalette> <CommandPaletteGroup /> <CommandPaletteItem /> <CommandPaletteSeparator /> </CommandPalette>
All variants
The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.
patterns-commandpalette--defaultOpen in Storybook →
When to use
- A global ⌘K / Ctrl-K surface for power-users to jump to any page, entity, or action.
- Search-and-action UIs where typing filters across heterogeneous result types (pages, entities, recently-viewed, suggested actions).
When not to use
- A form-field option picker → use `ComboBox` or `Select`.
- A trigger-anchored action menu (e.g. a row's "..." button) → use `OverflowMenu` or `DropdownMenu`.
- Inline search inside a single page section → use `Search`.