Kbd
A keyboard key or shortcut, shown as text.
Left out of Content first Most readers visit now and then and see the interface fresh each time. Shortcuts serve repeat experts, and command is left out too. Use instead: Button
See it live
npm run storybookWhen to use it
- Use it when: Telling people the shortcut for an action.
- Not when: Decoration, or the only way to discover an action.
Instead:
- Command: Where shortcuts are often listed.
Words
- Write to one person: "you", not "users".
- Short sentences with room to breathe.
- Explain why before asking for anything.
- Use: Read, Save for later, You, Next issue. Avoid: Click here, Submit, Users, Content.
The labels components use, from the voice tokens:
content.action.commit: Savecontent.action.cancel: Not nowcontent.action.destroy: Removecontent.action.retry: Try againcontent.action.empty-action: Browse guides
See Voice and tone for the whole voice.
Use it in code
npx open-ds add kbd
The component reads only component keys and semantic tokens, so it follows the brand and mode on <html>.
Tokens it reads
Kbd reads 10 tokens of its own, each an alias of a semantic token. Each row is one part: its own token, the semantic it aliases, and the value it ends at. Change a semantic and every component that reads it follows; override one of Kbd's tokens to change Kbd alone.
Content first decides what changes when you switch theme. Here a switch changes colors only, so the marked rows differ between light and dark; everything else holds steady.
| Part | Its token and the semantic it aliases | Value |
|---|---|---|
| Kbd | ||
| Gap | component.kbd.gapspace.gap.tightvar(--kbd-gap) | space.8:0.5rem |
| Corner | component.kbd.radiusradius.badgevar(--kbd-radius) | radius.999:9999px |
| Fill Changes with theme | component.kbd.backgroundcolor.surface.sunkenvar(--kbd-background) | Lightstone.light.100:#F6F2EADarkstone.dark.100:#2E2A24 |
| Padding, left and right | component.kbd.padding-xcomponent-spacing-map.x1var(--kbd-padding-x) | space.4:0.25rem |
| Text size | component.kbd.font-sizetype.caption.font-sizevar(--kbd-font-size) | font.size.14:0.875rem |
| Weight | component.kbd.font-weighttype.label.font-weightvar(--kbd-font-weight) | font.weight.600:600 |
| Text Changes with theme | component.kbd.labelcolor.text.mutedvar(--kbd-label) | Lightstone.light.600:#61594DDarkstone.dark.400:#A39A8B |
| Background 2 Changes with theme | component.kbd.background-2color.surface.canvasvar(--kbd-background-2) | Lightstone.light.50:#FFFDF8Darkstone.dark.0:#14110D |
| Label 2 Changes with theme | component.kbd.label-2color.surface.canvasvar(--kbd-label-2) | Lightstone.light.50:#FFFDF8Darkstone.dark.0:#14110D |
| Group | ||
| Gap | component.kbd.group.gapspace.gap.tightvar(--kbd-group-gap) | space.8:0.5rem |