125k

Kbd

PreviousNext

キーボードからのテキスト ユーザー入力を表示するために使用されます。

BaseRadixReact Aria
⌘⇧⌥⌃Ctrl+B
import { Kbd, KbdGroup } from "@/components/ui/radix/kbd"

export function KbdDemo() {

インストール

pnpm dlx shadcn@latest add kbd

使用法

import { Kbd } from "@/components/ui/kbd"
<Kbd>Ctrl</Kbd>

構成

次の構成を使用して Kbd および KbdGroup を構築します。

Kbd
KbdGroup
├── Kbd
└── Kbd

グループ

KbdGroup コンポーネントを使用して、キーボード キーをグループ化します。

コマンドパレットを開くには Ctrl + BCtrl + K を使用します

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

export function KbdGroupExample() {

ボタン

Button コンポーネント内で Kbd コンポーネントを使用して、ボタン内にキーボード キーを表示します。

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

ツールチップ

Tooltip コンポーネント内で Kbd コンポーネントを使用すると、キーボード キーでツールチップを表示できます。

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

入力グループ

InputGroupAddon コンポーネント内で Kbd コンポーネントを使用すると、入力グループ内にキーボード キーを表示できます。

⌘K
import { SearchIcon } from "lucide-react"

import {

RTL

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイド を参照してください。

⌘⇧⌥⌃Ctrl+B
"use client"

import * as React from "react"

API リファレンス

Kbd

Kbd コンポーネントを使用して、キーボードのキーを表示します。

プロパティタイプデフォルト
classNamestring``
<Kbd>Ctrl</Kbd>

KbdGroup

KbdGroup コンポーネントを使用して、Kbd コンポーネントをグループ化します。

プロパティタイプデフォルト
classNamestring``
<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>