引入

import { Kbd } from "@heroui/react";

用法

⌘K⇧P⌃C⌥D

import {Kbd} from "@heroui/react";

export function Basic() {
  return (
    <div className="flex items-center gap-4">

组件结构

导入 Kbd 组件后，可通过点语法访问所有子部分。

import { Kbd } from "@heroui/react";

export default () => (
  <Kbd>
    <Kbd.Abbr title="Command">⌘</Kbd.Abbr>
    <Kbd.Content>K</Kbd.Content>
  </Kbd>
);

导航键

方向键：

↑↓←→

页面导航：

⇞⇟↖↘

import {Kbd} from "@heroui/react";

export function NavigationKeys() {
  return (
    <div className="flex flex-col gap-4">

行内用法

按 Esc 关闭对话框。

使用 ⌘K 打开命令面板。

使用 ↑ 和 ↓ 方向键进行导航。

使用 ⌘S 定期保存你的工作。

import {Kbd} from "@heroui/react";

export function InlineUsage() {
  return (
    <div className="space-y-4">

说明性文本

快捷操作

• 打开搜索： ⌘K
• 切换侧边栏： ⌘B
• 新建文件： ⌘N
• 快速保存： ⌘S

import {Kbd} from "@heroui/react";

export function InstructionalText() {
  return (
    <div className="space-y-3">

特殊键

按 ↵ 确认，或按 ⎋ 取消。

使用 ⇥ 在表单字段间切换，使用 ⇧⇥ 返回上一项。

按住 ␣ 可临时启用平移模式。

import {Kbd} from "@heroui/react";

export function SpecialKeys() {
  return (
    <div className="space-y-3">

变体

复制：⌘C⌘C

粘贴：⌘V⌘V

剪切：⌘X⌘X

撤销：⌘Z⌘Z

重做：⌘⇧Z⌘⇧Z

import {Kbd} from "@heroui/react";

export function Variants() {
  return (
    <div className="flex flex-col gap-4">

样式

传入 Tailwind CSS 类

import { Kbd } from "@heroui/react";

function CustomKbd() {
  return (
    <Kbd className="bg-gray-100 dark:bg-gray-800">
      <Kbd.Content>K</Kbd.Content>
    </Kbd>
  );
}

自定义组件类

要自定义 Kbd 的组件类，可使用 @layer components 指令。
了解更多。

@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 遵循 BEM 方法论，确保组件变体与状态可复用且易于自定义。

CSS 类

Kbd 使用以下 CSS 类（查看源码样式）：

基础类

.kbd — 按键基础样式（背景、边框与间距）
.kbd__abbr — 修饰键的缩写元素
.kbd__content — 按键文字的包裹层

API 参考

Kbd Props

Prop	类型	默认值	描述
`children`	`React.ReactNode`	-	按键内容
`variant`	`"default" \| "light"`	`default`	键盘按键的视觉变体
`className`	`string`	-	自定义 CSS 类

Kbd.Abbr Props

Prop	类型	默认值	描述
`title`	`string`	-	无障碍 `title`（例如 ⌘ 对应 “Command”）
`children`	`React.ReactNode`	-	显示的符号或文本（例如 ⌘、⌥、⇧）
`className`	`string`	-	自定义 CSS 类

Kbd.Key Props

Prop	类型	默认值	描述
`children`	`React.ReactNode`	-	按键上的文本
`className`	`string`	-	自定义 CSS 类

Kbd.Content Type

keyValue 属性可用的按键取值：

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`

Kbd 键盘按键

引入

用法