Kbd <kbd>

Kbd elements are used to display keyboard keys or shortcuts inline with text. Commonly used in documentation, tooltips, and help panels to indicate key bindings.

HTML tag<kbd>

⏣Native HTML

⬡Progressive

◇Custom

⬢Shadow DOM

Native HTML Element

Options

Single keys

Add .l-kbd to a native <kbd> element.

Ctrl Shift Enter Esc Tab

Code

HTML

<div class="flex gap-2 flex-wrap items-center">
  <kbd class="l-kbd">Ctrl</kbd>
  <kbd class="l-kbd">Shift</kbd>
  <kbd class="l-kbd">Enter</kbd>
  <kbd class="l-kbd">Esc</kbd>
  <kbd class="l-kbd">Tab</kbd>
</div>

Key combinations

Wrap individual <kbd> elements in an outer <kbd> with + separators.

Ctrl+C Ctrl+V Ctrl+Shift+P

Code

HTML

<div class="flex gap-4 flex-wrap items-center">
  <kbd class="flex gap-1 items-center"
    ><kbd class="l-kbd">Ctrl</kbd>+<kbd class="l-kbd">C</kbd></kbd
  >
  <kbd class="flex gap-1 items-center"
    ><kbd class="l-kbd">Ctrl</kbd>+<kbd class="l-kbd">V</kbd></kbd
  >
  <kbd class="flex gap-1 items-center"
    ><kbd class="l-kbd">Ctrl</kbd>+<kbd class="l-kbd">Shift</kbd>+<kbd class="l-kbd">P</kbd></kbd
  >
</div>

API reference

Importing

CSS

@import 'luxen-ui/css/kbd';

CSS classes

.l-kbdClass

Base class for keyboard key styling on <kbd> elements