Interface de contrôle des tests
Retour

Alertes (alerts)

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

Documentation

Préciser 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

Alerte par défaut

<div role="alert" class="fr-alert">
    <p class="fr-alert__title">Alertes</p>
    <p>Description</p>
</div>

Alerte info

<div role="alert" class="fr-alert fr-alert--info">
    <p class="fr-alert__title">Information Covid</p>
    <p>Description</p>
</div>

Alerte succès

<div role="alert" class="fr-alert fr-alert--success">
    <p class="fr-alert__title">Succès de l&#39;envoi</p>
    <p>Description</p>
</div>

Alerte erreur

<div role="alert" class="fr-alert fr-alert--error">
    <p class="fr-alert__title">Erreur détectée dans le formulaire</p>
    <p>Description</p>
</div>

Alerte avec bouton fermer

<div role="alert" class="fr-alert fr-alert--info">
    <p class="fr-alert__title">Information Covid</p>
    <p>Description</p>
    <button class="fr-link--close fr-link" title="Masquer le message">Masquer le message</button>
</div>

Alerte refermable (dans un collapse)

<div class="fr-collapse" id="alert-496">
    <div role="alert" class="fr-alert fr-alert--info">
        <p class="fr-alert__title">Information Covid</p>
        <p>Cliquer sur la croix pour fermer l&#39;alerte</p>
        <button class="fr-link--close fr-link" title="Masquer le message" aria-expanded="true" aria-controls="alert-496">Masquer le message</button>
    </div>
</div>

Alerte taille SM

<div role="alert" class="fr-alert fr-alert--info fr-alert--sm">
    <p>Information : titre de l&#39;information</p>
</div>

Alerte taille SM refermable

<div class="fr-collapse" id="alert-500">
    <div role="alert" class="fr-alert fr-alert--info fr-alert--sm">
        <p>Information : cliquer sur la croix pour fermer l&#39;alerte</p>
        <button class="fr-link--close fr-link" title="Masquer le message" aria-expanded="true" aria-controls="alert-500">Masquer le message</button>
    </div>
</div>

Alerte icône personnalisée

<div role="alert" class="fr-fi-lock-fill fr-alert">
    <p class="fr-alert__title">Alertes</p>
    <p>Description</p>
</div>