Skip to content
design system
Thème d’affichage, actuellement Auto

atom · stable · since 2026-09

Chip

Purpose

A short word in a frame: a state, a category, a count. The word carries the information and the tone only confirms it. Audit statuses are not chips: StatusChip has its own drawing and its words from core.

When to use, when not

Use it next to a title or in a table cell for a state (“Brouillon”, “Terminé”), a category or a small count. Not for an audit status (StatusChip), not for a criterion level (LevelBadge), not as a button or a link.

Anatomy

  1. A span with the line and, for a tone, the ink.
  2. An optional drawing, hidden.
  3. The word.

Props

Props of Chip
NameTypeDefaultWhat it does
tone?'neutral' | 'info' | 'success' | 'warning' | 'error''neutral'The ink and the line; neutral says nothing but the word.
icon?IconNameA drawing before the word, hidden; the word still says everything.
class?string''Layout classes only.
childrenSnippetThe word, or two.

States

Neutral, the four tones, and with a drawing.

error

Light
Clôturé
Dark
Clôturé
320 px, light
Clôturé
320 px, dark
Clôturé
216 px, light
Clôturé
Forced colours, captured
Chip, story error, as Chromium renders it with forced colours active

info

Light
Réaudit
Dark
Réaudit
320 px, light
Réaudit
320 px, dark
Réaudit
216 px, light
Réaudit
Forced colours, captured
Chip, story info, as Chromium renders it with forced colours active

neutral

The base layer's chip, as the app writes it for "Terminé" or "Brouillon".

Light
Brouillon
Dark
Brouillon
320 px, light
Brouillon
320 px, dark
Brouillon
216 px, light
Brouillon
Forced colours, captured
Chip, story neutral, as Chromium renders it with forced colours active

success

Light
Terminé
Dark
Terminé
320 px, light
Terminé
320 px, dark
Terminé
216 px, light
Terminé
Forced colours, captured
Chip, story success, as Chromium renders it with forced colours active

warning

Light
En attente
Dark
En attente
320 px, light
En attente
320 px, dark
En attente
216 px, light
En attente
Forced colours, captured
Chip, story warning, as Chromium renders it with forced colours active

withIcon

The drawing is hidden; the word still says everything.

Light
Publié
Dark
Publié
320 px, light
Publié
320 px, dark
Publié
216 px, light
Publié
Forced colours, captured
Chip, story withIcon, as Chromium renders it with forced colours active

Accessibility contract

  • Role and name: none; it is text in the flow, read as its word.
  • Keyboard, focus: none.
  • Live regions: none.

Content rules

French. One or two words, a noun or a participle (“Terminé”, “En attente”); never a sentence.

Do and don’t

  • Do choose the tone from the meaning: a warning tone for a decoration is a lie.
  • Do not put a chip inside a button’s label; the button’s text is its name.

Examples

<Chip tone="success">Terminé</Chip>
<Chip>Brouillon</Chip>

Surfaces

  • App: the audit’s state and closure, the site’s audit list, the members’ roles, the users’ state and second factor, an expired token.

Related

StatusChip, LevelBadge.

Decisions

  • 2026-09-24: the same tones as Alert, so a state has one ink whether it is a message or a chip.

Criteria held by construction

  • 3.1, Dans chaque page web, l'information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?
    The word is required and carries the information; the tone is an ink on a line that only confirms it, and a drawing is hidden.

Tokens it reads

  • Colour: --rl-action, --rl-attention, --rl-c, --rl-ink-soft, --rl-line, --rl-nc
  • Typography: --rl-weight-bold, --rl-text-xs
  • Spacing: --rl-space-1, --rl-space-1-5, --rl-space-2-5
  • Layout: --rl-radius, --rl-border