Kbd
Classes Information
| ClassName | Description |
|---|---|
| kbd | Base Class |
| kbd-xs | Extra small size |
| kbd-sm | Small size |
| kbd-md | Medium size |
| kbd-lg | Large size |
| kbd-xl | Extra 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>