Kbd

Kbd is used to display keyboard shortcuts.

Class name	Type
kbd	Component	Do show a keyboard key or a shortcut key
kbd-xs	Size	Extra small size
kbd-sm	Size	Small size
kbd-md	Size	Medium size [Default]
kbd-lg	Size	Large size
kbd-xl	Size	Extra large size

Kbd

K

<kbd class="$$kbd">K</kbd>

<kbd class="$$kbd">K</kbd>

Kbd sizes

Xsmall Small Medium Large Xlarge

<kbd class="$$kbd $$kbd-xs">Xsmall</kbd>
<kbd class="$$kbd $$kbd-sm">Small</kbd>
<kbd class="$$kbd $$kbd-md">Medium</kbd>
<kbd class="$$kbd $$kbd-lg">Large</kbd>
<kbd class="$$kbd $$kbd-xl">Xlarge</kbd>

<kbd class="$$kbd $$kbd-xs">Xsmall</kbd>
<kbd class="$$kbd $$kbd-sm">Small</kbd>
<kbd class="$$kbd $$kbd-md">Medium</kbd>
<kbd class="$$kbd $$kbd-lg">Large</kbd>
<kbd class="$$kbd $$kbd-xl">Xlarge</kbd>

In text

Press F to pay respects.

Press
<kbd class="$$kbd $$kbd-sm">F</kbd>
to pay respects.

Press
<kbd class="$$kbd $$kbd-sm">F</kbd>
to pay respects.

Key combination

ctrl + shift + del

<kbd class="$$kbd">ctrl</kbd>
+
<kbd class="$$kbd">shift</kbd>
+
<kbd class="$$kbd">del</kbd>

<kbd class="$$kbd">ctrl</kbd>
+
<kbd class="$$kbd">shift</kbd>
+
<kbd class="$$kbd">del</kbd>

Function Keys

⌘ ⌥ ⇧ ⌃

<kbd class="$$kbd">⌘</kbd>
<kbd class="$$kbd">⌥</kbd>
<kbd class="$$kbd">⇧</kbd>
<kbd class="$$kbd">⌃</kbd>

<kbd class="$$kbd">⌘</kbd>
<kbd class="$$kbd">⌥</kbd>
<kbd class="$$kbd">⇧</kbd>
<kbd class="$$kbd">⌃</kbd>

A full keyboard

q w e r t y u i o p

a s d f g h j k l

z x c v b n m /

<div class="my-1 flex w-full justify-center gap-1">
  <kbd class="$$kbd">q</kbd>
  <kbd class="$$kbd">w</kbd>
  <kbd class="$$kbd">e</kbd>
  <kbd class="$$kbd">r</kbd>
  <kbd class="$$kbd">t</kbd>
  <kbd class="$$kbd">y</kbd>
  <kbd class="$$kbd">u</kbd>
  <kbd class="$$kbd">i</kbd>
  <kbd class="$$kbd">o</kbd>
  <kbd class="$$kbd">p</kbd>
</div>
<div class="my-1 flex w-full justify-center gap-1">
  <kbd class="$$kbd">a</kbd>
  <kbd class="$$kbd">s</kbd>
  <kbd class="$$kbd">d</kbd>
  <kbd class="$$kbd">f</kbd>
  <kbd class="$$kbd">g</kbd>
  <kbd class="$$kbd">h</kbd>
  <kbd class="$$kbd">j</kbd>
  <kbd class="$$kbd">k</kbd>
  <kbd class="$$kbd">l</kbd>
</div>
<div class="my-1 flex w-full justify-center gap-1">
  <kbd class="$$kbd">z</kbd>
  <kbd class="$$kbd">x</kbd>
  <kbd class="$$kbd">c</kbd>
  <kbd class="$$kbd">v</kbd>
  <kbd class="$$kbd">b</kbd>
  <kbd class="$$kbd">n</kbd>
  <kbd class="$$kbd">m</kbd>
  <kbd class="$$kbd">/</kbd>
</div>

<div class="my-1 flex w-full justify-center gap-1">
  <kbd class="$$kbd">q</kbd>
  <kbd class="$$kbd">w</kbd>
  <kbd class="$$kbd">e</kbd>
  <kbd class="$$kbd">r</kbd>
  <kbd class="$$kbd">t</kbd>
  <kbd class="$$kbd">y</kbd>
  <kbd class="$$kbd">u</kbd>
  <kbd class="$$kbd">i</kbd>
  <kbd class="$$kbd">o</kbd>
  <kbd class="$$kbd">p</kbd>
</div>
<div class="my-1 flex w-full justify-center gap-1">
  <kbd class="$$kbd">a</kbd>
  <kbd class="$$kbd">s</kbd>
  <kbd class="$$kbd">d</kbd>
  <kbd class="$$kbd">f</kbd>
  <kbd class="$$kbd">g</kbd>
  <kbd class="$$kbd">h</kbd>
  <kbd class="$$kbd">j</kbd>
  <kbd class="$$kbd">k</kbd>
  <kbd class="$$kbd">l</kbd>
</div>
<div class="my-1 flex w-full justify-center gap-1">
  <kbd class="$$kbd">z</kbd>
  <kbd class="$$kbd">x</kbd>
  <kbd class="$$kbd">c</kbd>
  <kbd class="$$kbd">v</kbd>
  <kbd class="$$kbd">b</kbd>
  <kbd class="$$kbd">n</kbd>
  <kbd class="$$kbd">m</kbd>
  <kbd class="$$kbd">/</kbd>
</div>

Arrow Keys

▲

◀︎ ▶︎

▼

<div class="flex w-full justify-center">
  <kbd class="$$kbd">▲</kbd>
</div>
<div class="flex w-full justify-center gap-12">
  <kbd class="$$kbd">◀︎</kbd>
  <kbd class="$$kbd">▶︎</kbd>
</div>
<div class="flex w-full justify-center">
  <kbd class="$$kbd">▼</kbd>
</div>

<div class="flex w-full justify-center">
  <kbd class="$$kbd">▲</kbd>
</div>
<div class="flex w-full justify-center gap-12">
  <kbd class="$$kbd">◀︎</kbd>
  <kbd class="$$kbd">▶︎</kbd>
</div>
<div class="flex w-full justify-center">
  <kbd class="$$kbd">▼</kbd>
</div>