Kbd

Keycaps render a single key, and KbdGroup renders a full shortcut.

Examples

Single key

K

Shortcut

⌘K

Sizes

⇧↵⇧↵

On an inverted surface

Change model⌘\

Overview

Kbd renders a native <kbd> element styled as a keycap. The bottom-only border gives it a physical edge without boxing the glyph on all four sides.

tsx

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 fill is theme-aware and disappears against a dark surface.

tsx

<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.

tsx

<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.
`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.

PreviousInput

NextPopover