DSFR v1.12.0
L'alerte permet d’attirer l’attention de l’utilisateur sur une information sans interrompre sa tâche.
DocumentationPrécisez le type d'alerte (Information/Succès/Erreur) dans le titre ou, à défaut, dans le contenu de l'alerte.
Le titre est défini par la classe "fr-alert__title", la balise <p> peut être remplacée par un niveau de titre hx suivant le contexte.
Description
<div id="alert-1181" class="fr-alert">
<h3 class="fr-alert__title">Titre</h3>
<p>Description</p>
</div>
Description
<div id="alert-1183" class="fr-alert fr-alert--success">
<h3 class="fr-alert__title">Succès de l'envoi</h3>
<p>Description</p>
</div>
Description
<div id="alert-1185" class="fr-alert fr-alert--error">
<h3 class="fr-alert__title">Erreur détectée dans le formulaire</h3>
<p>Description</p>
</div>
Description
<div id="alert-1187" class="fr-alert fr-alert--info">
<h3 class="fr-alert__title">Information Covid</h3>
<p>Description</p>
</div>
Description
<div id="alert-1189" class="fr-alert fr-alert--warning">
<h3 class="fr-alert__title">Attention</h3>
<p>Description</p>
</div>
Information : titre de l'information
<div id="alert-1191" class="fr-alert fr-alert--info">
<p>Information : titre de l'information</p>
</div>
Cliquer sur la croix pour fermer l'alerte
<div id="alert-1195" class="fr-alert fr-alert--info">
<h3 class="fr-alert__title">Information Covid</h3>
<p>Cliquer sur la croix pour fermer l'alerte</p>
<button title="Masquer le message" onclick="const alert = this.parentNode; alert.parentNode.removeChild(alert)" id="button-1196" class="fr-btn--close fr-btn">Masquer le message</button>
</div>
Description
<div id="alert-1198" class="fr-alert fr-alert--info fr-alert--sm">
<h3 class="fr-alert__title">Titre</h3>
<p>Description</p>
</div>
Information : titre de l'information
<div id="alert-1200" class="fr-alert fr-alert--info fr-alert--sm">
<p>Information : titre de l'information</p>
</div>
Information : cliquer sur la croix pour fermer l'alerte
<div id="alert-1204" class="fr-alert fr-alert--info fr-alert--sm">
<p>Information : cliquer sur la croix pour fermer l'alerte</p>
<button title="Masquer le message" onclick="const alert = this.parentNode; alert.parentNode.removeChild(alert)" id="button-1205" class="fr-btn--close fr-btn">Masquer le message</button>
</div>
<div id="alert-1207" class="fr-icon-lock-fill fr-alert fr-alert">
<h3 class="fr-alert__title">Titre</h3>
<p>Description</p>
</div>
Ajouter l'attribut role="alert" lorsque les alertes sont ajoutées dynamiquement dans le DOM (en js après le chargement de la page)
<div id="alert-1211" role="alert" class="fr-alert fr-alert--error">
<h3 class="fr-alert__title">Erreur détectée dans le formulaire</h3>
<p>Cliquer sur la croix pour fermer l'alerte</p>
<button title="Masquer le message" onclick="const alert = this.parentNode; alert.parentNode.removeChild(alert)" id="button-1212" class="fr-btn--close fr-btn">Masquer le message</button>
</div>
Les exemples suivants sont dépréciés, ne pas utiliser comme référence
Pour support des versions précédentes
Information Covid
Cliquer sur la croix pour fermer l'alerte
<div class="fr-alert fr-alert--info">
<p class="fr-alert__title">Information Covid</p>
<p>Cliquer sur la croix pour fermer l'alerte</p>
<button title="Masquer le message" onclick="const alert = this.parentNode; alert.parentNode.removeChild(alert)" id="link-1217" class="fr-link--close fr-link">Masquer le message</button>
</div>