Content
keyboard
The Keyboard component showcases keyboard keys, allowing you to present custom-designed keys that enhance the overall user interface.
Basic variant
Default kbd
Use the component class `kbd` to display the keyboard shortcut.
A
B
C
D
Sizes
Size variants
Add responsive class `kbd-{size}` where `{size} = xs|sm|md|lg|xl` for different sizes.
Ctrl
Ctrl
Ctrl
Ctrl
Ctrl
Illustrations
In text
Use kbd's in text to illustrate keyboard shortcuts.
Press Enter to continue.
Key combinations
Use the `+` sign to display key combinations.
Ctrl+Shift+Delete
Function keys
Use special characters to display function keys.
⌘
⌥
⇧
⌃
F1
F2
F3
F4
A full keyboard
Use the `flex` and `justify-center` utility classes to display 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
,
Arrow keys
Use the `flex` and `justify-center` utility classes to display arrow keys.
Number keys
Use kbd with numbers to display number keys.
0
1
2
3
4
5
6
7
8
9
Class referenceThe component, style, color, state, size and modifier classes available for this component.
| Class | Type | Description |
|---|---|---|
kbd | component | Base class for the keyboard component. |
kbd-xs | size | Keyboard with extra small size. |
kbd-sm | size | Keyboard with small size. |
kbd-md | size | Keyboard with medium(default) size. |
kbd-lg | size | Keyboard with large size. |
kbd-xl | size | Keyboard with extra large size. |