Small Kbd for React

Where space is tight and the shortcut is a secondary hint: a compact tooltip, a sidebar listing many shortcuts, a status bar, a table cell. Keep the default size anywhere people need to read the shortcut to use it.

10 pixels, as here, is about the smallest that stays legible for a single character. Below that, letters like K and symbols like ⌘ start to blur, especially on low-density screens.

h-4 sets the cap to 16 pixels tall and min-w-4 to at least 16 pixels wide, so a single character sits in a square. A longer label such as Ctrl still widens the cap to fit.

The Kbd's own small horizontal padding is enough for one character. For a word at this size, keep the padding small, such as px-1, so the cap doesn't grow taller than the text around it.

The text is still real text, so screen readers read it and browser zoom enlarges it. 10-pixel type is hard to read for many people, though, so don't put a shortcut only in small caps if it's the only way to learn it; show it at the default size somewhere too.

Mostly, since ⌘ is a simple shape. ⌥ and ⌃ get harder to tell apart at 10 pixels; if a shortcut uses them, consider the default size or a word such as Option.