Components

Kbd

An inline .ds-kbd keycap for keyboard shortcuts — a small mono token on var(--ds-bg-alt) with a 1px rule and no radius. The flat take on a keycap; combine them with a separator for chords.

Keys

A single <kbd class="ds-kbd"> per key. It sits on the text baseline, so it reads inline within a sentence.

Single keys

Esc Tab ↵ ⌘ A

<kbd class="ds-kbd">Esc</kbd>
<kbd class="ds-kbd">Tab</kbd>
<kbd class="ds-kbd">↵</kbd>
<kbd class="ds-kbd">⌘</kbd>
<kbd class="ds-kbd">A</kbd>

Chords & inline use

Join keys with a plain + for a chord, and drop them straight into running text.

In a sentence

Press ⌘ + K to open the command palette, or Ctrl + Shift + P on Windows.

Press <kbd class="ds-kbd">⌘</kbd> + <kbd class="ds-kbd">K</kbd> to open the
command palette, or <kbd class="ds-kbd">Ctrl</kbd> + <kbd class="ds-kbd">Shift</kbd> +
<kbd class="ds-kbd">P</kbd> on Windows.

React

The Kbd component renders a <kbd class="ds-kbd">, forwards a ref and spreads any extra props onto the element.

<Kbd>

import { Kbd } from "@diametral/design-system/react";

<p>Press <Kbd>⌘</Kbd> + <Kbd>K</Kbd> to search.</p>