Composant · Feedback

Notification

Stable

Message inline persistant avec tonalité, titre obligatoire, message optionnel et zone d'actions/actionnable, destiné à la zone courante de l'interface.

Modifications enregistrées

Vos préférences ont été mises à jour.

Espace presque plein

Il reste 2 Go disponibles sur votre tenant.

Voir le code (Svelte)

<Notification
  tone="success"
  title="Modifications enregistrées"
  message="Vos préférences ont été mises à jour."
/>
<Notification
  tone="warning"
  title="Espace presque plein"
  message="Il reste 2 Go disponibles sur votre tenant."
/>

Quand l'utiliser

Informer l'utilisateur sans interrompre, avec éventuellement une action immédiate.
Préférer cette forme à Toast pour un message qui reste visible tant que le contexte n'est pas résolu.
Idéale pour annuler, réessayer, ouvrir un détail, ou rappeler une étape restante.

Tonalités

Info

Une version mineure a été publiée.

Sauvegardé

Les modifications ont été prises en compte.

Attention

Le quota approche des limites.

Échec

Le chargement a échoué.

Voir le code (Svelte)

<Notification
  tone="info"
  title="Info"
  message="Une version mineure a été publiée."
/>
<Notification
  tone="success"
  title="Sauvegardé"
  message="Les modifications ont été prises en compte."
/>
<Notification
  tone="warning"
  title="Attention"
  message="Le quota approche des limites."
/>
<Notification tone="error" title="Échec" message="Le chargement a échoué." />

Avec actions

Le slot `actions` aligne des boutons à droite du message.

Avec actions

Session incomplète

Vous avez des changements non validés.

Voir le code (Svelte)

<Notification
  tone="warning"
  title="Session incomplète"
  message="Vous avez des changements non validés."
>
  <Button variant="ghost">Réessayer</Button>
</Notification>

Avec fermeture

La fermeture est contrôlée par le parent via `onDismiss`.

Avec fermeture

Connexion perdue

Essayez une nouvelle synchronisation.

Voir le code (Svelte)

<Notification
  tone="error"
  title="Connexion perdue"
  message="Essayez une nouvelle synchronisation."
  dismissible
/>

Anatomie

Conteneur `.st-notification` : accent couleur par tonalité et rôle ARIA associé.
Contenu `.st-notification__content` : titre + message + enfants additionnels.
Panneau `.st-notification__meta` : actions + fermeture.

Accessibilité

Rôle ARIA : `alert` pour error, `status` sinon.
Le libellé de fermeture doit rester localisable via `dismissLabel`.
La couleur n'est pas le seul indice : le titre doit exprimer le résultat.

API

Prop	Type	Défaut	Description
`tone`	`"info" \| "success" \| "warning" \| "error"`	`"info"`	Tonalité sémantique.
`title`	`string`	requis	Titre obligatoire de la notification.
`message`	`string`	optionnel	Texte secondaire optionnel.
`actions`	`Snippet`	optionnel	Zone d'actions à droite.
`children`	`Snippet`	optionnel	Contenu additionnel sous le message.
`dismissible`	`boolean`	`false`	Affiche le bouton fermer (uniquement si `onDismiss` est défini).
`dismissLabel`	`string`	`"Dismiss"`	Libellé accessible du bouton fermer.
`onDismiss`	`() => void`	N/A	Callback au clic du bouton fermer.

Tokens utilisés

--st-component-notification-background
--st-component-notification-border
--st-component-notification-text
--st-component-notification-accentWidth
--st-component-notification-infoAccent
--st-component-notification-successAccent
--st-component-notification-warningAccent
--st-component-notification-errorAccent
--st-component-control-hoverBorder
--st-component-control-hoverBackground