Browse Components

Kbd

Readable keyboard shortcuts that adapt to the operating system.

Basic

Mod displays as ⌘ on Apple devices and Ctrl on Windows and Linux.

Open search CtrlK

View Code

<p class="kbd-inline">
  Open search
  <span class="kbd" data-keys="Mod K">
    <kbd>
      Ctrl
    </kbd>
    <kbd>
      K
    </kbd>
  </span>
</p>

Combinations

Display combinations and individual keys. Your application registers the shortcuts.

Command search CtrlShiftP

Confirm Enter

Dismiss Escape

View Code

<div class="stack">
  <p class="kbd-inline">
    Command search
    <span class="kbd" data-keys="Mod Shift P">
      <kbd>
        Ctrl
      </kbd>
      <kbd>
        Shift
      </kbd>
      <kbd>
        P
      </kbd>
    </span>
  </p>
  <p class="kbd-inline">
    Confirm
    <span class="kbd" data-keys="Enter">
      <kbd>
        Enter
      </kbd>
    </span>
  </p>
  <p class="kbd-inline">
    Dismiss
    <span class="kbd" data-keys="Escape">
      <kbd>
        Escape
      </kbd>
    </span>
  </p>
</div>

Platforms

Override platform detection when documenting a specific system.

macOS CtrlK

Windows CtrlK

Linux CtrlK

View Code

<div class="stack">
  <p class="kbd-inline">
    macOS
    <span class="kbd" data-platform="mac" data-keys="Mod K">
      <kbd>
        Ctrl
      </kbd>
      <kbd>
        K
      </kbd>
    </span>
  </p>
  <p class="kbd-inline">
    Windows
    <span class="kbd" data-platform="windows" data-keys="Mod K">
      <kbd>
        Ctrl
      </kbd>
      <kbd>
        K
      </kbd>
    </span>
  </p>
  <p class="kbd-inline">
    Linux
    <span class="kbd" data-platform="linux" data-keys="Mod K">
      <kbd>
        Ctrl
      </kbd>
      <kbd>
        K
      </kbd>
    </span>
  </p>
</div>