Kbd 键盘按键

展示键盘快捷键与按键组合

用法

1import { Kbd } from "@lenso/ui";

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Kbd } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { s } from "../card/display.stylex";6
7export function Basic() {8  return (9    <div {...stylex.props(s.row4)}>10      <Kbd>11        <Kbd.Abbr keyValue="command" />12        <Kbd.Content>K</Kbd.Content>13      </Kbd>14      <Kbd>15        <Kbd.Abbr keyValue="shift" />16        <Kbd.Content>P</Kbd.Content>17      </Kbd>18      <Kbd>19        <Kbd.Abbr keyValue="ctrl" />20        <Kbd.Content>C</Kbd.Content>21      </Kbd>22      <Kbd>23        <Kbd.Abbr keyValue="option" />24        <Kbd.Content>D</Kbd.Content>25      </Kbd>26    </div>27  );28}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

组件结构

1import { Kbd } from "@lenso/ui";2
3export default () => (4  <Kbd>5    <Kbd.Abbr title="Command">⌘</Kbd.Abbr>6    <Kbd.Content>K</Kbd.Content>7  </Kbd>8);

示例

变体

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Kbd } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { s } from "../card/display.stylex";6
7export function Variants() {8  return (9    <div {...stylex.props(s.column4)}>10      {[11        { label: "Copy:", key: "C" },12        { label: "Paste:", key: "V" },13        { label: "Cut:", key: "X" },14      ].map((action) => (15        <div key={action.key} {...stylex.props(s.row2)}>16          <span>{action.label}</span>17          <Kbd>18            <Kbd.Abbr keyValue="command" />19            <Kbd.Content>{action.key}</Kbd.Content>20          </Kbd>21          <Kbd variant="light">22            <Kbd.Abbr keyValue="command" />23            <Kbd.Content>{action.key}</Kbd.Content>24          </Kbd>25        </div>26      ))}27    </div>28  );29}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

导航按键

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Kbd } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { s } from "../card/display.stylex";6
7export function NavigationKeys() {8  return (9    <div {...stylex.props(s.column4)}>10      <div {...stylex.props(s.row2)}>11        <span {...stylex.props(s.textSm, s.muted)}>Arrow Keys:</span>12        <div {...stylex.props(s.row2)}>13          <Kbd>14            <Kbd.Abbr keyValue="up" />15          </Kbd>16          <Kbd>17            <Kbd.Abbr keyValue="down" />18          </Kbd>19          <Kbd>20            <Kbd.Abbr keyValue="left" />21          </Kbd>22          <Kbd>23            <Kbd.Abbr keyValue="right" />24          </Kbd>25        </div>26      </div>27      <div {...stylex.props(s.row2)}>28        <span {...stylex.props(s.textSm, s.muted)}>Page Navigation:</span>29        <div {...stylex.props(s.row2)}>30          <Kbd>31            <Kbd.Abbr keyValue="pageup" />32          </Kbd>33          <Kbd>34            <Kbd.Abbr keyValue="pagedown" />35          </Kbd>36          <Kbd>37            <Kbd.Abbr keyValue="home" />38          </Kbd>39          <Kbd>40            <Kbd.Abbr keyValue="end" />41          </Kbd>42        </div>43      </div>44    </div>45  );46}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

行内用法

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Kbd } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { s } from "../card/display.stylex";6
7export function InlineUsage() {8  return (9    <div>10      <p {...stylex.props(s.textSm)}>11        Press{" "}12        <Kbd>13          <Kbd.Content>Esc</Kbd.Content>14        </Kbd>{" "}15        to close the dialog.16      </p>17      <p {...stylex.props(s.textSm, s.space4)}>18        Use{" "}19        <Kbd>20          <Kbd.Abbr keyValue="command" />21          <Kbd.Content>K</Kbd.Content>22        </Kbd>{" "}23        to open the command palette.24      </p>25      <p {...stylex.props(s.textSm, s.space4)}>26        Navigate with{" "}27        <Kbd>28          <Kbd.Abbr keyValue="up" />29        </Kbd>{" "}30        and{" "}31        <Kbd>32          <Kbd.Abbr keyValue="down" />33        </Kbd>{" "}34        arrow keys.35      </p>36      <p {...stylex.props(s.textSm, s.space4)}>37        Save your work with{" "}38        <Kbd>39          <Kbd.Abbr keyValue="command" />40          <Kbd.Content>S</Kbd.Content>41        </Kbd>{" "}42        regularly.43      </p>44    </div>45  );46}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

说明文字

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Kbd } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { s } from "../card/display.stylex";6
7export function InstructionalText() {8  return (9    <div>10      <div {...stylex.props(s.kbdPanel)}>11        <h4 {...stylex.props(s.kbdHeading)}>Quick Actions</h4>12        <ul {...stylex.props(s.textSm)}>13          <li>14            • Open search:{" "}15            <Kbd>16              <Kbd.Abbr keyValue="command" />17              <Kbd.Content>K</Kbd.Content>18            </Kbd>19          </li>20          <li {...stylex.props(s.space2)}>21            • Toggle sidebar:{" "}22            <Kbd>23              <Kbd.Abbr keyValue="command" />24              <Kbd.Content>B</Kbd.Content>25            </Kbd>26          </li>27          <li {...stylex.props(s.space2)}>28            • New file:{" "}29            <Kbd>30              <Kbd.Abbr keyValue="command" />31              <Kbd.Content>N</Kbd.Content>32            </Kbd>33          </li>34          <li {...stylex.props(s.space2)}>35            • Quick save:{" "}36            <Kbd>37              <Kbd.Abbr keyValue="command" />38              <Kbd.Content>S</Kbd.Content>39            </Kbd>40          </li>41        </ul>42      </div>43    </div>44  );45}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

特殊按键

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Kbd } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { s } from "../card/display.stylex";6
7export function SpecialKeys() {8  return (9    <div>10      <p {...stylex.props(s.textSm)}>11        Press{" "}12        <Kbd>13          <Kbd.Abbr keyValue="enter" />14        </Kbd>{" "}15        to confirm or{" "}16        <Kbd>17          <Kbd.Abbr keyValue="escape" />18        </Kbd>{" "}19        to cancel.20      </p>21      <p {...stylex.props(s.textSm, s.space3)}>22        Use{" "}23        <Kbd>24          <Kbd.Abbr keyValue="tab" />25        </Kbd>{" "}26        to navigate between form fields and{" "}27        <Kbd>28          <Kbd.Abbr keyValue="shift" />29          <Kbd.Abbr keyValue="tab" />30        </Kbd>{" "}31        to go back.32      </p>33      <p {...stylex.props(s.textSm, s.space3)}>34        Hold{" "}35        <Kbd>36          <Kbd.Abbr keyValue="space" />37        </Kbd>{" "}38        to temporarily enable panning mode.39      </p>40    </div>41  );42}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

自定义样式

Tailwind CSS

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Kbd } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { s } from "../card/display.stylex";6
7export function CustomStyles() {8  return (9    <div {...stylex.props(s.row3)}>10      <Kbd xstyle={s.kbdAccent}>11        <Kbd.Abbr keyValue="command" />12        <Kbd.Content>K</Kbd.Content>13      </Kbd>14      <Kbd xstyle={s.kbdDefault}>15        <Kbd.Abbr keyValue="shift" />16        <Kbd.Content>P</Kbd.Content>17      </Kbd>18    </div>19  );20}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

全局 CSS

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

1@layer components {2  .kbd {3    @apply bg-gray-100 dark:bg-gray-800 border-gray-300;4  }5
6  .kbd__abbr {7    @apply font-bold;8  }9
10  .kbd__content {11    @apply text-sm;12  }13}

样式参考

HeroUI 遵循 BEM 方法论，确保组件变体与状态可复用且易于自定义。

CSS 类

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

基础类 [!toc]

.kbd - 基础按键样式，含背景、边框与间距
.kbd__abbr - 修饰键的缩写元素
.kbd__content - 按键文本的内容包裹层

API 参考

Kbd

Prop	类型	默认值	描述
`children`	`React.ReactNode`	-	按键内容
`variant`	`"default"	"light"`	`default`
`className`	`string`	-	自定义 CSS 类

Kbd.Abbr

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

Kbd.Key

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

Kbd.Content Type

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`

Kbd 键盘按键

用法

组件结构

示例

变体

导航按键

行内用法

说明文字

特殊按键

自定义样式

Tailwind CSS

全局 CSS

样式参考

CSS 类

基础类 [!toc]

API 参考

Kbd

Kbd.Abbr

Kbd.Key

Kbd.Content Type

相关组件