Kbd
@xui/kbdA keyboard-key cap. Put xuiKbd on a <kbd> and chain several to spell a shortcut — the natural label for a @xui/hotkeys binding.
Install
pnpm add @xui/kbd Add the barrel to a standalone component's imports:
import { XuiKbdImports } from '@xui/kbd';
@Component({
imports: [XuiKbdImports],
// …
})Examples
Basic
Loading preview…
<div class="flex items-center gap-1">
<kbd xuiKbd>⌘</kbd>
<kbd xuiKbd>K</kbd>
</div>Sizes
Loading preview…
<div class="flex items-center gap-4">
<div class="flex items-center gap-1"><kbd xuiKbd size="sm">⌥</kbd><kbd xuiKbd size="sm">S</kbd></div>
<div class="flex items-center gap-1"><kbd xuiKbd size="md">⌘</kbd><kbd xuiKbd size="md">K</kbd></div>
<div class="flex items-center gap-1"><kbd xuiKbd size="lg">⇧</kbd><kbd xuiKbd size="lg">Enter</kbd></div>
</div>In sentence
Loading preview…
<p class="text-foreground text-sm">
Press <kbd xuiKbd>Ctrl</kbd> <kbd xuiKbd>Shift</kbd> <kbd xuiKbd>P</kbd> to open the command palette.
</p>API
A keyboard-key cap. Put it on a <kbd> for the right semantics; chain several to spell a shortcut. Pairs with @xui/hotkeys for the binding side.
Variants
sizemdInputs
classClassValueExtra classes, merged into the directive's own rather than replacing them.''sizeXuiKbdVariants['size']Key size, matched to the text it sits beside.this.config.size