Kbd# 

Ripple UI comes with a keyboard component that allows you to display keyboard keys.

Default# 

Simple example of a kbd.

Space
HTML
JSX
<kbd class="kbd">Space</kbd>

Keys with text# 

You can combine text with keyboard keys.

Press Space + Shift + Alt + A to open the application.

HTML
JSX
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.

Sizes# 

You can change the size of the keyboard keys.

Space Space Space Space Space
HTML
JSX
<kbd class="kbd kbd-xs">Space</kbd>
<kbd class="kbd kbd-sm">Space</kbd>
<kbd class="kbd kbd-md">Space</kbd>
<kbd class="kbd kbd-lg">Space</kbd>
<kbd class="kbd kbd-xl">Space</kbd>

Function keys# 

You can display function keys.

F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12
HTML
JSX
<kbd class="kbd">F1</kbd>
<kbd class="kbd">F2</kbd>
<kbd class="kbd">F3</kbd>
<kbd class="kbd">F4</kbd>
<kbd class="kbd">F5</kbd>
<kbd class="kbd">F6</kbd>
<kbd class="kbd">F7</kbd>
<kbd class="kbd">F8</kbd>
<kbd class="kbd">F9</kbd>
<kbd class="kbd">F10</kbd>
<kbd class="kbd">F11</kbd>
<kbd class="kbd">F12</kbd>

Mac keys# 

You can display mac keys.

⌘ ⌥ ⇧ ⌃
HTML
JSX
<kbd class="kbd">⌘</kbd>
<kbd class="kbd">⌥</kbd>
<kbd class="kbd">⇧</kbd>
<kbd class="kbd">⌃</kbd>

API# 

classDescription
kbdDefault class
kbd-xsExtra small size
kbd-smSmall size
kbd-mdMedium size
kbd-lgLarge size
kbd-xlExtra large size
TooltipMore - Changelog
Edit this page on GitHub