Kbd

New

A keyboard key component for representing keyboard shortcuts and key combinations. Wraps DaisyUI's .kbd class in a semantically correct <kbd> element with size variants from xs through xl.

API Reference

Attribute	Description	Type	Default
`size`	Controls the visual size of the key cap	string	`md`

size

xs sm md lg xl

Semantic element: the component renders a native <kbd> element, which is recognised by screen readers as keyboard input. No additional ARIA role is required.

Key combinations: when composing multi-key shortcuts, place each key in its own <c-kbd> and separate them with a visible + character so the relationship is clear both visually and to assistive technologies.

Inline prose: when embedding keyboard shortcuts inside body text (e.g. "Press Ctrl + S to save") the <kbd> element automatically provides the correct semantic annotation without extra markup.

Examples

Usage


<c-kbd>K</c-kbd>

Single Keys

K Enter Esc Tab Space Backspace

<c-kbd>K</c-kbd>
<c-kbd>Enter</c-kbd>
<c-kbd>Esc</c-kbd>
<c-kbd>Tab</c-kbd>
<c-kbd>Space</c-kbd>
<c-kbd>Backspace</c-kbd>

Key Combinations

Ctrl + S Ctrl + Shift + P Alt + F4

<!-- Save -->
<span class="flex items-center gap-1">
  <c-kbd>Ctrl</c-kbd>
  <span>+</span>
  <c-kbd>S</c-kbd>
</span>

<!-- Command palette -->
<span class="flex items-center gap-1">
  <c-kbd>Ctrl</c-kbd>
  <span>+</span>
  <c-kbd>Shift</c-kbd>
  <span>+</span>
  <c-kbd>P</c-kbd>
</span>

Size Variants

xs xs sm sm md md lg lg xl xl

<c-kbd size="xs">xs</c-kbd>
<c-kbd size="sm">sm</c-kbd>
<c-kbd size="md">md</c-kbd>
<c-kbd size="lg">lg</c-kbd>
<c-kbd size="xl">xl</c-kbd>

Kbd