🇫🇷 Système de Design de l’État

Alerte - Alert

Raccourci typographique

Publié le 16/05/2024 | Modifié le 23/09/2024

Les alertes permettent d’attirer l’attention de l’utilisateur sur une information sans interrompre sa tâche en cours.

Règles d’utilisation

Usages

  • Le message doit être écrit dans un langage compréhensible facilement. Il faut éviter le jargon. Idéalement, il doit contenir la nature du message porté par le type (succès, erreur, information), l’icône et la couleur ne garantissent pas à elles seules la bonne compréhension du message pour la totalité des utilisateurs.
  • Quand l’utilisateur doit faire une action en lien ou suite à l’affichage d’une alerte, il faut rendre cette tâche aussi simple que possible en détaillant ce qui est attendu de la part de l’utilisateur dans la description.

Contenus

  • Le titre de l’alerte doit être clair et concis.
  • Le texte de description de d’alerte doit détailler clairement l’information/le problème à l’utilisateur.
  • Le ton doit être courtois, il ne faut pas blâmer l’utilisateur, mais l’accompagner.

Accessibilité

  • La nature du message (erreur, succès, information) doit être clairement exprimée dans le titre de l’alerte. La couleur ou l’icône n’étant pas accessibles ou compréhensibles par tous les utilisateurs.
  • Le titre de l’alerte est dans un élément <h3>. Vous pouvez remplacer cette balise par un titre adapté à votre hiérarchie de contenu avec le paramètre balise_titre.

Types d’alerte

4 types d’alerte sont disponibles permettant de donner des informations de différentes natures.

Information

L’alerte information est à utiliser pour mettre en exergue des informations importantes.

Information : titre du message

Description détaillée du message

<dsfr-alerte|titre=Information : titre du message>
	Description détaillée du message
</dsfr-alerte>

Succès

L’alerte succès sert à indiquer à l’utilisateur qu’une action ou une tâche a été terminée avec succès.

Succès : titre du message

Description détaillée du message

<dsfr-alerte|type=succes|titre=Succès : titre du message>
	Description détaillée du message
</dsfr-alerte>

Attention

L’alerte attention est à utiliser pour mettre en exergue des risques ou points d’attention importants.

Attention : titre du message

Description détaillée du message

<dsfr-alerte|type=attention|titre=Attention : titre du message>
	Description détaillée du message
</dsfr-alerte>

Erreur

L’alerte erreur est à utiliser quand il y a plusieurs erreurs dans un formulaire, ou des erreurs bloquantes à remonter pour l’utilisateur.

Erreur : titre du message

Description détaillée du message

<dsfr-alerte|type=erreur|titre=Erreur : titre du message>
	Description détaillée du message
</dsfr-alerte>

Paramètres du raccourci <dsfr-alerte>

Paramètres du raccourci <dsfr-alerte>
Nom du paramètre Valeur par défaut Valeur(s) autorisée(s)
titre Un titre - obligatoire sur la taille moyenne, optionnel sur la taille petite.
texte Un texte de description - optionnel sur la taille moyenne, obligatoire sur la taille petite.
taille moyenne petite, moyenne L’alerte existe en deux tailles, à utiliser en fonction de l’espace d’affichage disponible.
type information information, succes, attention, erreur Il y a 4 types d’alerte permettant de donner des informations de différentes natures.
afficher_croix_fermeture non oui, non Il est possible d’ajouter un bouton de fermeture afin que l’utilisateur puisse masquer l’alerte.
texte_croix_fermeture Masquer le message Le texte affiché au survol de la croix de fermeture.
icone Nom de l’icône DSFR de la charte de l’État (ex : thumb-up-line, lightbulb-fill, error-line, etc...)
balise_titre h3 h2, h3, h4, h5, h6 Le titre, matérialisé par la classe fr-alert__title, est par défaut une balise <h3>. Vous pouvez choisir le niveau de titre convenant à l’arborescence de votre page.

Alerte par défaut (taille=petite et type=information)

Titre de l'alerte

Alerte par défaut avec un titre et un texte de description (taille=moyenne et type=information)

Alerte par défaut avec uniquement un titre (`taille=moyenne` et `type=information`)

Erreur détectée

Description détaillée du message

Succès

Description détaillée du message

Information

Description détaillée du message

Attention

Description détaillée du message

Alerte de petite taille sans titre

Titre

Alerte de petite taille avec un titre et un texte de description

Alerte de petite taille refermable

Alerte avec bouton fermer

Cliquer sur la croix pour fermer l’alerte.

Alerte avec bouton fermer personnalisé

La croix pour fermer l’alerte a un texte personnalisé lors de l’affichage de son infobulle (au survol du curseur).

Alerte de petite taille avec icône personnalisée

Alerte avec icône personnalisée

Description détaillée du message

Succès

Alerte de petite taille avec titre, icône personnalisée et bouton de fermeture

<dsfr-alerte>
	Alerte par défaut (`taille=petite` et `type=information`)
</dsfr-alerte>

<dsfr-alerte|titre=Titre de l'alerte>
	Alerte par défaut avec un titre et un texte de description (`taille=moyenne` et `type=information`)
</dsfr-alerte>

<dsfr-alerte|titre=Alerte par défaut avec uniquement un titre (`taille=moyenne` et `type=information`)>

<dsfr-alerte|type=erreur|titre=Erreur détectée>
	Description détaillée du message
</dsfr-alerte>

<dsfr-alerte|type=succes|titre=Succès>
	Description détaillée du message
</dsfr-alerte>

<dsfr-alerte|type=information|titre=Information>
	Description détaillée du message
</dsfr-alerte>

<dsfr-alerte|type=attention|titre=Attention>
	Description détaillée du message
</dsfr-alerte>

<dsfr-alerte|taille=petite>
	Alerte de petite taille sans titre
</dsfr-alerte>

<dsfr-alerte|taille=petite|titre=Titre>
	Alerte de petite taille avec un titre et un texte de description
</dsfr-alerte>

<dsfr-alerte|taille=petite|afficher_croix_fermeture=oui>
	Alerte de petite taille refermable
</dsfr-alerte>

<dsfr-alerte|titre=Alerte avec bouton fermer|afficher_croix_fermeture=oui>
	Cliquer sur la croix pour fermer l'alerte.
</dsfr-alerte>

<dsfr-alerte|type=attention|titre=Alerte avec bouton fermer personnalisé|afficher_croix_fermeture=oui|texte_croix_fermeture=Texte personnalisé de l'infobulle>
	La croix pour fermer l'alerte a un texte personnalisé lors de l'affichage de son infobulle (au survol du curseur).
</dsfr-alerte>

<dsfr-alerte|taille=petite|icone=lightbulb-fill>
	Alerte de petite taille avec icône personnalisée
</dsfr-alerte>

<dsfr-alerte|titre=Alerte avec icône personnalisée|icone=lock-fill>
	Description détaillée du message
</dsfr-alerte>

<dsfr-alerte
	|type=succes
	|taille=petite
	|icone=lightbulb-fill
	|afficher_croix_fermeture=oui
	|titre=Succès
	|texte=Alerte de petite taille avec titre, icône personnalisée et bouton de fermeture
>