Kbd
Keyboard hints set apart from the surrounding sentence.
Live — this one is real
Press ⌘ + K to open your command palette.
Usage
import { Kbd } from "mizu-ui";
export function Example() {
return (
<p>
Press <Kbd>⌘</Kbd> + <Kbd>K</Kbd> to open your command palette.
</p>
);
}
Source & setup
Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.
Inspect content/Typography.tsx
Source is included in the npm package under src/content/Typography.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Key name or chord. |
| ...props | HTMLAttributes | — | Native kbd attributes. |
Accessibility
Native kbd semantics. This displays a hint; keyboard handlers belong to the associated feature.
Motion
Static typographic cue.