Components Typography
Kbd
StableDisplays a keyboard key or shortcut with spoken labels for symbols.
Kbd shows a single key, or a shortcut given as `keys`. Modifier names such as mod, shift and alt render as symbols, and each symbol also carries a text label, so screen readers say “Command plus K” rather than reading the glyph.
Overview
Command + K
import { Kbd } from '@bindshq/stance-react';
export function Basic() {
return <Kbd keys={['mod', 'k']} />;
}Light, dark and high contrast
Every Stance component is designed and tested in all three appearance modes.
Command + K
Command + K
Command + K
Import
import { Kbd } from '@bindshq/stance-react';Examples
EscEnterShift + TabUp arrowDown arrow
import { Kbd } from '@bindshq/stance-react';
export function Single() {
return (
<div style={{ display: 'flex', gap: 8 }}>
<Kbd>Esc</Kbd>
<Kbd keys={['enter']} />
<Kbd keys={['shift', 'tab']} />
<Kbd keys={['up']} size="sm" />
<Kbd keys={['down']} size="sm" />
</div>
);
}Press Command + K to search templates.
Press Esc to close the dialog.
import { Kbd, Stack, Text } from '@bindshq/stance-react';
export function InText() {
return (
<Stack gap={2}>
<Text size="sm">
Press <Kbd keys={['mod', 'k']} size="sm" /> to search templates.
</Text>
<Text size="sm">
Press <Kbd size="sm">Esc</Kbd> to close the dialog.
</Text>
</Stack>
);
}API reference
| Prop | Type | Default | Description |
|---|---|---|---|
keys | string[] | None | Keys of a combination, e.g. ["mod", "k"]. |
size | 'sm' | 'md' | 'md' | Key size. |
children | ReactNode | None | A single key when keys is omitted. |
Accessibility
- Uses nested <kbd> elements, the HTML idiom for key combinations.
- Symbols are aria-hidden and paired with visually hidden names.
Usage guidelines
Do
- Show the platform-appropriate modifier.
Don’t
- Use Kbd for non-keyboard input.