Command palette

For designers

A command palette turns every destination and action in an app into one searchable list. Press a shortcut, type two letters, pick a row: that is faster than clicking through three menus for someone who already knows what they want. Linear, Notion, and VS Code all ship one for this reason.

The cost is learning curve. Casual users will never open it unless the shortcut is visible somewhere in the interface, and the list has to stay complete. A palette missing a destination people reach for every day gets ignored after one try. Budget time to keep the index current as the product grows, because a stale palette is worse than no palette at all.

Stripe's dashboard search bar and Gmail's search box sit in the same family: one field, every destination reachable. The difference is scope. A palette lists what your product already defines. Search scans what it has stored.

Variants

Navigation. Go to pages and sections: Invoices, Settings, a specific project. The rows people reach for most often.

Actions. Create invoice, archive project, toggle dark mode. Each row runs something and closes the palette.

With recents. A Recent group above the search results saves the five commands someone used last, so repeat work needs no typing at all.

How to build a command palette

Mark up the overlay as a dialog with a labelled search field and a listbox of options. The WAI-ARIA Authoring Practices describe the combobox-in-dialog pattern that most implementations follow.

<div role="dialog" aria-modal="true" aria-labelledby="cmd-title">
  <h2 id="cmd-title" class="sr-only">Commands</h2>
  <input type="search" role="combobox" aria-controls="cmd-list"
         aria-expanded="true" placeholder="Type a command…">
  <ul id="cmd-list" role="listbox">
    <li role="option">Go to Invoices</li>
    <li role="option">Create invoice</li>
    <li role="option">Open settings</li>
  </ul>
</div>

Trap focus inside the dialog while it is open. Arrow keys move through the list, Enter runs the highlighted row, Escape closes without running anything. Register the keyboard shortcut at the document level and prevent the browser from stealing it. The search field should receive focus on open, not the first result, so someone can start typing immediately. Fuzzy matching helps, but rank exact prefix matches above partial ones so Invoices beats Invoice settings when someone types inv.

Edge cases

Empty search results. Show a clear No results line rather than a blank panel.

Slow commands. If a row kicks off work that takes seconds, close the palette and show progress elsewhere. Leaving the dialog open while something runs behind it feels stuck.

Duplicate shortcuts. Two rows sharing the same shortcut will confuse people. Audit the list before launch and resolve conflicts. If two commands must share a shortcut, pick different contexts rather than duplicating the hint on both rows.