Kbd

A keyboard key shown as a key cap. A combination is several Kbd side by side (in code, <Kbd keys={[...]} />).

The snippet an agent gets

import { Kbd } from '@basiiik/ui';<Kbd>Esc</Kbd>

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it ships.

npm install @basiiik/uiimport { Kbd } from '@basiiik/ui';

Native attributes such as className, id and data-* go to the root element.

States. No states: it is static text.

A <kbd> is read as its text; give symbols a word nearby when they matter ("⌘" is read as "command" by most screen readers)
A combination is nested <kbd> elements, the HTML way of marking keys pressed together

color.bg.subtlecolor.border.defaultcolor.text.secondary