Kbd

Basic

Add .kbd to a <kbd> (or any inline element) for the key-cap look: the neutral fill with a hairline rim and a faint bottom edge.

Combinations

Nest .kbd elements to spell out a shortcut. The outer wrapper drops its chrome and lays each inner cap out as its own chip with a small gap.

Add a + between caps if the shortcut needs spelling out for screen readers. The plus sits as a flex item between the chips.

In running text

Inside .prose, bare <kbd> picks up the chip without a class so shortcut hints in long-form copy keep semantic markup. The chip's font size scales from the surrounding text, so it shrinks in small copy and grows in headings.

Inside a button

Pair a chip with a button label so the shortcut sits alongside the action. The chip keeps its own background so it stays legible on top of solid intents.

Customization

These variables retune .kbd without touching component CSS. Override on the element, a parent scope, or :root.