Kbd
Kbd renders the native <kbd> element for keyboard input while applying Manti
typography, surface, radius, spacing, and elevation tokens.
⌘+KEnter
Use separate Kbd elements for each key in a combination so assistive technology and copied text preserve the shortcut structure.
API
Kbd accepts every native <kbd> attribute in addition to the props below.
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'sm' | Visual size of the key cap. |
Styling
Anatomy
| Part | Selector | Description |
|---|---|---|
root | [data-scope="kbd"][data-part="root"] | The semantic <kbd> element. |
Tokens
| Token | Controls |
|---|---|
--manti-kbd-radius | radius |
--manti-kbd-padding-x | padding x |
--manti-kbd-padding-y | padding y |
--manti-kbd-font-size | font size |
--manti-kbd-border-width | border width |