Kbd 键盘键

键盘按键，用于说明快捷键。

打开命令面板

Ctrl

K

import { Inline, Kbd, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Inline align="center">
      <Text>打开命令面板</Text>
      <Inline align="center" gap="xs">
        <Kbd>Ctrl</Kbd>
        <Text tone="faint">+</Text>
        <Kbd>K</Kbd>
      </Inline>
    </Inline>
  )
}

tsx

用法

import { Kbd } from '@hina-ui/react'

组件渲染为原生的 kbd，使用等宽字体，底边比其余三边更粗，呈现键帽的轮廓。一个组件对应一个按键。

Esc

import { Kbd } from '@hina-ui/react'

export default function Demo() {
  return <Kbd>Esc</Kbd>
}

tsx

示例

组合键

多个按键各用一个组件，之间的连接符号由调用方决定。同时按下的按键之间写加号，先后按下的用文字说明。

Ctrl

Shift

P

G

随后

H

import { Inline, Kbd, Stack, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack>
      <Inline align="center" gap="xs">
        <Kbd>Ctrl</Kbd>
        <Text tone="faint">+</Text>
        <Kbd>Shift</Kbd>
        <Text tone="faint">+</Text>
        <Kbd>P</Kbd>
      </Inline>
      <Inline align="center" gap="xs">
        <Kbd>G</Kbd>
        <Text tone="faint">随后</Text>
        <Kbd>H</Kbd>
      </Inline>
    </Stack>
  )
}

tsx

跟随上下文缩放

字号是相对值，取所在文字的 81.25%。用在小字号的段落中时会一同缩小。

按 Enter 提交，按 Esc 取消。

小字号中的 Enter 会一同缩小。

import { Kbd, Stack, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack className="max-w-lg">
      <Text>
        按 <Kbd>Enter</Kbd> 提交，按 <Kbd>Esc</Kbd> 取消。
      </Text>
      <Text size="sm">
        小字号中的 <Kbd>Enter</Kbd> 会一同缩小。
      </Text>
    </Stack>
  )
}

tsx

正文中的按键

Prose 会为其中的原生 kbd 标签应用同一套样式。渲染 Markdown 或者富文本时不需要替换标签。

正文中的 kbd 标签不需要单独引入组件。

import { Prose } from '@hina-ui/react'

export default function Demo() {
  return (
    <Prose className="max-w-lg">
      <p>
        正文中的 <kbd>kbd</kbd> 标签不需要单独引入组件。
      </p>
    </Prose>
  )
}

tsx

API

Props

属性	类型	默认值	说明
`className`	`string`	—	追加至根元素的类名

内容属性

属性	说明
`children`	按键名称

用法

示例

组合键

跟随上下文缩放

正文中的按键

无障碍

API

Props

内容属性