Alert
Les alertes annoncent des messages clés et critiques relatifs à la tâche d'un utilisateur et/ou son expérience chez POST.
Description
Les alertes annoncent des messages clés et critiques relatifs à la tâche d'un utilisateur et/ou son expérience chez POST- qu'elle soit digitale (site web, application,...) ou physique (en boutique, relatif à des livraisons, point PackUp,...).
Le message doit être clair, concis et, si besoin, proposer une action ou un lien utile.
Utilisez-les avec modération : leur impact repose sur leur pertinence et leur rareté.
Plateformes
Anatomie
- Containeur : sa couleur indique le type d'alerte
- Icone : indique le type d'alerte autrement que par la couleur (accessibilité)
- Texte : est requis pour toutes les bannières d'alerte. Ce message doit être concis.
- Lien (optionnel) : redirection pour offrir plus d'informations concernant l'alerte
Usage
Quand l'utiliser ?
Alerte globale :
Utilisée pour des urgences majeures visibles depuis la page d’accueil : incidents de sécurité, maintenance en cours, ou toute information ayant un fort impact sur les services de Post.
Ce type d’alerte s’affiche uniquement au-dessus du header et doit rester exceptionnel.
Alerte contextuelle :
Affichée dans une zone de contenu spécifique, cette alerte signale un problème ou une information importante liée au contexte immédiat.
Elle est positionnée juste au-dessus du contenu principal, généralement sous le header. Discrète, elle n’interrompt pas la navigation.
Quel style d'alerte contextuelle utiliser ?
Primary :
Pour transmettre une information principale, importante mais non critique.
Secondary :
Pour des informations complémentaires ou de moindre priorité..
Success :
Pour confirmer qu’une action a été réalisée avec succès. (À ne pas confondre avec un toast, qui est temporaire)
Danger :
Pour signaler un problème urgent ayant un impact négatif direct sur l’utilisateur. Nécessite une attention immédiate de sa part.
Warning :
Pour prévenir l’utilisateur qu’une action est attendue de sa part.
Do's and don'ts
-
Do
Les alertes globales doivent être placées au-dessus du header
-
Don't
Il est interdit de mettre les alertes globales en dessous du header
Il est interdit de mettre plus d'une alerte globale à la fois
-
Do
Les alertes contextuelles sont généralement placées en dessous du header
-
Don't
Il est interdit de mettre une alerte contextuelle au dessus du header
Les alertes contextuelles ne peuvent pas passer par dessus le contenu
Anatomie
- Containeur : sa couleur indique le type d'alerte
- Icone : indique le type d'alerte autrement que par la couleur (accessibilité)
- Texte : est requis pour toutes les bannières d'alerte. Ce message doit être concis.
- Lien (optionnel) : redirection pour offrir plus d'informations concernant l'alerte
Usage
Quand l'utiliser ?
Alerte globale :
Utilisée pour des urgences majeures visibles depuis la page d’accueil : incidents de sécurité, maintenance en cours, ou toute information ayant un fort impact sur les services de Post.
Ce type d’alerte s’affiche uniquement au-dessus du header et doit rester exceptionnel.
Alerte contextuelle :
Affichée dans une zone de contenu spécifique, cette alerte signale un problème ou une information importante liée au contexte immédiat.
Elle est positionnée juste au-dessus du contenu principal, généralement sous le header. Discrète, elle n’interrompt pas la navigation.
Quel style d'alerte contextuelle utiliser ?
Primary :
Pour transmettre une information principale, importante mais non critique.
Secondary :
Pour des informations complémentaires ou de moindre priorité..
Success :
Pour confirmer qu’une action a été réalisée avec succès. (À ne pas confondre avec un toast, qui est temporaire)
Danger :
Pour signaler un problème urgent ayant un impact négatif direct sur l’utilisateur. Nécessite une attention immédiate de sa part.
Warning :
Pour prévenir l’utilisateur qu’une action est attendue de sa part.
Do's and don'ts
-
Do
Les alertes globales doivent être placées au-dessus du header
-
Don't
Il est interdit de mettre les alertes globales en dessous du header
Il est interdit de mettre plus d'une alerte globale à la fois
-
Do
Les alertes contextuelles sont généralement placées en dessous du header
-
Don't
Il est interdit de mettre une alerte contextuelle au dessus du header
Les alertes contextuelles ne peuvent pas passer par dessus le contenu
Changelog
| Date | Changements |
|---|---|
| 01/09/2025 | Ajout de la version iOs/Android |
| 15/08/2025 | Initialisation du composant |
Des questions ou un feedback ?
N’hésitez pas à contacter la team Design System par mail.