Keyboard Key

x-bladewind::kbd renders a semantic <kbd> element styled as a physical key, for documenting a shortcut in help text, a menu item, or command documentation.

Press Esc to close.

markup

<p>Press <x-bladewind::kbd>Esc</x-bladewind::kbd> to close.</p>

Key combinations

Pass keys as an array (or JSON string) to render a combo: each key in its own pill, joined by "+". When keys is given, it takes priority over the default slot.

Open the command palette with Ctrl K

markup

<x-bladewind::kbd :keys="['Ctrl', 'K']" />

Sizes

Set size to tiny, small (default), or regular.

Tab Tab Tab

markup

<x-bladewind::kbd size="tiny">Tab</x-bladewind::kbd>
<x-bladewind::kbd size="small">Tab</x-bladewind::kbd>
<x-bladewind::kbd size="regular">Tab</x-bladewind::kbd>

Full List Of Attributes

Option	Default	Available Values
keys	(none)	Array or JSON string of key labels for a combo. Takes priority over the default slot.
size	small	`tiny` \| `small` \| `regular`
class	(blank)	Additional CSS classes for the key (or the combo's wrapper, when using `keys`).

Kbd with all attributes defined

markup

<x-bladewind::kbd
:keys="['Ctrl', 'K']"
size="regular"
class="ml-2" />

The source file for this component is available in resources > views > components > bladewind > kbd.blade.php