#129
Shortcuts in text
Keyboard key caps inline in a sentence describing the Ctrl+K shortcut to open the command palette and Esc to close it.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Shortcuts in text" pattern (@codeatlasdev/ui demo #129, display/kbd) in my app.
Call get_demo({ ids: ["#129"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Documenting keyboard shortcuts inside help text, tooltips or onboarding hints.
Keep these library parts, with the props and tokens the demo uses:
- Kbd from "@codeatlasdev/ui"
Behaviour to keep:
- `<Kbd>Ctrl</Kbd>` and `<Kbd>K</Kbd>` joined by a plus sign inside a paragraph
- `<Kbd>Esc</Kbd>` as the second shortcut in the same sentence
- Each key is plain text children of `Kbd`, no props
Reduced motion: the demo handles it; keep that branch.
Keyboard: not an interactive control.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- Kbd
@codeatlasdev/ui
How it is built
- `<Kbd>Ctrl</Kbd>` and `<Kbd>K</Kbd>` joined by a plus sign inside a paragraph
- `<Kbd>Esc</Kbd>` as the second shortcut in the same sentence
- Each key is plain text children of `Kbd`, no props
Related
Loading source.