Kbd

Describe keyboard input using native keyboard markup.

View source Explore Storybook

Interactive preview

Live specimenTry the component

Open search CtrlKMove between tabs with ArrowLeft and ArrowRight.

Kbd describes a shortcut; it does not install a key handler.

Installation

Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.

Terminal

npx antiflex-ui@0.1.0-alpha.2 add kbd

This site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.

Usage

React

<KbdGroup aria-label="Control plus K">
  <Kbd>Ctrl</Kbd><span aria-hidden="true">+</span><Kbd>K</Kbd>
</KbdGroup>

API reference

All components forward native attributes, className, and refs to their underlying elements.

Prop	Type	Default
`Kbd`	`Native kbd attributes / ref`	`—`
`KbdGroup`	`Native span attributes / ref`	`—`

Accessibility

Kbd is a label for a real shortcut, not a key handler or button. Spell out ambiguous symbols with an accessible label and hide redundant separators. Actual shortcuts must be implemented separately and must not hijack text input or browser commands. Keep platform-specific shortcut labels accurate.