Design system

Kbd

Keyboard keys and shortcut chords rendered with semantic markup.

Built on Workshop1 compositionUpstream API

Open command menuK

Save changes+S

Move focusTab

Usage

import { Kbd, KbdGroup } from "@workshop1/ui/components/kbd"

Use Kbd for a physical key and KbdGroup for a chord or sequence. Match the label users see on their platform, and show shortcuts only when the product actually listens for them. Keep the action name beside the shortcut.

Keyboard hints complement menus, tooltips, and help content. They do not replace an accessible control label or provide keyboard behavior by themselves.