Command palette
Global ⌘K launcher for navigation and actions. Results are grouped and filter as you type.
Preview
HTML and CSS
The same component as plain HTML with pixels-ui.css, no framework needed.
<button type="button" class="px-btn px-btn--secondary-gray" data-px-open="cmd-1"><svg class="px-icon" aria-hidden="true">…</svg>Search…<kbd class="px-kbd">⌘K</kbd></button>
<dialog class="px-command" id="cmd-1" aria-label="Command palette">
<div class="px-command__search"><svg class="px-icon" aria-hidden="true">…</svg><input placeholder="Type a command or search…" aria-label="Command"></div>
<div class="px-command__list" data-px-command-list>
<div class="px-menu__label">Recent</div>
<button type="button" class="px-menu__item"><svg class="px-icon" aria-hidden="true">…</svg>Website redesign</button>
<button type="button" class="px-menu__item"><svg class="px-icon" aria-hidden="true">…</svg>Brand guidelines.pdf</button>
<div class="px-menu__label">Actions</div>
<button type="button" class="px-menu__item"><svg class="px-icon" aria-hidden="true">…</svg>New project<span class="px-menu__shortcut">⌘N</span></button>
<button type="button" class="px-menu__item"><svg class="px-icon" aria-hidden="true">…</svg>Invite teammate<span class="px-menu__shortcut">⌘I</span></button>
<button type="button" class="px-menu__item"><svg class="px-icon" aria-hidden="true">…</svg>Settings<span class="px-menu__shortcut">⌘,</span></button>
</div>
<div class="px-command__foot"><span><kbd class="px-kbd">↑↓</kbd> move</span><span><kbd class="px-kbd">↵</kbd> open</span><span><kbd class="px-kbd">esc</kbd> close</span></div>
</dialog>Installation
Included in the core files. No extra install.
<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>API reference
| Class / attribute | Type | Description |
|---|---|---|
dialog.px-command | class | Palette. |
data-px-command-list | attribute | Filtering and arrow-key selection. |
Figma properties
Command palette2 variants · page “Overlays”Open
Global ⌘K / Ctrl+K launcher for navigation and actions. Results are grouped (Recent, Actions) and filter as you type; arrow keys move, Enter runs, Escape closes. Uses Menu item rows.
| Property | Type | Values |
|---|---|---|
| Direction | Variant | LTR RTL |
Design tokens
Component tokens from the Figma Component collection. Override them to restyle just this component.
| Token | Alias | Light value |
|---|---|---|
--px-menu-background | color-surface-overlay | #ffffff |
--px-menu-border | color-border-neutral-subtle | #f2f4f7 |
--px-menu-item-background-hover | color-background-neutral-default | #f2f4f7 |
--px-menu-item-background-selected | color-background-brand-subtle | #eff6ff |
--px-menu-item-content-selected | color-content-brand-default | #2563eb |
--px-menu-item-content-destructive | color-content-danger-default | #b42318 |
--px-menu-item-icon | color-content-neutral-secondary | #475467 |
--px-menu-section | color-content-neutral-tertiary | #667085 |
--px-menu-radius | radius-12 | 12px |
--px-menu-item-radius | radius-8 | 8px |
--px-menu-padding | spacing-xs | 4px |
--px-menu-item-padding-x | spacing-12 | 12px |
--px-menu-item-gap | spacing-sm | 8px |
--px-menu-item-height-sm | control-height-sm | 32px |
Show all 18 tokens
| Token | Alias | Light value |
|---|---|---|
--px-menu-item-height-md | control-height-md | 40px |
--px-menu-width | 240px | 240px |
--px-command-width | 640px | 640px |
--px-command-hint | color-content-neutral-tertiary | #667085 |
Accessibility
- Arrow keys move, Enter runs, Escape closes.