Kbd

A keyboard key component for displaying keyboard shortcuts, commands, and key combinations. Supports multiple visual variants, sizes, icons, square keys, and grouped key sequences. Useful for documentation, tooltips, modals, and any UI where keyboard input is referenced.

---

Import

import { Kbd } from '@odyssee/components';
// Helpers: Kbd.Group, Kbd.Cmd, Kbd.Option, Kbd.Shift, Kbd.ArrowUp, etc.

---

Examples

Basic Keyboard Keys

Code Éditable

Résultat

---

Variants

Code Éditable

Résultat

---

Sizes

Code Éditable

Résultat

---

With Icon and Square

Code Éditable

Résultat

---

Group of Keys (Kbd.Group)

Code Éditable

Résultat

---

Group with Custom Separator

Code Éditable

Résultat

---

Using Helper Components

Code Éditable

Résultat

---

Table des props

Kbd

Prop	Type	Default	Description
children	string | HTMLElement	–	Key label or content.
variant	"text" | "text-dark" | "solid" | "bordered" | "shadow"	"solid"	Visual style of the key.
size	"xs" | "sm" | "md" | "lg"	"sm"	Size of the key.
icon	HTMLElement | string	–	Icon to display before the key label.
square	boolean	false	Makes the key square (useful for icons).
className	string	–	Additional CSS classes.
id	string	auto-gen	HTML id attribute.
style	string	–	Inline styles.

Kbd.Group

Prop	Type	Default	Description
keys	(string | HTMLElement | Kbd.Props)[]	–	Array of keys to display in the group.
separator	string	"+"	Separator string between keys.
variant	"text" | "text-dark" | "solid" | "bordered" | "shadow"	"solid"	Variant for all keys in the group.
size	"xs" | "sm" | "md" | "lg"	"sm"	Size for all keys in the group.
className	string	–	Additional CSS classes.
id	string	auto-gen	HTML id attribute.
style	string	–	Inline styles.

Helper Components

• Kbd.Cmd, Kbd.Option, Kbd.Shift, Kbd.ArrowUp, Kbd.ArrowDown, Kbd.ArrowLeft, Kbd.ArrowRight, Kbd.Enter, Kbd.Esc, Kbd.Tab, Kbd.Space, Kbd.Delete, Kbd.Backspace
  → Prend les mêmes props que Kbd (sauf children, déjà défini).

---

Implementation Notes

• Variants:
  • solid (default): filled background, borderless.
  • bordered: white background, border.
  • shadow: white background, border, subtle shadow.
  • text: light text, no background.
  • text-dark: dark text, no background.
• Sizes:
  • xs, sm, md, lg — affectent la taille, le padding, la police.
• Icons:
  • Utilisez icon pour afficher une icône à gauche du label.
  • square force la touche à être carrée (utile pour les flèches, Cmd, etc.).
• Groupes:
  • Kbd.Group permet d’afficher des séquences de touches avec séparateur personnalisable.
  • Chaque élément du tableau keys peut être une string, un élément, ou un objet de props.
• Helpers:
  • Fournit des composants pour les touches courantes (Cmd, Option, Shift, flèches, etc.), déjà stylés et avec icône si besoin.

---

Accessibilité

• Les touches sont rendues avec l’élément sémantique <kbd>.
• Les groupes utilisent <span> avec des séparateurs textuels.
• Les icônes SVG sont décoratives et ne nécessitent pas d’accessibilité supplémentaire.
• Pour les raccourcis importants, accompagnez toujours d’un texte explicite dans l’UI.

---

Best Practices

• Utilisez Kbd pour référencer des raccourcis clavier dans vos docs, tooltips, modals, etc.
• Préférez les helpers (Kbd.Cmd, Kbd.Shift, etc.) pour les touches spéciales.
• Pour les séquences, utilisez Kbd.Group pour une présentation claire.
• Adaptez la variante et la taille au contexte visuel de votre application.
• N’utilisez pas les touches seules pour transmettre une information essentielle : accompagnez-les d’un texte ou d’une explication.

---

Related

• MDN: kbd element
• Pulse Framework
• Tailwind CSS Typography

---