Import
import { Kbd } from "@sugarcoat/ui-nxt";Usage
<Kbd>Ctrl</Kbd> + <Kbd>C</Kbd>Basic Usage#
Display individual keyboard keys.
Single Key
Key Combinations#
Show keyboard shortcuts with multiple keys.
Copy Shortcut
Save Shortcut
Undo Shortcut
Mac Shortcuts#
Display Mac-style keyboard shortcuts.
Mac Copy
Mac Save
Mac Screenshot
Special Keys#
Common special keys and symbols.
Special Keys
Arrow Keys
Function Keys#
Function Keys
In Context#
Using Kbd within documentation or UI text.
Documentation Context
Inline Usage#
Using Kbd within paragraph text.
Inline
Instructions
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Key label to display |
| size | "1"-"12" | "normal" | "inherit" | - | Font size (inherited from typography) |
| weight | "1"-"9" | "normal" | "bold" | "inherit" | - | Font weight (inherited from typography) |
Common Key Symbols#
| Key | Symbol | Description |
|---|---|---|
| Command | ⌘ | Mac Command key |
| Option | ⌥ | Mac Option/Alt key |
| Shift | ⇧ | Shift key |
| Control | ⌃ | Control key |
| Return | ↵ | Return/Enter key |
| Escape | ⎋ | Escape key |
| Delete | ⌫ | Delete/Backspace key |
| Tab | ⇥ | Tab key |