Shortcut
The keys of one shortcut, the glyph spoken by name.
<Kbd.Group>
<Kbd label="Command">⌘</Kbd>
<Kbd>K</Kbd>
</Kbd.Group>Kbd
Draws a keyboard key on a keycap, alone or as one shortcut.
Preview
<Kbd>Esc</Kbd>Usage
Use when
- Showing the keyboard shortcut for an action
- Naming a key inside help copy
- A shortcut hint in a menu row, tooltip or field
Avoid when
- Inline code or a command to copy — use CodeBlock or Text type="code"
- A status or count — use Badge
- Anything clickable — keys are hints, not buttons
Implementation notes
- One key per Kbd; the keys of one shortcut go in Kbd.Group
- Glyph keys carry a label so they are spoken by name
- Print the platform's own glyphs (⌘ on macOS, Ctrl elsewhere)
Installation
pnpm add @usefragments/uiImport styles once from @usefragments/ui/styles. See the installation guide for framework and theme setup.
Anatomy
Import Kbd once, then compose its parts with dot notation.
Kbd.Group
Examples
API reference
Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | React.ReactNode | Not set | The key as it is printed: a glyph or a short word |
Group.childrenRequired | React.ReactNode | Not set | The keys of one shortcut, pressed together, as `Kbd` children. |
label | string | undefined | Not set | The key's spoken name for a glyph a screen reader cannot say. The glyph is then hidden from assistive tech. |
Accessibility
- Renders native kbd elements; a shortcut is a kbd that holds kbds
- label hides the glyph and speaks the name instead
- A keycap never takes focus
Related components
Next steps
- Accessibility guidanceThe keyboard, focus and naming rules every component carries.
- Every componentThe catalog, grouped by what each component does.