Composant · Feedback

StatusDot

Stable

Pastille de statut — un point coloré via tone (mappé sur --st-semantic-feedback-*) ou une couleur arbitraire via color (rendue en background-color inline, comme ColorSwatch). pulse ajoute un halo animé « en direct » (désactivé sous prefers-reduced-motion) ; label rend point + texte = un StatusIndicator. Style token-only, accessibilité câblée (role="img" + aria-label sans label, texte porteur avec label).

Exemples

Les cinq tonalités, puis trois indicateurs avec libellé dont un en direct animé (pulse).

Points de statut

En direct Dégradé Hors ligne

Voir le code (Svelte)

<div class="statusdot-demo-col">
  <div class="statusdot-demo-row">
    <StatusDot tone="neutral" />
    <StatusDot tone="info" />
    <StatusDot tone="success" />
    <StatusDot tone="warning" />
    <StatusDot tone="error" />
  </div>
  <div class="statusdot-demo-row">
    <StatusDot tone="success" pulse label="En direct" />
    <StatusDot tone="warning" label="Dégradé" />
    <StatusDot tone="error" label="Hors ligne" />
  </div>
</div>

API du composant

Prop	Type	Défaut	Description
`tone`	`'neutral' \| 'info' \| 'success' \| 'warning' \| 'error'`	`'neutral'`	Ton sémantique. Ignoré si color est fourni.
`color`	`string`	–	Couleur arbitraire (hex/rgb/token), background inline. Prime sur tone.
`size`	`number`	`8`	Diamètre du point en px.
`pulse`	`boolean`	`false`	Halo animé « live ». Désactivé sous prefers-reduced-motion.
`label`	`string`	–	Si fourni, rend le point + ce texte inline.
`class`	`string`	–	Classe CSS supplémentaire sur la racine.

Accessibilité : sans label, role="img" + aria-label (tone ou couleur) ; avec label, le texte porte l'info et le point est aria-hidden.

Tokens CSS

Variable CSS	Description
`--st-component-statusDot-{tone}`	Couleur du point par tonalité (retombe sur --st-semantic-feedback-*).
`--st-component-statusDot-labelFontSize` / `-labelFontWeight`	Typographie du libellé.
`--st-component-statusDot-pulseSpread`	Amplitude du halo animé.