All components (204)

Key

Typography · Kbd · .amset-kbd

What it is and when to use it

A keyboard key, inside a sentence: Esc, Ctrl, ⌘. It is drawn with a raised bottom edge so it reads as a key and not as code.

When to use it

A shortcut in a help text, a notice or a context menu: "Open the search with Ctrl + K".
One key per element. A shortcut with several keys is several Kbd with the separator in between as text (<Kbd>Ctrl</Kbd> + <Kbd>K</Kbd>), not a single one with "Ctrl+K" inside.
Its size is relative (0.8em): it follows the surrounding text, in a paragraph or in a small footer.

When not to

A piece of code or the name of a variable: Code.
The shortcut of each command in CommandPalette: it goes in its shortcut and the palette itself draws it.

Keyboard: it does not take part. It is not interactive: it shows a key, it does not listen to it.

Accessibility: it is a real <kbd>, the element HTML has for what is typed. With one key per element, each one reaches the accessibility tree separately, and not as a single word "Ctrl+K". A key never wraps inside.

Fine-tuning: --amset-kbd-background, --amset-kbd-color and --amset-kbd-border (the border, which is 2 px at the bottom to give the raised edge).

What it looks like

Press Ctrl and K to search.

<Text>Press <Kbd>Ctrl</Kbd> and <Kbd>K</Kbd> to search.</Text>

Props

Import it with import { Kbd } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`children`required	`ReactNode`	The key: `Esc`, `⌘`, `Ctrl`. Only one per element.
`className`	`string`	Merged with the library classes; it does not replace them.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-kbd-background`	`var(--amset-surface)`
`--amset-kbd-color`	`var(--amset-ink)`
`--amset-kbd-border`	`var(--amset-border-bold)`

How to change it

.amset-kbd {
  --amset-kbd-background: ...;
  --amset-kbd-color: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: