---
title: "KBD"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS KBD using semantic HTML for keyboard shortcuts and hotkeys. Multiple sizes for shortcut guides, developer documentation, and UI hints."
url: https://frutjam.com/zh-hant/components/kbd
---
# KBD Component
鍵盤按鍵組件直觀地表示鍵盤輸入，對於記錄快捷鍵、熱鍵和鍵盤導航很有用。 kbd 元素採用語意 HTML 構建，傳達使用者操作和互動模式。 Frutjam kbd 系統支援多種尺寸和樣式，非常適合快捷方式文件、教學課程覆蓋和鍵盤指南。
僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
| 班級 | 類型 | 描述 |
| ------ | --- | ------------------ |
| kbd | 根據 | 帶有凸起邊框和陰影的鍵盤按鍵 |
| kbd-xs | 尺寸 | 超小號（0.75rem 字型） |
| kbd-sm | 尺寸 | 小號（0.8125rem 字型） |
| kbd-md | 尺寸 | 中號（0.875rem 字體，預設） |
| kbd-lg | 尺寸 | 大號（1rem 字型） |
| kbd-xl | 尺寸 | 超大（1.125rem字體） |
## 基本用法
## 按鍵組合
```html
Copy:
Ctrl
+
C
Paste:
Ctrl
+
V
Undo:
Ctrl
+
Z
```
## 鑰匙尺寸
```html
Xs
Sm
Md
Lg
```
## 特殊按鍵
```html
Enter
Tab
Shift
Alt
Esc
Space
```
## 方向鍵
```html
```
## 鍵盤快速鍵指南
```html
```