Cajón Design System
Components

Kbd

Token-driven keyboard shortcut label for single keys and multi-key combos.

Patterns

Use children for a single key, or keys for multi-key shortcuts. Each key is rendered as an individual cap inside a single semantic <kbd> element.

Usage

import { Kbd } from '@cajon-ui/react';

<Kbd>Esc</Kbd>
<Kbd keys={['Cmd', 'K']} />
<Kbd keys={['Ctrl', 'Alt', '/']} size="sm" />

Props

PropTypeDefaultNotes
keysReactNode[]Multi-key sequence
sizesm | md | lgmdKeycap size

All other native <kbd> attributes pass through; the component forwards its ref.

On this page