Kbd

When to use

• Keyboard shortcuts in help text: “Press ⌘ K”
• Shortcuts inside a Tooltip or a Menu item

Not for general code or values — use <code>.

Choosing between small labels:

Component	Use it for	For example
Badge	The status or category of something, at a glance	“Paid”, “Overdue”, “Beta”
Chip	Tags, filters and metadata, often several in a row	“React”, “Remote”, an applied filter
Kbd	A key on the keyboard, in text or a tooltip	Press ⌘ K to search

Press ⌘ K to search, Esc to close, and Shift Tab to go back.

import { Kbd } from '@arun-dev/ui';

export default function KbdBasics() {
  return (
    <p style={{ margin: 0 }}>
      Press <Kbd>⌘</Kbd> <Kbd>K</Kbd> to search, <Kbd>Esc</Kbd> to close, and <Kbd>Shift</Kbd>{' '}
      <Kbd>Tab</Kbd> to go back.
    </p>
  );
}

Kbd is a styled <kbd>, for a key in running text. Write a combination as keys side by side. It sizes with the surrounding text.

Props

Kbd props

Prop	Type	Default	Description
className	string	—	Concatenated with the component's own classes, never replacing them.
render	ReactElement	—	Element or component to render instead of the default. Props, className, event handlers and ref are merged onto it.
ref	Ref<HTMLElement>	—	Ref to the rendered element. Merged with any ref on the render element.
…rest	HTMLAttributes	—	Anything else is spread onto the rendered element, so id, aria-*, data-* and event handlers all reach the DOM.