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>

Uses the semantic <kbd> HTML element for keyboard input. Screen readers will identify the content as keyboard input.

Prop	Type	Default	Description
`size`	`"xs" \| "sm" \| "md" \| "lg"`	`"md"`	Size
`variant`	`"default" \| "outline" \| "subtle"`	`"default"`	Visual variant