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

# KBD Component

Komponen tombol keyboard secara visual mewakili input keyboard, berguna untuk mendokumentasikan pintasan, tombol pintas, dan navigasi keyboard. Dibangun dengan HTML semantik, elemen kbd mengkomunikasikan tindakan pengguna dan pola interaksi. Sistem Frutjam kbd mendukung berbagai ukuran dan gaya—ideal untuk dokumentasi pintasan, overlay tutorial, dan panduan keyboard.

Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

| Kelas  | Jenis  | Keterangan                                                        |
| ------ | ------ | ----------------------------------------------------------------- |
| kbd    | Basis  | Tombol keyboard ditata dengan batas dan bayangan yang ditinggikan |
| kbd-xs | Ukuran | Ekstra kecil (font 0,75rem)                                       |
| kbd-sm | Ukuran | Kecil (font 0,8125rem)                                            |
| kbd-md | Ukuran | Sedang (font 0,875rem, default)                                   |
| kbd-lg | Ukuran | Besar (font 1rem)                                                 |
| kbd-xl | Ukuran | Ekstra besar (font 1,125rem)                                      |

## Penggunaan Dasar

## Kombinasi Kunci

```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>
```

## Ukuran Kunci

```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>
```

## Kunci Khusus

```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>
```

## Tombol Panah

```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>
```

## Panduan Pintasan Keyboard

```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>
```