Overview
The <x-aura::kbd> component renders an inline keyboard key indicator styled to resemble a physical key. Use it to display keyboard shortcuts, hotkeys, or key combinations in documentation, tooltips, or UI hints.
Basic Usage
Ctrl
<x-aura::kbd>Ctrl</x-aura::kbd>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size |
string |
'md' |
Key size: sm, md, lg. |
Variants / Examples
Single Keys
Esc
Tab
Enter
Space
<x-aura::kbd>Esc</x-aura::kbd>
<x-aura::kbd>Tab</x-aura::kbd>
<x-aura::kbd>Enter</x-aura::kbd>
<x-aura::kbd>Space</x-aura::kbd>
Keyboard Shortcuts
Ctrl
+
C
Copy
Ctrl
+
Shift
+
P
Command Palette
Alt
+
F4
Close Window
<div class="flex items-center gap-1">
<x-aura::kbd>Ctrl</x-aura::kbd>
<span class="text-aura-surface-400">+</span>
<x-aura::kbd>C</x-aura::kbd>
<span class="ml-2 text-sm text-aura-surface-500">Copy</span>
</div>
Size Comparison
Ctrl
Small
Ctrl
Medium
Ctrl
Large
<x-aura::kbd size="sm">Ctrl</x-aura::kbd>
<x-aura::kbd size="md">Ctrl</x-aura::kbd>
<x-aura::kbd size="lg">Ctrl</x-aura::kbd>
Accessibility
- The
<kbd>element is a semantic HTML element recognized by screen readers as keyboard input. - When displaying shortcuts, pair keys with descriptive text labels for clarity.