KBD

KBD Component

The KBD component styles keyboard input keys or shortcuts with a visually distinct box. It supports multiple sizes and optional tooltips, making it ideal for displaying key commands or shortcuts in UI text.

Example Usage

<x-kbd size="xs" tooltip="Press this key">Ctrl</x-kbd>

Props

• size (string, default: "sm")
  Controls the size of the key box. Options:

  • xs (extra small)
  • sm (small)
  • md (medium)
  • lg (large)

• tooltip (string|null)
  Tooltip text displayed when hovering over the key element.

Overview

This KBD component wraps content in a styled <kbd> element, providing a monospace font, border, background, and padding consistent with typical keyboard key appearance. It uses Tailwind CSS for styling and supports dark mode. Tooltips are added using Alpine.js for enhanced user guidance.