Kbd

Default

Add .kbd to a <kbd> (or any inline element) for the key cap look. The chip sits on the neutral interactional fill with a hairline rim and a faint ambient shadow.

<kbd class="kbd">?</kbd>

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.

<div class="demo-row">
  <kbd class="kbd"><kbd class="kbd">⌘</kbd><kbd class="kbd">K</kbd></kbd>
  <kbd class="kbd"><kbd class="kbd">Ctrl</kbd><kbd class="kbd">Shift</kbd><kbd class="kbd">P</kbd></kbd>
  <kbd class="kbd"><kbd class="kbd">⇧</kbd><kbd class="kbd">Enter</kbd></kbd>
</div>

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

<kbd class="kbd"><kbd class="kbd">Ctrl</kbd> + <kbd class="kbd">C</kbd></kbd>

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.

<p>Press <kbd>?</kbd> on any docs page to open the shortcut sheet, or hit <kbd><kbd>⌘</kbd><kbd>K</kbd></kbd> to jump to search.</p>

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.

<div class="demo-row">
  <button type="button" class="btn btn--neutral">
    Search
    <kbd class="kbd">/</kbd>
  </button>
  <button type="button" class="btn btn--outline btn--neutral">
    Command palette
    <kbd class="kbd"><kbd class="kbd">⌘</kbd><kbd class="kbd">K</kbd></kbd>
  </button>
</div>

Customization

Four variables retune .kbd without touching component CSS. Override on the element, on a parent scope, or on :root. The cascade scopes the change. The same variables retune the bare <kbd> rule inside .prose, except padding defaults switch to em-based so prose chips track the surrounding font.