Kbd
One key on the keyboard, drawn as a keycap.
SourcePackage @weft-js/warpPlayground
Preview
tsx
import { Kbd } from '@weft-js/warp'export function Keys() { return ( <> <Kbd>⌘</Kbd> <Kbd>Shift</Kbd> <Kbd>Esc</Kbd> <Kbd>Enter</Kbd> <Kbd>↑</Kbd> </> )}Installation
npm install @weft-js/warpUsage
tsx
import { Kbd } from '@weft-js/warp'<Kbd>Esc</Kbd>A combination
One Kbd for each key.
tsx
import { Kbd, Row } from '@weft-js/warp'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 '@weft-js/warp'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 '@weft-js/warp'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
Playground
import { Kbd } from '@weft-js/warp'<Kbd>Esc</Kbd>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