Kbd New Alpha Light DOM & Tailwind
Displays a keyboard key, such as a shortcut or a key the user should press.
Usage
Kbd displays a keyboard key, such as a shortcut or a key the user should press. Group the keys of a multi-key shortcut together with Kbd Group.
Import the parts you need — each import registers its custom element:
import "@nordhealth/components/lib/Kbd"
import "@nordhealth/components/lib/KbdGroup"
Then place a key, or group several together:
Composition
Kbd renders a single key. To represent a multi-key shortcut, wrap several keys in a Kbd Group.
KbdGroup
├── Kbd
└── Kbd
<nord-kbd-group>
<nord-kbd>Ctrl</nord-kbd>
<nord-kbd>K</nord-kbd>
</nord-kbd-group>
Kbd Group
Kbd Group lays out a set of Kbd keys together, for example to represent a multi-key shortcut such as Ctrl K. The default slot accepts Kbd elements, and you can place other inline content such as a + separator between them.
Examples
Inline in text
A Kbd Group reads naturally inline within a sentence to describe a shortcut.
Inside a button
Place a Kbd inside a Button to surface the key that triggers it.
Inside an input
Use a Kbd Group in an Input end slot to hint at the shortcut that focuses the field.
Inside a tooltip
Show the keyboard shortcut for an action inside a Tooltip.
RTL
Kbd follows the document or container direction. Toggle the direction to see the layout mirror.
Accessibility
- Use Kbd for keyboard keys and shortcuts only — for inline code, use a
<code>element instead so assistive technology conveys the right meaning. - Don't rely on Kbd alone to convey an action; always pair it with a descriptive label, such as the button or menu text it sits beside.
- Use the same casing and symbols the user sees on their physical keyboard so the displayed key matches what they press.
API reference
Kbd
Kbd is used to display a keyboard key, such as a shortcut or a key the user should press. Group related keys together with Kbd Group.
<nord-kbd></nord-kbd>Props
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
size | size | The size of the key. Each value maps to the matching font-size token
(xs→--n-font-size-xs … l→--n-font-size-l); xs suits dense
surfaces like dark tooltips, l is for more prominent keys. | 'xs' | 's' | 'm' | 'l' | 'm' |
variant | variant | The colour variant. default follows the active layout theme; light and
dark pin the key to fixed light/dark colours regardless of the theme
(e.g. a dark key on a dark tooltip). | 'default' | 'light' | 'dark' | 'default' |
borderless | borderless | Removes the border and drop shadow, for a flat key with no outline. | boolean | false |
emphasize | emphasize | Raises the text contrast — the theme's main text colour (--n-color-text)
on the default variant, or the pinned high-contrast colour (dark text /
white) on the fixed light / dark variants. | boolean | false |
Slots
| Slot name | Description |
|---|---|
Default slot | Default slot for the key label (text or an icon). |
CSS Properties
CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.
| Property | Description | Default |
|---|---|---|
--n-kbd-color | Controls the text color of the key. | var(--n-color-icon) |
--n-kbd-background-color | Controls the background color of the key. | var(--n-color-button) |
--n-kbd-padding-block | Controls the block padding of the key. Overrides the size default. | — |
--n-kbd-padding-inline | Controls the inline padding of the key. Overrides the size default. | — |
--n-kbd-font-size | Controls the font size of the key. Overrides the size default. | — |
--n-kbd-border-radius | Controls how rounded the corners are. | var(--n-border-radius-s) |
--n-kbd-border-width | Controls the border width of the key. | 1px |
--n-kbd-border-color | Controls the border color of the key. Overrides the variant default. | — |
--n-kbd-box-shadow | Controls the box shadow of the key. Overrides the variant default. | — |
Parts
This component is made up of the following parts.
Kbd Group
Kbd Group lays out a set of Kbd keys together, for example to represent a multi-key shortcut such as Ctrl K.
<nord-kbd-group></nord-kbd-group>Slots
| Slot name | Description |
|---|---|
Default slot | Default slot for Kbd elements. |
Design guidelinesFor designers
Usage
This section includes guidelines for designers and developers about the usage of this component in different contexts.
Do
- Use to display a keyboard key or shortcut, such as ⌘ K.
- Group the keys of a multi-key shortcut together with Kbd Group.
- Use the same casing and symbols the user sees on their keyboard.
Don’t
- Don’t use to style arbitrary inline code, use a
<code>element instead. - Don’t rely on Kbd alone to convey an action, always pair it with a descriptive label.