Kbd
Display keyboard shortcuts and key combinations
Usage
import { Kbd } from "@heroui/react";Anatomy
import { Kbd } from "@heroui/react";
export default () => (
<Kbd>
<Kbd.Abbr title="Command">⌘</Kbd.Abbr>
<Kbd.Content>K</Kbd.Content>
</Kbd>
);Examples
Variants
Navigation Keys
Inline Usage
Instructional Text
Special Keys
Customization
Tailwind CSS
Global CSS
To customize the Kbd component classes, you can use the @layer components directive.
Learn more.
@layer components {
.kbd {
@apply bg-gray-100 dark:bg-gray-800 border-gray-300;
}
.kbd__abbr {
@apply font-bold;
}
.kbd__content {
@apply text-sm;
}
}Styling Reference
HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.
CSS Classes
The Kbd component uses these CSS classes (View source styles):
Base Classes
.kbd- Base keyboard key styles with background, border, and spacing.kbd__abbr- Abbreviation element for modifier keys.kbd__content- Content wrapper for key text
API Reference
Kbd
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Content of the key |
variant | `"default" | "light"` | default |
className | string | - | Custom CSS classes |
Kbd.Abbr
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | - | Title attribute for accessibility (e.g., "Command" for ⌘) |
children | React.ReactNode | - | The symbol or text to display (e.g., ⌘, ⌥, ⇧) |
className | string | - | Custom CSS classes |
Kbd.Key
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Text content of the key |
className | string | - | Custom CSS classes |
Kbd.Content Type
Available key values for the keyValue prop:
| Modifier Keys | Special Keys | Navigation Keys | Function Keys |
|---|---|---|---|
command | enter | up | fn |
shift | delete | down | |
ctrl | escape | left | |
option | tab | right | |
alt | space | pageup | |
win | capslock | pagedown | |
help | home | ||
end |