Kbd

Show keyboard shortcuts as readable command keys in concise operator and editor workflows.

Press ⌘ K to open search.

Usage

Use <kbd> to show the exact physical keys a user should press. Wrap each key in its own element and keep the visible sentence around it, so the shortcut stays understandable when copied, translated, or read aloud.

Place keys in the order they are pressed. Use punctuation such as plus signs or commas outside the key elements unless that character is itself a real key, and keep platform-specific variants such as ⌘, Ctrl, Alt, and Esc consistent within the same page.

Do not use Kbd as the only instruction for required work. Pair the shortcut with the visible action name, keep alternate pointer or menu paths available, and reserve shortcut-heavy copy for workflows where keyboard operation is expected.

Kbd

Dismiss the panel with Esc

1
2
3
4<div class="d-inline-flex align-items-center gap-2">
  <span>Dismiss the panel with</span>
  <kbd>Esc</kbd>
</div>

Kbd

{"title": "Moo UI Kbd - Key combination", "description": "Render each key segment separately so combinations remain scannable.", "html": "<div class=\"moo-ui\" data-bs-theme=\"light\">\n<div class=\"d-inline-flex align-items-center gap-2\">\n  <span>Open the command palette with</span>\n  <span class=\"d-inline-flex align-items-center gap-1\">\n    <kbd>Ctrl</kbd>\n    <span class=\"text-body-secondary\">+</span>\n    <kbd>Shift</kbd>\n    <span class=\"text-body-secondary\">+</span>\n    <kbd>K</kbd>\n  </span>\n</div>\n</div>", "html_pre_processor": "none", "css": "", "css_pre_processor": "none", "css_starter": "neither", "css_external": "https://unpkg.com/@wpmoo/ui@1.3.0/dist/assets/css/moo-ui.css;https://ui.wpmoo.org/assets/css/codepen-demo.css", "js": "", "js_pre_processor": "none", "js_external": "https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js;https://ui.wpmoo.org/assets/js/codepen-demo.js", "tags": ["moo-ui", "kbd", "components"], "editors": "110", "js_module": false}

Open the command palette with Ctrl + Shift + K

1
2
3
4
5
6
7
8
9
10<div class="d-inline-flex align-items-center gap-2">
  <span>Open the command palette with</span>
  <span class="d-inline-flex align-items-center gap-1">
    <kbd>Ctrl</kbd>
    <span class="text-body-secondary">+</span>
    <kbd>Shift</kbd>
    <span class="text-body-secondary">+</span>
    <kbd>K</kbd>
  </span>
</div>

Kbd

{"title": "Moo UI Kbd - Shortcut sets", "description": "Offer alternate combos for one task so the same workflow remains discoverable.", "html": "<div class=\"moo-ui\" data-bs-theme=\"light\">\n<div class=\"d-inline-flex align-items-center flex-wrap gap-2\">\n  <span>Use</span>\n  <span class=\"d-inline-flex align-items-center gap-1\">\n    <kbd>Ctrl</kbd>\n    <span class=\"text-body-secondary\">+</span>\n    <kbd>K</kbd>\n  </span>\n  <span>for quick actions, or</span>\n  <span class=\"d-inline-flex align-items-center gap-1\">\n    <kbd>Ctrl</kbd>\n    <span class=\"text-body-secondary\">+</span>\n    <kbd>Shift</kbd>\n    <span class=\"text-body-secondary\">+</span>\n    <kbd>P</kbd>\n  </span>\n  <span>to switch to power mode.</span>\n</div>\n</div>", "html_pre_processor": "none", "css": "", "css_pre_processor": "none", "css_starter": "neither", "css_external": "https://unpkg.com/@wpmoo/ui@1.3.0/dist/assets/css/moo-ui.css;https://ui.wpmoo.org/assets/css/codepen-demo.css", "js": "", "js_pre_processor": "none", "js_external": "https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js;https://ui.wpmoo.org/assets/js/codepen-demo.js", "tags": ["moo-ui", "kbd", "components"], "editors": "110", "js_module": false}

Use Ctrl + K for quick actions, or Ctrl + Shift + P to switch to power mode.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<div class="d-inline-flex align-items-center flex-wrap gap-2">
  <span>Use</span>
  <span class="d-inline-flex align-items-center gap-1">
    <kbd>Ctrl</kbd>
    <span class="text-body-secondary">+</span>
    <kbd>K</kbd>
  </span>
  <span>for quick actions, or</span>
  <span class="d-inline-flex align-items-center gap-1">
    <kbd>Ctrl</kbd>
    <span class="text-body-secondary">+</span>
    <kbd>Shift</kbd>
    <span class="text-body-secondary">+</span>
    <kbd>P</kbd>
  </span>
  <span>to switch to power mode.</span>
</div>

استخدم Ctrl + Shift + K لفتح لوحة الأوامر.

1
2
3
4
5
6
7
8
9
10
11
12
13<div dir="rtl">
  <div class="d-inline-flex align-items-center gap-2">
    <span>استخدم</span>
    <span class="d-inline-flex align-items-center gap-1">
      <kbd>Ctrl</kbd>
      <span class="text-body-secondary">+</span>
      <kbd>Shift</kbd>
      <span class="text-body-secondary">+</span>
      <kbd>K</kbd>
    </span>
    <span>لفتح لوحة الأوامر.</span>
  </div>
</div>

השתמש ב־ Ctrl + Shift + K כדי לפתוח את חלון הפקודות.

1
2
3
4
5
6
7
8
9
10
11
12
13<div dir="rtl">
  <div class="d-inline-flex align-items-center gap-2">
    <span>השתמש ב־</span>
    <span class="d-inline-flex align-items-center gap-1">
      <kbd>Ctrl</kbd>
      <span class="text-body-secondary">+</span>
      <kbd>Shift</kbd>
      <span class="text-body-secondary">+</span>
      <kbd>K</kbd>
    </span>
    <span>כדי לפתוח את חלון הפקודות.</span>
  </div>
</div>

Use Ctrl + Shift + K to open the command palette.

1
2
3
4
5
6
7
8
9
10
11
12
13<div dir="ltr">
  <div class="d-inline-flex align-items-center gap-2">
    <span>Use</span>
    <span class="d-inline-flex align-items-center gap-1">
      <kbd>Ctrl</kbd>
      <span class="text-body-secondary">+</span>
      <kbd>Shift</kbd>
      <span class="text-body-secondary">+</span>
      <kbd>K</kbd>
    </span>
    <span>to open the command palette.</span>
  </div>
</div>

Component reference

Status: Accepted
Runtime: native HTML/CSS
Markup: Bootstrap/native HTML
Reference: For keyboard input guidance, see the Bootstrap Reboot documentation.

Kbd

Usage

Single key

Key combination

Shortcut sets

RTL

Component reference

Settings

Usage

Single key

Key combination

Shortcut sets

RTL

Component reference

Search documentation

Settings