Command | Glaze design system

Placement

When to use it

Use: A ⌘K palette across the product: run an eval, open an agent, change a setting.
Use: Picking one of many named things where typing beats scrolling: an agent, a model, a workspace.
Not for: Three to twelve actions on one item. Use Dropdown menu.
Not for: Choosing a value for a form field. Use a combobox.

8 rules

Must: Set shouldFilter={false} and mount CommandLoading while a server request runs. Because the client filter hides server results whose text lacks the query, and without CommandLoading the list says No results while the request runs.
Must: Wrap item text in CommandLabel and pass value when the item holds an icon or a shortcut. Because only a string child gets its matched letters drawn, so a mixed item shows no reason it matched.
Must: Give CommandDialog a title that says what it searches. Because the hidden title names the dialog, and the default "Command palette" does not say what it finds.
Never: Swap in a loose fuzzy matcher for filter. Because scattered-letter matches rank unrelated items first, and Enter runs the first item.
Should: Put CommandFooter with its CommandHint keys in a CommandDialog, after the Command, where it is the card's footer row.
Should: Pass keywords with the other words people use, such as ['ship', 'release'] for Publish prompt.
Should: Start an action with its verb and name things by their own name; ranking favours the first word.
Should: Say what can be found in the placeholder, such as "Search commands and agents".

4 states, highest first

5 checks

: The input is a combobox pointing at the active option with aria-activedescendant; focus never leaves it.
: The list is a listbox of groups and options, with aria-posinset and aria-setsize in screen order.
: A polite status outside the list says how many results, counting the unavailable ones.
: The active row's wash is the indicator, as in the menu. The search is the header row and keeps the cursor for the palette's whole life, so it draws no ring; the caret shows it.
: CommandDialog makes the page inert and closes with Escape back to the opener.

4 keys

6 edge cases

A 90-character label: Truncates on one line; the shortcut keeps its place.
One-letter search: Names starting with it rank first across groups, then word starts, then the rest.
Nothing matches: No results, then the query that found nothing.
Request never returns: The search glyph turns; Empty never shows; typing goes on.
Touch: The key hints hide; the input is 16px so a phone browser does not zoom.
Reduced motion: The loading arc stays drawn and still.

7 props

Command label: string default 'Commands'
Command shouldFilter, filter: boolean, (value, search, keywords) => number default true, ranked words
Command loop: boolean default false
CommandInput value, onValueChange: string
CommandItem value, keywords, onSelect: string, string[], (value) => void default text content
CommandItem disabled, forceMount: boolean default false
CommandDialog title, description: ReactNode | null default 'Command palette'

20 tokens