ObjectUIComponentsData Display
Kbd
Display keyboard shortcuts and hotkeys
The Kbd component displays keyboard shortcuts in a styled format.
Basic Usage
Copy Shortcut
{
"type": "kbd",
"keys": [
"Ctrl",
"C"
]
}Multiple Key Combinations
Command Palette
{
"type": "kbd",
"keys": [
"Ctrl",
"Shift",
"P"
]
}Search
{
"type": "kbd",
"keys": [
"Cmd",
"K"
]
}Submit
{
"type": "kbd",
"keys": [
"Alt",
"Enter"
]
}Schema
interface KbdSchema {
type: 'kbd';
keys: string[]; // Keyboard keys
className?: string;
}Examples
In Documentation
Inline Usage
{
"type": "flex",
"align": "center",
"gap": 2,
"children": [
{
"type": "text",
"value": "Press"
},
{
"type": "kbd",
"keys": [
"Ctrl",
"S"
]
},
{
"type": "text",
"value": "to save"
}
]
}