Kbd v0.1.0 Data display

Keyboard key cap for shortcuts in docs and menus.

import { Kbd } from "latticeui-react";

Examples

Shortcuts

Press ⌘ K to open the command palette, or ? for help.

Show code

Press <Kbd>⌘</Kbd> <Kbd>K</Kbd> to open the command palette.

Anatomy

These data-part attributes are a versioned public API - style and test against them; they will not change in a minor release.

Part	Element	Stable selector
`root`	`kbd`	`[data-scope="kbd"][data-part="root"]`

Props

Prop	Type	Default	Description
`...rest`	`React.HTMLAttributes<HTMLElement>`	—

Accessibility

Roles:

Styling

Override styles by targeting the stable selectors below from any unlayered CSS - it always beats the library's @layer latticeui styles, no !important needed.

[data-scope="kbd"][data-part="root"] {
  /* your overrides */
}