Kbd
A keyboard shortcut drawn as a key cap
Import
import { Kbd } from "@nyte-ai/ui/kbd";Shows the shortcut for a command, one key cap per key, beside the command's label.
Usage
- Pass one string per key in display order.
Examples
⌘K⇧⌘D⌘N
<Kbd keys={["⌘", "K"]} />
<Kbd keys={["⇧", "⌘", "D"]} />
<Kbd keys={["⌘", "N"]} plain />Props
Native <kbd> attributes pass through.
| Prop | Type | Default | Description |
|---|---|---|---|
keys | readonly string[] | ||
plain | boolean | false | No fill and no padding. |
xstyle | XStyle | See Theming. | |
className | string | See Theming. | |
style | React.CSSProperties | See Theming. |
Accessibility
- Renders a
<kbd>with one<span>per key.