CynosureComponents / Feedback and display
Kbd
A keyboard shortcut shown as drawn key caps. Screen readers get a spoken combination instead ("Control plus K").
UsageLink to "Usage"
tsx
import { Kbd } from "@arshad-shah/cynosure";
<Kbd keys={["Ctrl", "K"]} />
<Kbd keys={["Cmd", "Shift", "P"]} size="sm" />
<Kbd keys={["⌘", "K"]} label="Command K" />keys lists the keys in order. Keys are joined by a drawn separator, not a "+" character. size is sm, md (default) or lg.
Spoken textLink to "Spoken text"
Common names are spoken in full: Ctrl as Control, Cmd as Command, Esc as Escape, and so on. For symbols or unusual keys, set label to say what you mean.
PropsLink to "Props"
| Prop | What it does | Type | Default |
|---|---|---|---|
keysRequired | Keys in order, e.g. ["Ctrl", "K"]; or a shortcut as useHotkey writes it ("mod+k"), shown with this platform's names (Cmd on Apple, Ctrl elsewhere) and hidden on touch-only screens, where a shortcut means nothing. | string | string[] | |
size | Size of the key caps. Default "md". | Size | "md" |
label | Override the spoken text (default "Control plus K"). | string | |
className | Added to the root element, for layout. | string | |
style | Layout only. | CSSProperties |
Generated from the type definitions in @arshad-shah/cynosure 0.5.0.
ThemingLink to "Theming"
Tokens: --cy-kbd-radius, --cy-kbd-bg and --cy-kbd-border.
ts
createTheme({ components: { kbd: { radius: "6px" } } });RelatedLink to "Related"
These examples run Cynosure 0.5.0 (commit 50ce30b), the version on npm.