Kbd

Keyboard hints are small UI rhythm elements: keep them flat unless they’re interactive.

Basic Usage

⌘⇧⌥EscEnter
Command palette⌘K

Sizes

Small⌘S
Default⌘S
Large⌘S

States

Use interactive only when the key is clickable.

ASDSpaceE

Hover/press to see the lift and pressed shadow.

Elevation

Two shadow levels: flat by default, and a subtle raised option.

Flat (Default)⌘K
Raised⌘K

API Reference

Prop
Description
variant
Color style (default/primary/secondary/destructive/outline).
size
Sizing presets (sm/default/lg).
interactive
Enables hover/pressed lift and subtle shadow (opt-in).
elevation
Shadow level: flat (default) or raised.