Kbd

Esc

Usage

import { Kbd } from '@epilot/spark-ui/kbd'

<p>
  Press <Kbd>⌘</Kbd> <Kbd>K</Kbd> to search your contracts.
</p>

Use one Kbd per key. It renders a <kbd> element at the height of a Badge, so it sits on a line of text without pushing the line apart.

Press ⌘ K to search your contracts.

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	The key label.
`className`	`string`	—	Merges with the base styles.

Other HTML element props pass through.

Kbd renders a native <kbd> element, so the key is part of the text and screen readers read it in place.
Screen readers read symbols such as ⌘ or ↵ inconsistently, if at all. Where the key matters, name it in the surrounding text too, for example Press Enter (<Kbd>↵</Kbd>).