Kbd

Renders a keyboard key or key combination with a styled <kbd> element.

Enter

<.kbd>Enter</.kbd>

Examples

Individual Keys

Common keyboard keys rendered as individual badges.

Enter Esc Tab ⇧ ⌘ ⌥ ⌃

<div class="flex flex-wrap items-center gap-2">
  <.kbd>Enter</.kbd>
  <.kbd>Esc</.kbd>
  <.kbd>Tab</.kbd>
  <.kbd>⇧</.kbd>
  <.kbd>⌘</.kbd>
  <.kbd>⌥</.kbd>
  <.kbd>⌃</.kbd>
</div>

Show code

Key Combinations

Use kbd_group to group keys that form a shortcut.

⌘ K ⇧ ⌘ P ⌃ C

<div class="flex flex-wrap items-center gap-4">
  <.kbd_group>
    <.kbd>⌘</.kbd>
    <.kbd>K</.kbd>
  </.kbd_group>
  <.kbd_group>
    <.kbd>⇧</.kbd>
    <.kbd>⌘</.kbd>
    <.kbd>P</.kbd>
  </.kbd_group>
  <.kbd_group>
    <.kbd>⌃</.kbd>
    <.kbd>C</.kbd>
  </.kbd_group>
</div>

Show code

Props

Name	Type	Default	Values
class	:string
rest	:global
inner_block (slot)	:slot