Components

Keyboard Key

Keyboard key component for displaying keyboard shortcuts and input combinations.
Static SSR Source Styles source

Usage

⌘K
<LumexKbd Keys="@([KeyboardKey.Command])">K</LumexKbd>

Keys

Use the Keys parameter to specify a single keyboard key or a combination of keys.

⌘K ⌘⇧N ⌥⌘P
<div class="flex items-center gap-2">
	<LumexKbd Keys="@([KeyboardKey.Command])">K</LumexKbd>
	<LumexKbd Keys="@([KeyboardKey.Command, KeyboardKey.Shift])">N</LumexKbd>
	<LumexKbd Keys="@([KeyboardKey.Option, KeyboardKey.Command])">P</LumexKbd>
</div>

Custom styles

This component supports named slots, which allow custom styles to be applied to specific parts of the component:

  • Base: Kbd wrapper, it handles alignment, placement, and general appearance.
  • Abbr: The keys wrapper that handles the appearance of the keys.
  • Content: The children wrapper that handles the appearance of the content.

You can customize the component(s) by passing any Tailwind CSS classes to the following component parameters:

Kbd

  • Class: The basic CSS class name styles the wrapper of the kbd contents.
  • Classes: The CSS class names for the kbd slots style the entire kbd at once.

API

See the API references below for a complete guide to all the parameters available for the components mentioned here.

An unhandled error has occurred. Reload 🗙