Kbd | Sodium design system

Form

When to use it

6 rules

Must: Write a shortcut with keys="mod+k", not with ⌘ or Ctrl typed in. Because keys shows ⌘ on a Mac and Ctrl elsewhere and gives a screen reader the spoken names; a typed ⌘ is wrong for half the readers.
Never: Use a Kbd as the only way to say what a control does. Because a touch screen has no keys, and the hint hides there.
Never: Give a Kbd an onClick or a hover state. Because it is printed on the row, not a key on screen; a pressable cap needs a Button.
Should: Hide a shortcut hint where the pointer is coarse (pointer-coarse:hidden).
Must: Write a named key as a word in the source ("Enter", "Esc"); the cap sets the capitals. Because a screen reader reads the source, and typed capitals such as ENTER are spelled out letter by letter.
Should: Use KbdGroup for a sequence written by hand, so it is read as one.

3 checks

: A shortcut from keys has a hidden spoken form: "Command K" on a Mac, "Control K" elsewhere.
: The cap is text-2 on the page, 7.8:1 in light and 10.2:1 in dark.
: The server renders a blank cap for a key whose platform form is not known yet, so no wrong key flashes.

3 edge cases

Unknown platform: Keys that differ by platform render as blank caps until hydration.
Long key name: Wraps inside the cap, which grows taller.
Touch device: Hide the hint with pointer-coarse:hidden; nothing depends on it.

3 props

4 tokens