Kbd
Keycaps render a single key, and KbdGroup renders a full shortcut.
Examples
On an inverted surface
Overview
Kbd renders a native <kbd> element styled as a raised keycap. It uses the same shadow-raised treatment as the active chip in Tabs and SegmentedControl, which draws the hairline edge in light mode and the contact shadow in dark, so the cap reads as sitting above the surface on both themes.
import { Kbd, KbdGroup } from "@rogo-technologies/ui/kbd";
<KbdGroup>
<Kbd>⌘</Kbd>
<Kbd>K</Kbd>
</KbdGroup>;Usage
Inverted surfaces
Use variant="inverted" for keycaps sitting on bg-surface-inverted, such as tooltips. The default variant's raised fill is theme-aware and reads as a bright block against a dark surface.
<Kbd variant="inverted">⌘</Kbd>Platform-specific glyphs
Kbd is presentational and renders whatever you pass it, so mapping "cmd" to ⌘ or Ctrl belongs to the consumer. In the frontend, KeyboardShortcutChip (@components/KeyboardShortcut) does that mapping and resolves the platform after mount to keep the server and first client render in agreement.
<KeyboardShortcutChip shortcutKey={["cmd", "k"]} />API
Kbd
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "inverted" | "default" | Use inverted on dark surfaces. |
size | "sm" | "md" | "md" | Keycap height and minimum width. Both are square for a single glyph. |
className | string | - | Additional CSS classes. |
Accepts all standard HTML <kbd> attributes.
KbdGroup
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes. |
Accepts all standard HTML <span> attributes.