Kbd
Display keyboard shortcuts and key combinations
Import
import { Kbd } from "@heroui/react";Usage
Anatomy
Import the Kbd component and access all parts using dot notation.
import { Kbd } from "@heroui/react";
export default () => (
<Kbd>
<Kbd.Abbr title="Command">⌘</Kbd.Abbr>
<Kbd.Content>K</Kbd.Content>
</Kbd>
);Navigation Keys
Inline Usage
Instructional Text
Special Keys
Variants
Styling
Passing Tailwind CSS classes
import { Kbd } from "@heroui/react";
function CustomKbd() {
return (
<Kbd className="bg-gray-100 dark:bg-gray-800">
<Kbd.Content>K</Kbd.Content>
</Kbd>
);
}Customizing the component classes
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;
}
}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 Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Content of the key |
variant | `"default" | "light"` | default |
className | string | - | Custom CSS classes |
Kbd.Abbr Props
| 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 Props
| 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 |