KBD
Tailwind CSS and Alpine JS KBD
The KBD component is used to display user input, such as keyboard shortcuts, in a visually appealing format.
Frequently used keys
A KBD component with frequently used keys.
Tab
Shift
Space
Ctrl
Command
Alt
Option
Enter
Backspace
Esc
Delete
Up
Down
Left
Right
Caps Lock
HTML
<!-- Tab -->
<kbd class="">Tab</kbd>
<!-- Shift -->
<kbd class="">Shift</kbd>
<!-- space -->
<kbd class="">space</kbd>
<!-- Ctrl -->
<kbd class="">Ctrl</kbd>
<!-- command -->
<kbd class="">command</kbd>
<!-- alt -->
<kbd class="">alt</kbd>
<!-- option -->
<kbd class="">option</kbd>
<!-- Enter -->
<kbd class="">Enter</kbd>
<!-- Backspace -->
<kbd class="">Backspace</kbd>
<!-- Esc -->
<kbd class="">Esc</kbd>
<!-- Delete -->
<kbd class="">Delete</kbd>
<!-- Up -->
<kbd class="">Up</kbd>
<!-- Down -->
<kbd class="">Down</kbd>
<!-- Left -->
<kbd class="">Left</kbd>
<!-- Right -->
<kbd class="">Right</kbd>
<!-- Caps Lock -->
<kbd class="">Caps Lock</kbd>
Keys with icon
A KBD component with icons. This component incorporates icons sourced from Bootstrap Icons.
HTML
<!-- command -->
<kbd class="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="">
<path d="M3.5 2A1.5 1.5 0 0 1 5 3.5V5H3.5a1.5 1.5 0 1 1 0-3M6 5V3.5A2.5 2.5 0 1 0 3.5 6H5v4H3.5A2.5 2.5 0 1 0 6 12.5V11h4v1.5a2.5 2.5 0 1 0 2.5-2.5H11V6h1.5A2.5 2.5 0 1 0 10 3.5V5zm4 1v4H6V6zm1-1V3.5A1.5 1.5 0 1 1 12.5 5zm0 6h1.5a1.5 1.5 0 1 1-1.5 1.5zm-6 0v1.5A1.5 1.5 0 1 1 3.5 11z"/>
</svg>
</kbd>
<!-- shift -->
<kbd class="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="">
<path d="M7.27 2.047a1 1 0 0 1 1.46 0l6.345 6.77c.6.638.146 1.683-.73 1.683H11.5v3a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1v-3H1.654C.78 10.5.326 9.455.924 8.816L7.27 2.047zM14.346 9.5 8 2.731 1.654 9.5H4.5a1 1 0 0 1 1 1v3h5v-3a1 1 0 0 1 1-1z"/>
</svg>
</kbd>
<!-- option -->
<kbd class="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="">
<path d="M1 2.5a.5.5 0 0 1 .5-.5h3.797a.5.5 0 0 1 .439.26L11 13h3.5a.5.5 0 0 1 0 1h-3.797a.5.5 0 0 1-.439-.26L5 3H1.5a.5.5 0 0 1-.5-.5m10 0a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5"/>
</svg>
</kbd>
<!-- control -->
<kbd class="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="">
<path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/>
</svg>
</kbd>
<!-- tab -->
<kbd class="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="">
<path fill-rule="evenodd" d="M3 8a.5.5 0 0 1 .5-.5h6.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H3.5A.5.5 0 0 1 3 8"/>
<path fill-rule="evenodd" d="M12.5 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5"/>
</svg>
</kbd>
<!-- up -->
<kbd class="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="">
<path d="m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"/>
</svg>
</kbd>
<!-- down -->
<kbd class="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="">
<path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
</svg>
</kbd>
<!-- left -->
<kbd class="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="">
<path d="m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z"/>
</svg>
</kbd>
<!-- right -->
<kbd class="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="">
<path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/>
</svg>
</kbd>
KBD within text
Using the KBD component within a text.
To Tab or to Space , that's the question!
HTML
<p class="">To <kbd class="">Tab</kbd> or to <kbd class="">Space</kbd> that's the question! </p>
Alphabet keys
A KBD component with alphabet keys.
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
HTML
<!-- A -->
<kbd class="">A</kbd>
<!-- B -->
<kbd class="">B</kbd>
<!-- C -->
<kbd class="">C</kbd>
<!-- D -->
<kbd class="">D</kbd>
<!-- E -->
<kbd class="">E</kbd>
<!-- F -->
<kbd class="">F</kbd>
<!-- G -->
<kbd class="">G</kbd>
<!-- H -->
<kbd class="">H</kbd>
<!-- I -->
<kbd class="">I</kbd>
<!-- J -->
<kbd class="">J</kbd>
<!-- K -->
<kbd class="">K</kbd>
<!-- L -->
<kbd class="">L</kbd>
<!-- M -->
<kbd class="">M</kbd>
<!-- N -->
<kbd class="">N</kbd>
<!-- O -->
<kbd class="">O</kbd>
<!-- P -->
<kbd class="">P</kbd>
<!-- Q -->
<kbd class="">Q</kbd>
<!-- R -->
<kbd class="">R</kbd>
<!-- S -->
<kbd class="">S</kbd>
<!-- T -->
<kbd class="">T</kbd>
<!-- U -->
<kbd class="">U</kbd>
<!-- V -->
<kbd class="">V</kbd>
<!-- W -->
<kbd class="">W</kbd>
<!-- X -->
<kbd class="">X</kbd>
<!-- Y -->
<kbd class="">Y</kbd>
<!-- Z -->
<kbd class="">Z</kbd>
Number keys
A KBD component with numerical keys.
1
2
3
4
5
6
7
8
9
0
HTML
<!-- 1 -->
<kbd class="">1</kbd>
<!-- 2 -->
<kbd class="">2</kbd>
<!-- 3 -->
<kbd class="">3</kbd>
<!-- 4 -->
<kbd class="">4</kbd>
<!-- 5 -->
<kbd class="">5</kbd>
<!-- 6 -->
<kbd class="">6</kbd>
<!-- 7 -->
<kbd class="">7</kbd>
<!-- 8 -->
<kbd class="">8</kbd>
<!-- 9 -->
<kbd class="">9</kbd>
<!-- 0 -->
<kbd class="">0</kbd>
Function keys
A KBD component with functional keys.
F1
F2
F3
F4
F5
F6
F7
F8
F10
F11
F12
HTML
<!-- F1 -->
<kbd class="">F1</kbd>
<!-- F2 -->
<kbd class="">F2</kbd>
<!-- F3 -->
<kbd class="">F3</kbd>
<!-- F4 -->
<kbd class="">F4</kbd>
<!-- F5 -->
<kbd class="">F5</kbd>
<!-- F6 -->
<kbd class="">F6</kbd>
<!-- F7 -->
<kbd class="">F7</kbd>
<!-- F8 -->
<kbd class="">F8</kbd>
<!-- F10 -->
<kbd class="">F10</kbd>
<!-- F11 -->
<kbd class="">F11</kbd>
<!-- F12 -->
<kbd class="">F12</kbd>