Components/Data Display/Kbd

Kbd

Data Display

Keyboard key badge — renders ⌘ K as styled chips.

Renders a single keyboard key in a styled <kbd> element. Combine multiple Kbd components to show keyboard shortcuts in documentation or tooltips.

Usage

import { Kbd } from "nosible-ux"

export default function Example() {
  return <Kbd>K</Kbd>
}

Examples

Shortcut combination

Ctrl+B

In context

Press Cmd+K to open the command palette.

Accessibility

<kbd> is the semantic HTML element for keyboard keys. Screen readers announce it as keyboard input.

Props

Name TypeDefaultDescription
children
ReactNodeThe keyboard key label, e.g. `⌘` or `K`.