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

<KbdKey key=Key::Option/>


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!

<KbdShortcut keys=[Key::Command, Key::Enter]/> +Enter

This could also be rendered manually using the following markup.

<KbdShortcutRoot> <KbdKey key=Key::Command/> <KbdConcatenate with="+"/> <KbdKey key=Key::Enter/> </KbdShortcutRoot> +Enter


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.

<KbdKey key=Key::Custom("Foo")/> Foo


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

--leptonic-kbd-key-color --leptonic-kbd-key-background-color --leptonic-kbd-key-margin --leptonic-kbd-key-padding --leptonic-kbd-key-border-radius --leptonic-kbd-key-border-color --leptonic-kbd-concatenate-color --leptonic-kbd-concatenate-background-color --leptonic-kbd-concatenate-margin --leptonic-kbd-concatenate-padding --leptonic-kbd-concatenate-border-radius