Alerte

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 obligatoire parmi :error, :success, :info ou :warning.

Code

= dsfr_alert(type: :success, title: "Succès de votre inscription") do |alert|
  | 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>

Plus d’informations