---
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/vi/components/kbd
---

# KBD Component

Các thành phần phím của bàn phím thể hiện trực quan hoạt động nhập bằng bàn phím, hữu ích cho việc ghi lại các phím tắt, phím nóng và điều hướng bàn phím. Được xây dựng bằng HTML ngữ nghĩa, các phần tử kbd truyền đạt hành động và kiểu tương tác của người dùng. Hệ thống kbd Frutjam hỗ trợ nhiều kích cỡ và kiểu dáng—lý tưởng cho tài liệu về phím tắt, lớp phủ hướng dẫn và hướng dẫn bàn phím.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

| Lớp học | Kiểu    | Sự miêu tả                                                 |
| ------- | ------- | ---------------------------------------------------------- |
| kbd     | Căn cứ  | Phím bàn phím được tạo kiểu với đường viền và bóng nổi lên |
| kbd-xs  | Kích cỡ | Cực nhỏ (phông chữ 0,75rem)                                |
| kbd-sm  | Kích cỡ | Nhỏ (phông chữ 0,8125rem)                                  |
| kbd-md  | Kích cỡ | Trung bình (phông chữ 0,875rem, mặc định)                  |
| kbd-lg  | Kích cỡ | Lớn (phông chữ 1rem)                                       |
| kbd-xl  | Kích cỡ | Cực lớn (phông chữ 1.125rem)                               |

## Cách sử dụng cơ bản

## Tổ hợp phím

```html
<div class="space-y-2">
  <div>
    <span class="text-sm">Copy:</span>
    <kbd class="kbd">Ctrl</kbd>
    <span>+</span>
    <kbd class="kbd">C</kbd>
  </div>
  <div>
    <span class="text-sm">Paste:</span>
    <kbd class="kbd">Ctrl</kbd>
    <span>+</span>
    <kbd class="kbd">V</kbd>
  </div>
  <div>
    <span class="text-sm">Undo:</span>
    <kbd class="kbd">Ctrl</kbd>
    <span>+</span>
    <kbd class="kbd">Z</kbd>
  </div>
</div>
```

## Kích thước phím

```html
<kbd class="kbd kbd-xs">Xs</kbd>
<kbd class="kbd kbd-sm">Sm</kbd>
<kbd class="kbd kbd-md">Md</kbd>
<kbd class="kbd kbd-lg">Lg</kbd>
```

## Phím đặc biệt

```html
<div class="space-x-2">
  <kbd class="kbd">Enter</kbd>
  <kbd class="kbd">Tab</kbd>
  <kbd class="kbd">Shift</kbd>
  <kbd class="kbd">Alt</kbd>
  <kbd class="kbd">Esc</kbd>
  <kbd class="kbd">Space</kbd>
</div>
```

## Phím mũi tên

```html
<div class="inline-grid grid-cols-3 gap-1">
  <div></div>
  <kbd class="kbd">↑</kbd>
  <div></div>
  <kbd class="kbd">←</kbd>
  <kbd class="kbd">↓</kbd>
  <kbd class="kbd">→</kbd>
</div>
```

## Hướng dẫn phím tắt

```html
<div class="card bg-base-100 shadow-xl max-w-md">
  <div class="card-content">
    <h2 class="card-title text-lg">Keyboard Shortcuts</h2>
    <div class="space-y-2 text-sm">
      <div class="flex justify-between">
        <span>Search</span>
        <div><kbd class="kbd kbd-sm">Ctrl</kbd> + <kbd class="kbd kbd-sm">K</kbd></div>
      </div>
      <div class="flex justify-between">
        <span>Focus</span>
        <div><kbd class="kbd kbd-sm">/</kbd></div>
      </div>
      <div class="flex justify-between">
        <span>New</span>
        <div><kbd class="kbd kbd-sm">Ctrl</kbd> + <kbd class="kbd kbd-sm">N</kbd></div>
      </div>
    </div>
  </div>
</div>
```