Usage
Renders a keyboard shortcut as styled key badges. Use Kbd in tooltips, menus, and help text to show key combinations.import {XDSKbd} from '@xds/core/Kbd'
Best practices
|
| Do | Place shortcuts near the action they trigger — in a tooltip, menu item, or inline instruction. |
| Do | Use mod instead of ctrl or cmd — it automatically adapts to the user's platform. |
| Don't | Use Kbd as the only way to discover an action — shortcuts should supplement visible controls, not replace them. |
Examples
Common configurations, variations, and states.Kbd — Inline Instructions
Keyboard shortcuts rendered inline within instructional text
Kbd — Menu Shortcuts
Menu-style list pairing action labels with their keyboard shortcuts
Kbd — Modifier Combinations
Modifier combinations and special keys rendered as shortcut badges