A 20-tall key that fits inside anything: sixteen variants covering two backgrounds, optional icons at either end, and groups of one to four keys joined or...
Two components, sixteen variants
Kbd - Background × Show Left Icon × Show Right Icon: Default · Primary × Yes · No × Yes · No - 30, 46 or 62 wide, always 20 tall
Kbd Group - Type × Keys: Default · + Separated × 1 · 2 · 3 · 4 - 20 to 154 wide
Using the Kbd
What is the Primary background for?
Dark surfaces. It inverts the key: base.primary-foreground for the block, base.primary for the letter. On a black tooltip or a filled button the Default key's base.muted would vanish, which is the whole reason the second background exists.
Why is every key 20 tall?
So it can sit inside anything without making room for itself. A 32-tall input, a tooltip and a button all take a 20-tall key with 4 of side padding and a 12/500 label, and none of them grow to fit it. The height is the one measurement that never varies.
What is the difference between the two group types?
Default sets Mac modifiers side by side with nothing between them, because ⌘⇧⌥ reads as a single chord. + Separated writes the shortcut out for the platforms that say it aloud, with a 12/400 plus between each key: Ctrl + Alt + Shift + B.
Why are the icons two properties rather than one?
Because a key can carry one at either end independently, and the width follows: 30 with none, 46 with one, 62 with both. They ship hidden in all eight variants, so turning one on is a property change rather than an edit.