Kbd

A keyboard key or shortcut.

⌘ KEscSave a draft with ⌘ S

Kbd.tsx

import {Kbd, Text} from 'alinea/components'

export function KbdExample() {
  return (
    <>
      <Kbd>⌘ K</Kbd>
      <Kbd size="sm">Esc</Kbd>
      <Text>
        Save a draft with <Kbd>⌘</Kbd> <Kbd>S</Kbd>
      </Text>
    </>
  )
}

Props

A keyboard key or shortcut, eg. <Kbd>⌘ K</Kbd>

PropTypeDefaultDescription

size'sm' | 'default'Default 'default'

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.