Kbd
DisplayInline keyboard shortcut badge using the semantic <kbd> element.
Playground
⌘K
Controls
Badge size.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' | Controls padding and font size. |
Examples
Small
ESC
vue
<DsKbd size="sm">
ESC
</DsKbd>Medium
⌘K
vue
<DsKbd size="md">
⌘K
</DsKbd>Large
Enter
vue
<DsKbd size="lg">
Enter
</DsKbd>Combo
Ctrl+Shift+P
vue
<DsKbd size="md">
Ctrl+Shift+P
</DsKbd>Accessibility
- Uses semantic <kbd> HTML element.
- Readable by screen readers as keyboard input.