ErrorCard

BetaRSC-safe

Carte d'erreur avec titre, message optionnel, et bouton Réessayer optionnel. role=alert pour annonce immédiate. Tokens Aurora sémantiques (surface-error, border-error), CSS Modules.

import { ErrorCard } from "@lyra/tokens/components";

Playground

Avec bouton Réessayer

Impossible de charger les données

La connexion au serveur a échoué. Vérifiez votre réseau.

tone="warning" (attente, annoncée en status)

Cela prend plus de temps que prévu

Réessayez dans un instant.

retryDisabled (action en cours)

Impossible de charger les données

Une opération est en cours : réessayez dans un instant.

Sans bouton (erreur non récupérable)

Synchronisation désactivée

Contactez le support pour rétablir l'accès.

Démo interactive — réglages du playground (props ajustables en direct) à venir.

// Avec bouton Réessayer
<ErrorCard
  title="Impossible de charger les données"
  message="La connexion au serveur a échoué."
  onRetry={handleRetry}
  retryLabel="Réessayer"
/>

// Sans bouton (non récupérable)
<ErrorCard
  title="Accès refusé"
  message="Contactez le support."
/>

// État dégradé non bloquant
<ErrorCard
  tone="warning"
  title="Cela prend plus de temps que prévu"
  message="Réessayez dans un instant."
  onRetry={handleRetry}
/>

Documentation

avec Réessayer
Erreur de chargement
La connexion a échoué.
sans Réessayer
Accès refusé
Contactez le support.
tone warning
Cela prend plus de temps que prévu
Réessayez dans un instant.
retryDisabled
Impossible de charger les données
Une opération est en cours.

title, message, onRetry, retryLabel, retryDisabled, tone

// Avec bouton Réessayer
<ErrorCard
  title="Impossible de charger les données"
  message="La connexion au serveur a échoué."
  onRetry={handleRetry}
  retryLabel="Réessayer"
/>

// Sans bouton (non récupérable)
<ErrorCard
  title="Accès refusé"
  message="Contactez le support."
/>

// État dégradé non bloquant
<ErrorCard
  tone="warning"
  title="Cela prend plus de temps que prévu"
  message="Réessayez dans un instant."
  onRetry={handleRetry}
/>