Kbd

A keyboard shortcut display component. keys is split by spaces into multiple keycaps joined with +; non-interactive.

Basic usage

Combined shortcuts

Example

Semantic key names

keys supports semantic key names auto-mapped to symbols (e.g. command → ⌘, shift → ⇧). Each mapped keycap embeds an <abbr title="full name"> for screen readers and hover tooltips; unmapped names render literally (e.g. k, f1):

Semantic key name mapping

Example

Single key & empty state

Single key & empty state

Example

Custom content

Slot content takes priority

⌘CSpace

Example

Variants

raised (default, 3D) / outline (bordered) / subtle (light background) / plain (text only):

Four variants

Example

Sizes

Three sizes

Example

Color

Accepts 11 preset names (auto-adapting to light/dark themes) or any CSS color value (takes effect immediately, overriding presets and defaults). Tints the keycap background:

Preset palette

Example

Custom color values

Example

Composition

Group multiple kbd with oas-space (spacing control):

Grouping

Example

Nest inside other components via slot projection:

Nesting in a button

Command palette

Example

API

oas-kbd

Attributes

Attribute	Description	Type	Default
color	Custom color: accepts 11 preset names (mapped to --oas-preset-*-text compliant tokens) or any CSS color value; keycap background is tinted and the border follows	string	—
keys	Space-separated key sequence, e.g. "ctrl shift k"	string	—
size	Size tier: small / medium (default) / large; invalid values fall back to medium with a warning	string	—
variant	Style: raised (default, 3D keycap) / outline (bordered) / subtle (light background) / plain (text only); invalid values fall back to raised with a warning	string	—

Slots

Name	Description
default	Key content (text / icons)

CSS Variables

CSS Variable	Default
--oas-kbd-bg	var(--oas-color-bg-hover)
--oas-kbd-border	var(--oas-color-border-strong)
--oas-kbd-color	—
--oas-kbd-text	var(--oas-color-text-primary)

Note: empty keys renders a single empty keycap; slot content takes priority when provided. The component is purely presentational with role="text" and dispatches no events.