Kbd (Keyboard Key)
Used to display textual user input from a keyboard, such as shortcuts and key commands.
About
The Kbd component is a semantic element that indicates keyboard input. It's often used in documentation, tutorials, and application interfaces to communicate shortcuts (e.g., "Press ⌘K to search").
Installation
Run the following command to install the kbd component:
Usage
kbd-usage.ts
Default
Standard keyboard keys with symbols or text labels.
Basic usage⌘
Symbols
⌘⇧⌥⌃
Text Labels
CtrlAltShiftEnter
kbd-example-default.ts
Keyboard Groups
Use hlmKbdGroup to visually connect multiple related keys.
Standard Group⌘K
Complex ShortcutCtrlShiftP
With helper text in a paragraph
Press CtrlS to save your progress instantly.
kbd-example-group.ts
Inside Buttons
Enhance buttons by adding keyboard hints for accessibility and speed.
kbd-example-button.ts
Within Input Groups
Show shortcuts directly inside input fields using hlmInputGroupAddon.
kbd-example-input-group.ts
API Reference
Helm API
The Kbd component provides two main directives for keyboard styling.
| Directive | Selector | Description |
|---|---|---|
| HlmKbd | [hlmKbd] | Styling for a single keyboard key. |
| HlmKbdGroup | [hlmKbdGroup] | Container to group and visually connect multiple keys. |