Alerte - Alert

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

Il existe deux tailles d’alertes : MD (par défaut) et SM. En taille MD l’alerte doit avoir un titre et peut avoir un contenu. En taille SM l’alerte ne peut pas avoir de titre et doit avoir un contenu.

Alerte MD de succès avec du contenu

Une alerte a un type facultatif parmi :error, :success, :info ou :warning. Si le type n’est pas précisé, l’alerte par défaut a une couleur grise.

Code

= dsfr_alert(type: :success, title: "Succès de votre inscription") do
  Votre inscription a bien été enregistrée

Résultat

Succès de votre inscription

Votre inscription a bien été enregistrée 

<div class="fr-alert fr-alert--success">
  <h3 class="fr-alert__title">
    Succès de votre inscription
  </h3>
  <p>
    Votre inscription a bien été enregistrée
  </p>
</div>

Alerte MD de succès sans contenu

En taille MD, le titre title est obligatoire pour les alertes mais le contenu est optionnel.

Code

= dsfr_alert(type: :success, title: "Succès de votre inscription")

Résultat

Succès de votre inscription 

<div class="fr-alert fr-alert--success">
  <h3 class="fr-alert__title">
    Succès de votre inscription
  </h3>
</div>

Alerte d’erreur taille SM sans contenu

La taille size peut être :sm ou :md (par défaut).

A l’inverse, en taille SM il ne peut pas y avoir de titre mais le contenu est obligatoire.

Code

= dsfr_alert(type: :error, size: :sm) do
  Une erreur est survenue pendant votre inscription, veuillez contacter votre administrateur

Résultat

Une erreur est survenue pendant votre inscription, veuillez contacter votre administrateur 

<div class="fr-alert fr-alert--error fr-alert--sm">
  <p>
    Une erreur est survenue pendant votre inscription, veuillez contacter votre administrateur
  </p>
</div>

Alerte avec un bouton pour fermer

Code

= dsfr_alert(type: :success, title: "Bienvenue", close_button: true) do
  Merci pour votre inscription

Résultat

Bienvenue

Merci pour votre inscription 

<div class="fr-alert fr-alert--success">
  <h3 class="fr-alert__title">
    Bienvenue
  </h3>
  <p>
    Merci pour votre inscription
  </p>
  <button class="fr-btn--close fr-btn" title="Masquer le message" onclick="const alert = this.parentNode; alert.parentNode.removeChild(alert)">
    Masquer le message
  </button>
</div>

Alerte avec une icône personnalisée

L’alerte peut avoir une icône personnalisée quand le type n’est pas défini.

Code

= dsfr_alert(icon_name: "eye-fill", size: :sm) do
  Votre inscription est en cours de traitement

Résultat

Votre inscription est en cours de traitement 

<div class="fr-alert fr-icon-eye-fill fr-alert--sm">
  <p>
    Votre inscription est en cours de traitement
  </p>
</div>

Plus d’informations