Composant · Feedback

Toast

Stable

Notification éphémère qui confirme le résultat d'une action sans interrompre la tâche en cours. Brève, non bloquante, elle s'efface seule ; l'application hôte gère l'apparition, la pile et la durée.

Déploiement réussi

La version v1.4.2 est en production.

Erreur de déploiement

Impossible de contacter le serveur.

Synchronisation en cours

Les modifications seront disponibles dans quelques instants.

Voir le code (Svelte)

<Toast
  tone="success"
  title="Déploiement réussi"
  message="La version v1.4.2 est en production."
/>
<Toast
  tone="error"
  title="Erreur de déploiement"
  message="Impossible de contacter le serveur."
/>
<Toast
  tone="info"
  title="Synchronisation en cours"
  message="Les modifications seront disponibles dans quelques instants."
/>

Quand l'utiliser

Confirmer le succès ou l'échec d'une action ponctuelle (enregistrement, envoi, compilation).
Donner un retour court qui ne requiert pas de décision immédiate.
Pour un message persistant qui reste à l'écran, utilisez Alert.

Quand ne pas l'utiliser

Pour une erreur bloquante exigeant une action : utilisez Modal ou Alert dans le flux.
Pour une information de fond contextuelle et durable : utilisez Alert.
Ne cachez jamais une information critique uniquement dans un toast éphémère.

Tonalités

Quatre tonalités sémantiques ; le filet de gauche en prend la couleur.

Tonalités

Synchronisation lancée

La synchronisation du tenant est en cours.

Enregistré

Le thème du tenant a été compilé.

Quota proche

Il reste 10 % de l'espace alloué.

Échec

Le mappage de l'adaptateur est incomplet.

Voir le code (Svelte)

<Toast
  tone="info"
  title="Synchronisation lancée"
  message="La synchronisation du tenant est en cours."
/>
<Toast
  tone="success"
  title="Enregistré"
  message="Le thème du tenant a été compilé."
/>
<Toast
  tone="warning"
  title="Quota proche"
  message="Il reste 10 % de l'espace alloué."
/>
<Toast
  tone="error"
  title="Échec"
  message="Le mappage de l'adaptateur est incomplet."
/>

Avec actions

Le snippet actions accueille un bouton court (annuler, réessayer) aligné à droite.

Avec actions

Élément supprimé

L'élément a été retiré de la liste.

Envoi échoué

La connexion a été interrompue.

Voir le code (Svelte)

<Toast
  tone="success"
  title="Élément supprimé"
  message="L'élément a été retiré de la liste."
/>
<Toast
  tone="error"
  title="Envoi échoué"
  message="La connexion a été interrompue."
/>

Titre seul

Le message est optionnel : un titre seul suffit pour une confirmation minimale.

Titre seul

Copié dans le presse-papier

Voir le code (Svelte)

<Toast tone="success" title="Copié dans le presse-papier" />

Anatomie

Conteneur (.st-toast, .st-toast--<tone>) : surface avec filet de gauche coloré de 0,25 rem.
Contenu (.st-toast__content) : titre et message optionnel empilés.
Titre (.st-toast__title) : libellé court, obligatoire.
Actions (.st-toast__actions) : zone optionnelle alignée à droite.

Accessibilité

Les tonalités info/success/warning utilisent role="status" (annonce polie).
La tonalité error utilise role="alert" (annonce assertive immédiate).
L'application hôte doit garantir une durée d'affichage suffisante avant la disparition.
La couleur du filet ne porte pas seule le sens : le titre énonce le résultat.

Lignes directrices

À faire

Énoncer le résultat dans le titre, en une phrase.
Réserver error à un échec réel et actionnable.

À éviter

Empiler de longs paragraphes : le toast doit rester bref.
Y placer la seule trace d'une information critique.

API

Prop	Type	Défaut	Description
`tone`	`"info" \| "success" \| "warning" \| "error"`	`"info"`	Tonalité sémantique ; pilote la couleur du filet et le rôle ARIA.
`title`	`string`	requis	Libellé principal.
`message`	`string`	optionnel	Texte secondaire sous le titre.
`actions`	`Snippet`	optionnel	Zone d'actions à droite.
`class`	`string`	optionnel	Classe(s) sur le conteneur.
Autres attributs	`HTMLAttributes<HTMLElement>`	N/A	Propagés sur le <section> conteneur.

Tokens utilisés

--st-component-toast-background
--st-component-toast-border
--st-component-toast-text
--st-component-toast-shadow
--st-component-toast-zIndex
--st-component-toast-infoBorder
--st-component-toast-successBorder
--st-component-toast-warningBorder
--st-component-toast-errorBorder