Kbd
Kbd renders a styled keyboard key indicator. Use it to display keyboard shortcuts and key combinations.
Basic Usage
Press Ctrl + C to copy.
import { Kbd } from "@paramanu/typography-react"
export default function App() {return <p>Press <Kbd>Ctrl</Kbd> + <Kbd>C</Kbd> to copy.</p>}<p>Press <kbd class="pm-kbd pm-kbd--md">Ctrl</kbd> + <kbd class="pm-kbd pm-kbd--md">C</kbd> to copy.</p>Accessibility
Uses the semantic <kbd> HTML element for keyboard input. Screen readers will identify the content as keyboard input.
React Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | "xs" | "sm" | "md" | "lg" | "md" | Size |
variant | "default" | "outline" | "subtle" | "default" | Visual variant |
CSS Classes
| Class | Purpose |
|---|---|
pm-kbd | Base |
pm-kbd--{size} | Size |
pm-kbd--outline | Outline variant |
pm-kbd--subtle | Subtle variant |