Extra Large Kbd for React

When the shortcut is the headline: a hero that introduces a command palette, a launch page, a slide, a demo video. Anywhere else, the large or default size is enough.

48 pixels tall and at least 48 wide, with 2xl type and wider padding. Height and minimum width stay equal so ⌘ and K are square, and the gap from KbdGroup stays small, so the two caps still read as one shortcut.

Marketing pages, feature announcements, keynote slides and screen recordings, where the shortcut is the message. In an app's own interface, they look out of scale next to everything else.

Use a smaller size on narrow screens, for example by switching classes at a breakpoint. Two 48-pixel caps fit, but a longer shortcut won't, and most phones have no keyboard to press it on.

They're easy to see, and screen readers still read the text inside each cap. As with any symbol, ⌘ alone may not be read as Command, so add the key's name as visually hidden text when it matters.

Yes. A product built around a shortcut, like a launcher or a command palette, can make the key caps part of its look. Restyle them with your brand colors through the cap's classes.