Composant · Feedback

Alert

Stable

Bandeau d'information persistant lié au contexte de la page : info, succès, avertissement ou erreur. Titre obligatoire, message optionnel, et zone d'actions optionnelle.

Quand l'utiliser

Communiquer un état persistant dans le flux de la page (résultat, avertissement, blocage).
Pour une notification éphémère, utilisez Toast ; pour une info au survol, Tooltip.
Choisissez la tonalité selon la gravité : info < success < warning < error.

Tonalités

Quatre tonalités, marquées par un filet coloré à gauche.

Tonalités

Info

Une synchronisation est planifiée pour ce soir.

Succès

Les modifications ont été enregistrées.

Avertissement

Votre quota approche de la limite.

Erreur

Impossible de contacter le serveur.

Voir le code (Svelte)

<div class="docs-demo-stack">
  <Alert
    tone="info"
    title="Info"
    message="Une synchronisation est planifiée pour ce soir."
  />
  <Alert
    tone="success"
    title="Succès"
    message="Les modifications ont été enregistrées."
  />
  <Alert
    tone="warning"
    title="Avertissement"
    message="Votre quota approche de la limite."
  />
  <Alert
    tone="error"
    title="Erreur"
    message="Impossible de contacter le serveur."
  />
</div>

Avec actions

La zone actions (snippet) accueille des boutons à droite du message.

Avec actions

Échec du déploiement

La build a échoué à l'étape de tests.

Voir le code (Svelte)

<div class="docs-demo-stack">
  <Alert
    tone="error"
    title="Échec du déploiement"
    message="La build a échoué à l'étape de tests."
  >
    <Button size="sm" variant="secondary">Réessayer</Button>
  </Alert>
</div>

La zone actions est un Snippet dédié (à droite du message). Cette démo neutre rend le bouton via children pour rester identique dans les trois frameworks ; en usage réel, passez-le à la prop actions.

Titre seul

Le message est optionnel : un titre suffit pour une alerte courte.

Titre seul

Connexion réussie.

Voir le code (Svelte)

<div class="docs-demo-stack">
  <Alert tone="success" title="Connexion réussie." />
</div>

Anatomie

Conteneur (.st-alert) : <section> avec un filet de tonalité à gauche.
Contenu : titre (<h2>) + message optionnel + children éventuels.
Actions (.st-alert__actions) : zone optionnelle à droite.

Accessibilité

Le rôle est automatique : role="alert" pour warning/error (annonce immédiate), role="status" pour info/success (annonce polie).
La couleur n'est jamais le seul indice : le titre porte le sens.
Le contraste du filet et du texte suit les tokens feedback.

Lignes directrices

À faire

Titre concis qui résume l'état.
Message qui indique la cause et l'action possible.

À éviter

Empiler de nombreuses alertes simultanées.
Utiliser error pour un simple avertissement.

API

Prop	Type	Défaut	Description
`tone`	`"info" \| "success" \| "warning" \| "error"`	`"info"`	Tonalité ; détermine aussi le rôle ARIA.
`title`	`string`	requis	Titre de l'alerte.
`message`	`string`	optionnel	Texte secondaire sous le titre.
`actions`	`Snippet`	optionnel	Boutons d'action à droite.
`children`	`Snippet`	optionnel	Contenu additionnel sous le message.
`class`	`string`	optionnel	Classe(s) supplémentaire(s).
Autres attributs	`HTMLAttributes<HTMLElement>`	N/A	Propagés sur la <section>.

Tokens utilisés

--st-component-alert-background
--st-component-alert-border
--st-component-alert-text
--st-component-alert-infoBorder
--st-component-alert-successBorder
--st-component-alert-warningBorder
--st-component-alert-errorBorder