---
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/fr/components/kbd
---
# KBD Component
Les composants des touches du clavier représentent visuellement la saisie au clavier, ce qui est utile pour documenter les raccourcis, les raccourcis clavier et la navigation au clavier. Construits avec du HTML sémantique, les éléments kbd communiquent les actions des utilisateurs et les modèles d'interaction. Le système Frutjam kbd prend en charge plusieurs tailles et styles, idéal pour la documentation des raccourcis, les superpositions de didacticiels et les guides de clavier.
CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
| Classe | Taper | Description |
| ------ | ------ | ------------------------------------------------- |
| kbd | Base | Touche du clavier avec bordure en relief et ombre |
| kbd-xs | Taille | Extra petit (police 0,75rem) |
| kbd-sm | Taille | Petit (police 0,8125rem) |
| kbd-md | Taille | Moyen (police 0,875rem, par défaut) |
| kbd-lg | Taille | Grand (police 1rem) |
| kbd-xl | Taille | Extra grand (police 1,125rem) |
## Utilisation de base
## Combinaisons de touches
```html
Copy:
Ctrl
+
C
Paste:
Ctrl
+
V
Undo:
Ctrl
+
Z
```
## Tailles des clés
```html
Xs
Sm
Md
Lg
```
## Clés spéciales
```html
Enter
Tab
Shift
Alt
Esc
Space
```
## Touches fléchées
```html
```
## Guide des raccourcis clavier
```html
```