Kbd

Purpose

A key, or a combination of keys, as the user presses them. The product explains keyboard use everywhere: the extension’s wizard shortcuts, the site’s sheets, the app’s help. A key drawn as a key is read as one, and the kbd element says so to assistive technology.

When to use, when not

Use it for a key or a shortcut in running text or in a help table. Not for a button’s label, not for code (that is InlineMarkup’s code span).

Anatomy

1. A kbd for one key; for a combination, an outer kbd holding one kbd per key, joined by a plus.

Props

Props of Kbd

Name	Type	Default	What it does
keys?	string[]		The keys of a combination, each in its own kbd, joined by a plus.
children?	Snippet		One key, when there is no combination.

States

One key, a combination, and inside a sentence.

combination

The outer kbd is the combination, each key its own kbd inside, as the element is meant to nest.

Light

Ctrl+K ouvre la recherche.

Dark

Ctrl+K ouvre la recherche.

320 px, light

Ctrl+K ouvre la recherche.

320 px, dark

Ctrl+K ouvre la recherche.

216 px, light

Ctrl+K ouvre la recherche.

Forced colours, captured

inSentence

Light

Appuyez sur Tab pour passer au champ suivant, Maj+Tab pour revenir.

Dark

Appuyez sur Tab pour passer au champ suivant, Maj+Tab pour revenir.

320 px, light

Appuyez sur Tab pour passer au champ suivant, Maj+Tab pour revenir.

320 px, dark

Appuyez sur Tab pour passer au champ suivant, Maj+Tab pour revenir.

216 px, light

Appuyez sur Tab pour passer au champ suivant, Maj+Tab pour revenir.

Forced colours, captured

single

Light

Échap

Dark

Échap

320 px, light

Échap

320 px, dark

Échap

216 px, light

Échap

Forced colours, captured

Accessibility contract

• Role and name: the kbd element; a screen reader reads the key’s name. The plus between keys is read too, “Ctrl plus K”, which is how the combination is said aloud.
• Keyboard, focus: none, it is text.
• Live regions: none.

Content rules

French key names as the keyboards of the product’s users write them: Échap, Entrée, Maj, Ctrl, Tab, Espace; arrows as “Flèche droite”. Not the English names.

Do and don’t

• Do write the key as it is printed on the key cap.
• Do not use it to style a button or a code sample.

Examples

<p>Appuyez sur <Kbd>Tab</Kbd> pour passer au champ suivant, <Kbd keys={['Maj', 'Tab']} /> pour revenir.</p>

Surfaces

• Extension: the wizard shortcut help, when the panel is on Svelte.
• Site: the sheets that name keys.

Related

InlineMarkup.

Decisions

• 2026-09-24: nested kbd for a combination, as the HTML standard describes, rather than one element with a plus in its text.

Criteria held by construction

• 8.9, Dans chaque page web, les balises ne doivent pas être utilisées uniquement à des fins de présentation. Cette règle est-elle respectée ?
  The kbd element is used for what it means, a key the user presses, and never for its look; a key drawn with a span would be presentation only.
• 12.10, Dans chaque page web, les raccourcis clavier n'utilisant qu'une seule touche sont-ils contrôlables par l'utilisateur ?
  Where a single-key shortcut exists, the component is how the page says it, so the shortcut is documented next to the control it drives.

Tokens it reads

• Colour: --rl-ink, --rl-ink-soft, --rl-line-control, --rl-surface
• Typography: --rl-font-mono
• Spacing: --rl-space-1, --rl-space-1-5
• Layout: --rl-radius, --rl-border, --rl-border-strong