Shortcut keycap component for displaying keyboard commands and key combinations.
Demo
kbd xs
Kbd sm
Kbd md
Kbd lg
<div class="flex flex-wrap items-center gap-3">
<x-ui.kbd size="xs">kbd xs </x-ui.kbd>
<x-ui.kbd size="sm">Kbd sm</x-ui.kbd>
<x-ui.kbd> Kbd md</x-ui.kbd>
<x-ui.kbd size="lg">Kbd lg</x-ui.kbd>
</div>
Installation
Shell
php artisan flexi:add kbdWith Icon or Symbol
/
<div class="flex flex-wrap items-center gap-3">
<x-ui.kbd>
<span aria-hidden="true" class="flex iconify ph--caret-down"></span>
</x-ui.kbd>
<x-ui.kbd variant="outline">
<svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="M9 18v-6H5l7-7 7 7h-4v6H9z" />
</svg>
</x-ui.kbd>
<x-ui.kbd variant="outline" class="min-w-7.5 flex items-center justify-center text-sm">
/
</x-ui.kbd>
</div>
Grouped
K
And
+ R
<div class="flex flex-wrap gap-3">
<div class="flex items-center gap-x-2">
<x-ui.kbd class="flex items-center gap-0.5">
<span aria-hidden="true" class="flex iconify ph--command"></span> K
</x-ui.kbd>
<span class="text-fg">
And
</span>
<x-ui.kbd class="flex items-center gap-0.5">
<span aria-hidden="true" class="flex iconify ph--command"></span> + R
</x-ui.kbd>
</div>
</div>
Usage Notes
-
Use short, recognizable labels like
Ctrl,Cmd, orEnter. - Keep grouped shortcuts consistent in order (modifier keys first).
- Pair shortcuts with actionable UI labels for discoverability.
API
| Prop | Description |
|---|---|
variant
(solid|soft|subtle|outline|default)
|
Controls visual style.
|
intent
(string)
|
Semantic color intent for the selected variant.
|
size
(none|xs|sm|default|lg)
|
Changes keycap size and typography.
|
radius
(string)
|
Rounded style token passed to the component.
|