Kbd
One key on the keyboard, drawn as a keycap.
Preview
tsx
import { Kbd } from '@kerf-js/veneer'export function Keys() { return ( <> <Kbd>⌘</Kbd> <Kbd>Shift</Kbd> <Kbd>Esc</Kbd> <Kbd>Enter</Kbd> <Kbd>↑</Kbd> </> )}Installation
npm install @kerf-js/veneerTry it
Change the controls: the preview and its code update together. The address keeps what you set, so you can link to it.
Live preview
Controls
Codeupdates as you change the controls
import { Kbd } from '@kerf-js/veneer'<Kbd>Esc</Kbd>Usage
tsx
import { Kbd } from '@kerf-js/veneer'<Kbd>Esc</Kbd>A combination
One Kbd for each key.
tsx
import { Kbd, Row } from '@kerf-js/veneer'export function Combo() { return ( <Row gap="hair"> <Kbd>⌘</Kbd> <Kbd>Shift</Kbd> <Kbd>P</Kbd> </Row> )}In a sentence
Wrap each key in Kbd to show it as a key inside a sentence.
tsx
import { Kbd, Text } from '@kerf-js/veneer'export function InSentence() { return ( <Text> Press <Kbd>⌘</Kbd> <Kbd>K</Kbd> to search, or{' '} <Kbd>Esc</Kbd> to close. </Text> )}A list of shortcuts
Put one Kbd per key in a row to list shortcuts beside what they do.
tsx
import { Kbd, Row, Stack, Text } from '@kerf-js/veneer'export function ShortcutList() { return ( <Stack gap="related" divided > {SHORTCUTS.map((s) => ( <Row key={s.does} justify="between" gap="group" > <Text>{s.does}</Text> <Row gap="hair"> {s.keys.map((k) => ( <Kbd key={k}>{k}</Kbd> ))} </Row> </Row> ))} </Stack> )}const SHORTCUTS = [ { keys: ['⌘', 'K'], does: 'Search commands' }, { keys: ['⌘', 'D'], does: 'Deploy' }, { keys: ['G', 'L'], does: 'Go to logs' }, { keys: ['?'], does: 'Show this list' },]When to use
Use it for
- Telling people about a keyboard shortcut
Reach for something else
- Code, when it is something to type, not a key to press
Accessibility
- It is a real
<kbd>. For symbols like ⌘, say the name nearby where it matters.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
children | unknown | — | What it contains. |
RelatedTooltipCommand paletteCode