Kbd

Displays keyboard shortcuts as styled key badges.

Examples

Default

CtrlK

<Kbd keys="mod+k" />

Sizes

SmallCtrlK

Medium (default)CtrlK

LargeCtrlK

<div className={styles.list}>
  <div className={styles.row}>
    <Text as="span" type="body">
      Small
    </Text>
    <Kbd keys="mod+k" size="sm" />
  </div>
  <div className={styles.row}>
    <Text as="span" type="body">
      Medium (default)
    </Text>
    <Kbd keys="mod+k" size="md" />
  </div>
  <div className={styles.row}>
    <Text as="span" type="body">
      Large
    </Text>
    <Kbd keys="mod+k" size="lg" />
  </div>
</div>

Single Key

Esc

<Kbd keys="escape" />

All Special Keys

mod (⌘ on Mac, Ctrl elsewhere)Ctrl

ctrl⌃

alt⌥

shift⇧

enter↵

backspace⌫

escapeEsc

tab⇥

up↑

down↓

left←

right→

plus+

<div className={styles.list}>
  {[
    ['mod', 'mod (⌘ on Mac, Ctrl elsewhere)'],
    ['ctrl', 'ctrl'],
    ['alt', 'alt'],
    ['shift', 'shift'],
    ['enter', 'enter'],
    ['backspace', 'backspace'],
    ['escape', 'escape'],
    ['tab', 'tab'],
    ['up', 'up'],
    ['down', 'down'],
    ['left', 'left'],
    ['right', 'right'],
    ['plus', 'plus'],
  ].map(([keys, label]) => (
    <div className={styles.row} key={keys}>
      <Text as="span" type="body">
        {label}
      </Text>
      <Kbd keys={keys} />
    </div>
  ))}
</div>

Platform Adaptive

Mac⌘K

Non-MacCtrlK

Live (your platform)CtrlK

<div className={styles.list}>
  <div className={styles.row}>
    <Text as="span" type="body">
      Mac
    </Text>
    <kbd aria-label="Command+K" className={styledKbd}>
      <kbd className={kbdRecipe({size: 'md'}).key}>⌘</kbd>
      <kbd className={kbdRecipe({size: 'md'}).key}>K</kbd>
    </kbd>
  </div>
  <div className={styles.row}>
    <Text as="span" type="body">
      Non-Mac
    </Text>
    <kbd aria-label="Control+K" className={styledKbd}>
      <kbd className={kbdRecipe({size: 'md'}).key}>Ctrl</kbd>
      <kbd className={kbdRecipe({size: 'md'}).key}>K</kbd>
    </kbd>
  </div>
  <div className={styles.row}>
    <Text as="span" type="body">
      Live (your platform)
    </Text>
    <Kbd keys="mod+k" />
  </div>
</div>

Shortcuts

Open command paletteCtrlK

SaveCtrlS

Navigate↑↓↵

<div className={styles.list}>
  <div className={styles.row}>
    <Text as="span" type="body">
      Open command palette
    </Text>
    <Kbd keys="mod+k" />
  </div>
  <div className={styles.row}>
    <Text as="span" type="body">
      Save
    </Text>
    <Kbd keys="mod+s" />
  </div>
  <div className={styles.row}>
    <Text as="span" type="body">
      Navigate
    </Text>
    <Kbd keys="up+down+enter" />
  </div>
</div>

Custom Style

CtrlK

<Kbd keys="mod+k" className={css({fontSize: 'lg'})} style={{opacity: 0.7}} />

Inline With Text

Press CtrlK to open the command palette.

<Text as="p" type="body">
  Press <Kbd keys="mod+k" /> to open the command palette.
</Text>

API

Kbd

Displays keyboard shortcuts as styled key badges.

Prop	Type	Default	Description
className	string	—	Additional CSS class names applied to the root element.
data-testid	string	—	Test ID applied to the root element.
keys*	string	—	Keyboard shortcut string. Use "+" to separate keys. Special keys: mod, ctrl, alt, shift, enter, backspace, escape, tab, up, down, left, right, plus.
ref	Ref<HTMLElement>	—	Ref forwarded to the root element.
size	"sm" | "md" | "lg"	'md'	Size of the key badges.
style	CSSProperties	—	Inline styles applied to the root element.