Theme:

KBD

The KBD component displays keyboard keys or shortcuts in a styled inline element. Useful for documenting hotkeys and shortcuts.

Sizes

Ctrl Ctrl Ctrl Ctrl Ctrl

<kbd class="dui-kbd dui-kbd-xs">Ctrl</kbd> <kbd class="dui-kbd dui-kbd-sm">Ctrl</kbd> <kbd class="dui-kbd">Ctrl</kbd> <kbd class="dui-kbd dui-kbd-lg">Ctrl</kbd> <kbd class="dui-kbd dui-kbd-xl">Ctrl</kbd>

Keyboard Shortcuts

Copy: Ctrl + C

Save: Ctrl + S

Search: Ctrl + K

<kbd class="dui-kbd">Ctrl</kbd> + <kbd class="dui-kbd">C</kbd> <kbd class="dui-kbd">Ctrl</kbd> + <kbd class="dui-kbd">S</kbd> <kbd class="dui-kbd">Ctrl</kbd> + <kbd class="dui-kbd">K</kbd>

Key Row Example

Q W E R T Y

<kbd class="dui-kbd">Q</kbd> <kbd class="dui-kbd">W</kbd> <kbd class="dui-kbd">E</kbd> <kbd class="dui-kbd">R</kbd> <kbd class="dui-kbd">T</kbd> <kbd class="dui-kbd">Y</kbd>