DocsElements

Kbd

Classes Information

ClassNameDescription
kbdBase Class
kbd-xsExtra small size
kbd-smSmall size
kbd-mdMedium size
kbd-lgLarge size
kbd-xlExtra large size

Basic Usage

R

Example Code

html
<kbd class="kbd">R</kbd>

Sizes

ShiftShiftShiftShiftShift

Example Code

html
<kbd class="kbd kbd-xl">Shift</kbd>
<kbd class="kbd kbd-lg">Shift</kbd>
<kbd class="kbd kbd-md">Shift</kbd>
<kbd class="kbd kbd-sm">Shift</kbd>
<kbd class="kbd kbd-xs">Shift</kbd>

In Text

Press Space + Shift + Alt + A to open the application.

Example Code

html
Press
<kbd class="kbd">Space</kbd>
+
<kbd class="kbd">Shift</kbd>
+
<kbd class="kbd">Alt</kbd>
+
<kbd class="kbd">A</kbd>
to open the application.

Function Keys

⌘⌥⇧⌃

Example Code

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

Arrow Keys

▲
◀︎▶︎
▼

Example Code

html
<div class="flex justify-center w-full">
  <kbd class="kbd">▲</kbd>
</div>

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

<div class="flex justify-center w-full">
  <kbd class="kbd">▼</kbd>
</div>

Full Keyboard

qwertyuiop
asdfghjkl
zxcvbnm/

Example Code

html
<div class="flex justify-center gap-1 my-1 w-full">
  <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="flex justify-center gap-1 my-1 w-full">
  <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="flex justify-center gap-1 my-1 w-full">
  <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>

Previous

Tabs