Keyboard hint chip for shortcuts and key chords.
Also known as: keyboard shortcut, keycap, hotkey, shortcut chip, kbd
Install with the CLI, or copy the component source into your project.
Add kbd (npm)
1npx --yes -p github:itsvigneshv/default-file-ui#main df-ui add kbd
Keyboard hint chip at size sm.
sm for menu slots. md for larger inline chrome.
Compact Unicode chords for common shortcuts.
Compose KbdAbbr and KbdContent for explicit control.
Pass shortcut on DropdownMenuItem to render Kbd trailing.
Kbd in List Item trailing.
Keyboard hint chip for shortcuts and key chords. Pass a compact Unicode string such as ⌘K, or compose KbdAbbr and KbdContent. Display only; the host owns bindings.
| Prop | Type | Default | Notes |
|---|---|---|---|
| size | "sm" | "md" | "sm" | Chip density. sm for menu trailing slots. md for larger inline chrome. |
| children | ReactNode | - | Unicode chord such as ⌘K, or compose KbdAbbr and KbdContent. Textual forms such as Ctrl+K are not parsed. |
| aria-label | string | - | Accessible name for the chip. Derived from string children when omitted. String-chord parts are presentational when a name is set. |
| className | string | - | Additional styles on the chip. |
| …HTML attributes | ComponentProps<"kbd"> | - | Standard kbd element attributes. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| title | string | - | Accessible expansion for the modifier or special key, such as Command for ⌘. |
| children | ReactNode | - | Unicode key glyph such as ⌘, ⇧, ⌥, or ⌫. |
| className | string | - | Additional styles on the abbr. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| kind | "key" | "punct" | "key" | key for Latin characters. punct for punctuation such as a comma. |
| children | ReactNode | - | Key label such as K, P, or ,. |
| className | string | - | Additional styles on the content span. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| value | unknown | - | Returns true when value is a non-empty shortcut string after trim. |
Theme defaults live on :root. Override these globally or on a local host.
| Token | Type | Default | Notes |
|---|---|---|---|
| --df-kbd-bg | color | var(--df-neutral-100) | Chip fill. |
| --df-kbd-fg | color | var(--muted-foreground) | Chord ink. |
| --df-kbd-radius | CSS length | var(--radius-sm) | Corner radius. |
| --df-kbd-font-size-sm | CSS length | var(--df-text-xs) | Type size at size sm. |
| --df-kbd-font-size-md | CSS length | var(--df-text-xs) | Type size at size md. |
| --df-kbd-height-sm | CSS length | calc(5 * var(--spacing-unit)) | Chip height at size sm. |
| --df-kbd-height-md | CSS length | calc(5.5 * var(--spacing-unit)) | Chip height at size md. |
| --df-kbd-padding-inline-sm | CSS length | calc(2 * var(--spacing-unit)) | Horizontal padding at size sm. |
| --df-kbd-padding-inline-md | CSS length | calc(2.5 * var(--spacing-unit)) | Horizontal padding at size md. |
| --df-kbd-min-width-sm | CSS length | calc(5 * var(--spacing-unit)) | Minimum chip width at size sm. |
| --df-kbd-min-width-md | CSS length | calc(5.5 * var(--spacing-unit)) | Minimum chip width at size md. |
| --df-kbd-glyph-gap | CSS length | 0.12em | Space between chord parts. |
| --df-kbd-mod-optical-shift | CSS length | 0em | Optional vertical nudge for modifier abbrs. Defaults to 0. |
| --df-kbd-punct-optical-shift | CSS length | 0em | Optional vertical nudge for punctuation content. Defaults to 0. |