Keyboard Key

Keyboard key is a component to display which key or combination of keys performs a given action.


Installation

The above command is for individual installation only. You may skip this step if @nextui-org/react is already installed globally.

Import

Usage

Keys

Note: Check the API section to see all available keys.

Slots

  • base: Kbd wrapper, it handles alignment, placement, and general appearance.
  • abbr: The keys wrapper that handles the appearance of the keys.
  • content: The children wrapper that handles the appearance of the content.

Accessibility

  • Each command key has a title attribute that describes the action that the key performs.

API

Keyboard Key Props

PropTypeDefault
children
ReactNode
keys
KbdKey | KbdKey[]
classNames
Partial<Record<"base" | "abbr" | "content", string>>

Keyboard Keys

List of supported keys.