Skip to main content

Overview

The .kbd component renders realistic 3D keycaps for depicting keyboard combinations, shortcuts, and navigation hints.

Press ⌘ K to open the command palette.
Save document: Ctrl S
Undo / Redo: Ctrl Z and Ctrl Shift Z 
<span class="kbd-group">
  <kbd class="kbd"><span>⌘</span></kbd>
  <kbd class="kbd"><span>K</span></kbd>
</span>

Sizes

Adjust the scale of keycaps using .kbd-xs, .kbd-sm, or .kbd-lg.

ESC TAB ENTER SPACE 
<div class="d-flex align-items-center gap-3">
  <kbd class="kbd kbd-xs"><span>ESC</span></kbd>
  <kbd class="kbd kbd-sm"><span>TAB</span></kbd>
  <kbd class="kbd"><span>ENTER</span></kbd>
  <kbd class="kbd kbd-lg"><span>SPACE</span></kbd>
</div>