Keyboard Combo

Fetch pattern JSON: curl https://webspire.de/patterns/kbd/combo.json

combo.html

<div class="ws-kbd rounded-2xl border border-[var(--ws-color-border)] p-6" style="background-color: var(--ws-color-surface);">
  <p class="mb-4 text-xs font-semibold uppercase tracking-widest" style="color: var(--ws-color-text-muted);">Keyboard shortcuts</p>
  <ul class="space-y-3 text-sm" style="color: var(--ws-color-text-soft);">
    <li class="flex items-center justify-between gap-8">
      <span>Open command palette</span>
      <span class="flex items-center gap-1 shrink-0">
        <kbd class="inline-flex items-center rounded-lg border border-[var(--ws-kbd-border)] bg-[var(--ws-kbd-bg)] px-2 py-0.5 font-mono text-xs font-medium text-[var(--ws-kbd-text)] shadow-[0_2px_0_0] shadow-[var(--ws-kbd-border)]">⌘</kbd>
        <span style="color: var(--ws-kbd-border);">+</span>
        <kbd class="inline-flex items-center rounded-lg border border-[var(--ws-kbd-border)] bg-[var(--ws-kbd-bg)] px-2 py-0.5 font-mono text-xs font-medium text-[var(--ws-kbd-text)] shadow-[0_2px_0_0] shadow-[var(--ws-kbd-border)]">K</kbd>
      </span>
    </li>
    <li class="flex items-center justify-between gap-8">
      <span>Copy selection</span>
      <span class="flex items-center gap-1 shrink-0">
        <kbd class="inline-flex items-center rounded-lg border border-[var(--ws-kbd-border)] bg-[var(--ws-kbd-bg)] px-2 py-0.5 font-mono text-xs font-medium text-[var(--ws-kbd-text)] shadow-[0_2px_0_0] shadow-[var(--ws-kbd-border)]">Ctrl</kbd>
        <span style="color: var(--ws-kbd-border);">+</span>
        <kbd class="inline-flex items-center rounded-lg border border-[var(--ws-kbd-border)] bg-[var(--ws-kbd-bg)] px-2 py-0.5 font-mono text-xs font-medium text-[var(--ws-kbd-text)] shadow-[0_2px_0_0] shadow-[var(--ws-kbd-border)]">C</kbd>
      </span>
    </li>
    <li class="flex items-center justify-between gap-8">
      <span>Save changes</span>
      <span class="flex items-center gap-1 shrink-0">
        <kbd class="inline-flex items-center rounded-lg border border-[var(--ws-kbd-border)] bg-[var(--ws-kbd-bg)] px-2 py-0.5 font-mono text-xs font-medium text-[var(--ws-kbd-text)] shadow-[0_2px_0_0] shadow-[var(--ws-kbd-border)]">Ctrl</kbd>
        <span style="color: var(--ws-kbd-border);">+</span>
        <kbd class="inline-flex items-center rounded-lg border border-[var(--ws-kbd-border)] bg-[var(--ws-kbd-bg)] px-2 py-0.5 font-mono text-xs font-medium text-[var(--ws-kbd-text)] shadow-[0_2px_0_0] shadow-[var(--ws-kbd-border)]">S</kbd>
      </span>
    </li>
    <li class="flex items-center justify-between gap-8">
      <span>Print page</span>
      <span class="flex items-center gap-1 shrink-0">
        <kbd class="inline-flex items-center rounded-lg border border-[var(--ws-kbd-border)] bg-[var(--ws-kbd-bg)] px-2 py-0.5 font-mono text-xs font-medium text-[var(--ws-kbd-text)] shadow-[0_2px_0_0] shadow-[var(--ws-kbd-border)]">Ctrl</kbd>
        <span style="color: var(--ws-kbd-border);">+</span>
        <kbd class="inline-flex items-center rounded-lg border border-[var(--ws-kbd-border)] bg-[var(--ws-kbd-bg)] px-2 py-0.5 font-mono text-xs font-medium text-[var(--ws-kbd-text)] shadow-[0_2px_0_0] shadow-[var(--ws-kbd-border)]">Shift</kbd>
        <span style="color: var(--ws-kbd-border);">+</span>
        <kbd class="inline-flex items-center rounded-lg border border-[var(--ws-kbd-border)] bg-[var(--ws-kbd-bg)] px-2 py-0.5 font-mono text-xs font-medium text-[var(--ws-kbd-text)] shadow-[0_2px_0_0] shadow-[var(--ws-kbd-border)]">P</kbd>
      </span>
    </li>
  </ul>
</div>

Details

Family

kbd

Tier

enhanced

Kind

component

Extends

kbd/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

kbdkeyboardshortcutcombohotkey

Slots

Name	Required	Description
combo	Yes	Key combination with separator and action label.

Keyboard shortcut combinations displaying multiple keys separated by plus signs, each with an action label. Extends the base kbd pattern for multi-key shortcuts like Ctrl+C or Cmd+K.