Preview
Usage
Kbd is a native, inert hint. The surrounding action owns the shortcut and its behavior.
Examples
Keys
Keep icon and text keys at the same height. A small corner radius preserves the keycap shape.
Surface context
On a secondary surface, give the keys a darker fill through the inherited --ui-kbd-background CSS property. The surrounding surface owns this choice.
Text
Place the hint beside the action name.
Groups
Group the modifier and key into one named shortcut hint.
Long hints
Keep a longer key sequence readable in a narrow space.
Small keycaps
Use the compact size for short labels such as an emoji shortcode.
Subtle keycaps
Use the borderless variant when a filled keycap needs less visual weight.
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | Key label or glyph. | |
className | string | undefined | Additional class name. | |
variant | "outline" | "subtle" | "outline" | Outline shows the existing border; subtle removes the visible border while keeping the background. |
size | "base" | "sm" | "base" | Base keeps the existing keycap size; sm uses a compact 18px minimum height and 10px text. |
title | string | undefined | Caller-provided clarification for an ambiguous key. |
Set --ui-kbd-background to a CSS color on Kbd or an ancestor to change its fill. It falls back to var(--secondary).
Accessibility
Use familiar key names and a title for an ambiguous glyph. Name a sequence with KbdGroup aria-label. The hint has no listener or tab stop; its action owns the shortcut.