Keyboard#

Display labeled keyboard key-caps using the <KbdKey> component. Leptonic provides the Key enum which provides well-known keys and their display properties.

Shortcuts#

You may use this component to display a hint to a keyboard shortcut your users can use to interact with your app. As shortcuts mostly consist of two or more keys, Leptonic also provide the <KbdShortcut> component to make this task as easy as possible. Simply provide the keys which must be pressed in order to activate the shortcut.

Note that these component do not listen for key-presses. Their sole purpose is to unify rendering of key caps and shortcuts!

This could also be rendered manually using the following markup.

Keys#

Here is a list of all keys provided by the Key enum.

If you need custom content in a <Kbd> element, use the Key::Custom(String) variant.

Styling#

You may overwrite any of the following CSS variables to meet your styling needs.