Kbd
Keyboard shortcut display. Use KbdGroup to compose multi-key combos.
Install
Import path
Examples
Group
Use the KbdGroup component to group keyboard keys together.
Use Ctrl + BCtrl + K to open the command palette
Input Group
You can use the Kbd component inside a InputGroupAddon component to display a keyboard key inside an input group.
RTL
Right-to-left layout support for languages such as Arabic and Hebrew.
Translations are AI-generated for demonstration and may be imperfect.
Tooltip
You can use the Kbd component inside a Tooltip component to display a tooltip with a keyboard key.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import { Kbd, KbdGroup } from "@codefast/ui/kbd";
<KbdGroup>
<Kbd>⌘</Kbd>
<Kbd>K</Kbd>
</KbdGroup>
API reference
Props for each part of the component. All native element props are also forwarded.
Kbd
A single keyboard key.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | The key label, e.g. ⌘, Ctrl, Enter. |
KbdGroup
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Several Kbd elements that form one shortcut. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
- Kbd is presentational — it doesn’t bind any keyboard behaviour itself.
- Use real key names so the shortcut reads correctly to everyone.
- Match the symbols to the user’s platform (⌘ on macOS, Ctrl elsewhere) when you can.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Use to document shortcuts in menus, tooltips, and help text.
- Group multi-key combos with KbdGroup.
Don’t
- Don’t use Kbd for non-keyboard content.
- Don’t invent symbols users won’t recognise.