Skip to main content
Frutjam logo Frutjam
v2.2.2
Theme

Komponen KBD

Terakhir diperbarui:

Komponen kbd CSS Tailwind khusus CSS untuk menampilkan pintasan keyboard dan kombinasi tombol. Varian ukuran. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

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
kbdBasisTombol keyboard ditata dengan batas dan bayangan yang ditinggikan
kbd-xsUkuranEkstra kecil (font 0,75rem)
kbd-smUkuranKecil (font 0,8125rem)
kbd-mdUkuranSedang (font 0,875rem, default)
kbd-lgUkuranBesar (font 1rem)
kbd-xlUkuranEkstra besar (font 1,125rem)

Penggunaan Dasar

1
2
3
<kbd class="kbd">A</kbd>
<kbd class="kbd">B</kbd>
<kbd class="kbd">C</kbd>

1
2
3
<kbd className="kbd">A</kbd>
<kbd className="kbd">B</kbd>
<kbd className="kbd">C</kbd>

Kombinasi Kunci

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<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 
1
2
3
4
<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 
1
2
3
4
5
6
7
8
<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 
1
2
3
4
5
6
7
8
<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 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<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>

Using Claude Code, Cursor, or another AI editor?

Cherry MCP memberi editor AI Anda nama dan struktur kelas KBD yang tepat sesuai permintaan. Tidak ada lagi kelas berhalusinasi.

Coba Cherry MCP