Kbd

用于显示键盘的文本用户输入。

⌘⇧⌥⌃Ctrl+B

import { Kbd, KbdGroup } from "@/components/ui/kbd"

export function KbdDemo() {

安装


pnpm dlx shadcn@latest add kbd

使用方法

import { Kbd } from "@/components/ui/kbd"

<Kbd>Ctrl</Kbd>

示例

组合

使用 KbdGroup 组件将键盘按键分组显示。

Use Ctrl + BCtrl + K to open the command palette

import { Kbd, KbdGroup } from "@/components/ui/kbd"

export function KbdGroupExample() {

按钮

在 Button 组件内使用 Kbd 组件，将键盘按键显示在按钮内。

import { Button } from "@/components/ui/button"
import { Kbd } from "@/components/ui/kbd"

提示

可以在 Tooltip 组件内使用 Kbd 组件，显示带有键盘按键的提示。

import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import { Kbd, KbdGroup } from "@/components/ui/kbd"

输入组

可以在 InputGroupAddon 组件内使用 Kbd 组件，将键盘按键显示在输入组内。

⌘K

import {
  InputGroup,
  InputGroupAddon,

API 参考

Kbd

使用 Kbd 组件显示键盘按键。

属性	类型	默认值
`className`	`string`	``

<Kbd>Ctrl</Kbd>

KbdGroup

使用 KbdGroup 组件将多个 Kbd 组件分组。

属性	类型	默认值
`className`	`string`	``

<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>

项目标签

安装使用方法示例组合按钮提示输入组 API 参考 Kbd KbdGroup