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