Kbd

Basic Usage

Loading demo...

The root element is <kbd>, so it carries native keyboard-token semantics.
size="sm" is the compact default for inline help and menu shortcuts.
tone="primary" highlights product shortcuts without changing the slot content.
The component has no events and no internal state.

Prop	Type	Default	Description
`size`	`'sm' \| 'md'`	`'sm'`	Token size: `sm` (default) for inline help and menu shortcuts; `md` is larger for shortcuts shown on their own.
`tone`	`'default' \| 'primary'`	`'default'`	Visual tone: use `primary` only for the main shortcut on a page or command, at most one group per screen.

TxKbd does not emit component events.

Slot	Props	Description
`default`	-	Key label, such as `⌘`, `Ctrl`, or `K`.

Render key combinations as separate TxKbd tokens rather than one long string when spacing matters.
Keep labels platform-aware in host copy: ⌘ for macOS, Ctrl for Windows/Linux.
Use tone="primary" sparingly for the main shortcut on a page or command.
Pair shortcut tokens with visible action text; shortcuts alone are not discoverable enough.

Source: packages/tuffex/packages/components/src/kbd/src/TxKbd.vue confirms the semantic <kbd> root, size / tone classes, and default slot-only content.
Verified coverage: Coverage: packages/tuffex/packages/components/src/kbd/__tests__/kbd.test.ts covers rendered shortcut content, root tag, and variant classes.
Export: packages/tuffex/packages/components/src/kbd/index.ts wraps the component with withInstall and exports TxKbdInstance.

packages/tuffex/packages/components/src/kbd/index.ts