Skip to content
BlastCSS v1.0.0
Components

Command palette

Spotlight-style search with global ⌘K shortcut. Native dialog + filterable list.

New Keyboard Screen reader Evergreen
esc

Markup

html 
<dialog class="b-command" data-shortcut>
  <div class="b-command-search">
    <svg>...</svg>
    <input type="search" placeholder="Type a command…">
    <kbd class="b-kbd">esc</kbd>
  </div>
  <ul class="b-command-list">
    <li><div class="b-command-group-label">Navigate</div></li>
    <li><a class="b-command-item" href="/dash"><span>Dashboard</span></a></li>
  </ul>
</dialog>

Behavior

When data-shortcut is present, ⌘K (or Ctrl+K) toggles the palette globally.

  • Type to filter
  • Arrow Up/Down to navigate
  • Enter activates the highlighted item
  • Esc closes

API

| Class | Effect | | --- | --- | | .b-command | Use on <dialog> | | .b-command-search | Search input row | | .b-command-list | Items list | | .b-command-group-label | Group separator | | .b-command-item | Selectable item (anchor or button) | | data-shortcut attribute | Enables ⌘K binding |

Edit this page
esc