Components

Kbd

Used to display textual user input from the keyboard.

php artisan blatui:add kbd

⌘ K Ctrl + B Esc

<div class="flex items-center gap-4">
    <x-ui.kbd-group>
        <x-ui.kbd>⌘</x-ui.kbd>
        <x-ui.kbd>K</x-ui.kbd>
    </x-ui.kbd-group>
    <x-ui.kbd-group>
        <x-ui.kbd>Ctrl</x-ui.kbd>
        <span>+</span>
        <x-ui.kbd>B</x-ui.kbd>
    </x-ui.kbd-group>
    <x-ui.kbd>Esc</x-ui.kbd>
</div>

Icons

Command Shift Option Enter Backspace Up Down K

{{-- Keys rendered with icons instead of text. --}}
<div class="flex flex-wrap items-center gap-2">
    <x-ui.kbd aria-label="Command"><x-lucide-command /></x-ui.kbd>
    <x-ui.kbd aria-label="Shift"><x-lucide-arrow-big-up /></x-ui.kbd>
    <x-ui.kbd aria-label="Option"><x-lucide-option /></x-ui.kbd>
    <x-ui.kbd aria-label="Enter"><x-lucide-corner-down-left /></x-ui.kbd>
    <x-ui.kbd aria-label="Backspace"><x-lucide-delete /></x-ui.kbd>
    <x-ui.kbd aria-label="Up"><x-lucide-arrow-up /></x-ui.kbd>
    <x-ui.kbd aria-label="Down"><x-lucide-arrow-down /></x-ui.kbd>
    <x-ui.kbd-group>
        <x-ui.kbd><x-lucide-command /></x-ui.kbd>
        <x-ui.kbd>K</x-ui.kbd>
    </x-ui.kbd-group>
</div>

In Button

<div class="flex flex-wrap items-center gap-3">
    <x-ui.button variant="outline" size="sm">Accept <x-ui.kbd>⏎</x-ui.kbd></x-ui.button>
    <x-ui.button variant="outline" size="sm">
        Search
        <x-ui.kbd-group>
            <x-ui.kbd>⌘</x-ui.kbd>
            <x-ui.kbd>K</x-ui.kbd>
        </x-ui.kbd-group>
    </x-ui.button>
</div>

Shortcuts

Open command menu ⌘ K

Toggle theme ⌘ T

Save changes ⌘ S

<div class="flex w-full max-w-sm flex-col gap-3 text-sm">
    <div class="flex items-center justify-between">
        <span>Open command menu</span>
        <x-ui.kbd-group><x-ui.kbd>⌘</x-ui.kbd><x-ui.kbd>K</x-ui.kbd></x-ui.kbd-group>
    </div>
    <div class="flex items-center justify-between">
        <span>Toggle theme</span>
        <x-ui.kbd-group><x-ui.kbd>⌘</x-ui.kbd><x-ui.kbd>T</x-ui.kbd></x-ui.kbd-group>
    </div>
    <div class="flex items-center justify-between">
        <span>Save changes</span>
        <x-ui.kbd-group><x-ui.kbd>⌘</x-ui.kbd><x-ui.kbd>S</x-ui.kbd></x-ui.kbd-group>
    </div>
</div>

Sizes

Esc Esc Esc ⌘ ⏎

{{-- Keys at different sizes, including square keys. --}}
<div class="flex flex-wrap items-center gap-3">
    <x-ui.kbd class="h-4 px-1 text-[0.625rem]">Esc</x-ui.kbd>
    <x-ui.kbd>Esc</x-ui.kbd>
    <x-ui.kbd class="h-6 px-1.5 text-sm">Esc</x-ui.kbd>
    <x-ui.kbd class="size-8 text-sm">⌘</x-ui.kbd>
    <x-ui.kbd class="size-10 text-base">⏎</x-ui.kbd>
</div>

API Reference

Props, slots and exposed methods for <x-ui.kbd>.

Slots

Slot	Description
`default`	The key label rendered inside the <kbd> element — text (e.g. Ctrl, ⌘K) or an icon. Pass an aria-label attribute to spell out a symbol for screen readers; it is rendered as visually-hidden text since aria-label is not allowed on <kbd>.