Components / Typography

Kbd

Kbd renders a <kbd> element styled as a physical key — monospace type, a thin border, a slight elevation. Use it for keyboard-shortcut labels inside running text.

Loading playground…

What it is

A Text rendered as <kbd> with a monospace font, a bordered surface, and a raised background. One key per Kbd — for a multi-key shortcut, render several Kbd elements side by side with a separator between them.

Install

Kbd is exported from usemotif. No separate install.

example.tsx

import { Kbd } from 'usemotif';

API

Kbd

stable

function Kbd(props: KbdProps): JSX.Element

…TextPropsOmit<TextProps, "as">

Every Text prop except `as` — Kbd always renders `<kbd>`. Style props override the key-cap defaults.

Examples

A single key:

example.tsx

<Paragraph>
Press <Kbd>Esc</Kbd> to close.
</Paragraph>

A multi-key shortcut:

example.tsx

<HStack gap="$1" alignItems="center">
<Kbd>⌘</Kbd>
<Text color="$colors.text.muted">+</Text>
<Kbd>K</Kbd>
</HStack>