Alerte

Message structuré dans le flux de la page : icône, titre optionnel, texte et modificateurs sémantiques (information par défaut, succès, attention, erreur). Tailles sm / md et bouton de fermeture optionnel.

Structure HTML (icône)

Reproduisez les icônes Remix utilisées par le composant Vue : ri-information-line (info), ri-checkbox-circle-line (succès), ri-alert-line (avertissement), ri-error-warning-line (erreur).

Exemples

Information

Votre demande a bien été prise en compte.

Succès

Votre dossier a été enregistré avec succès.

Attention

Certaines pièces jointes ne sont pas au format attendu.

Erreur

La soumission a échoué. Réessayez ultérieurement.

<div class="bj-alert" role="alert">
  <i class="bj-alert__icon ri-information-line" aria-hidden="true"></i>
  <div class="bj-alert__body">
    <p class="bj-alert__title">Information</p>
    <div class="bj-alert__text">Votre demande a bien été prise en compte.</div>
  </div>
</div>
<div class="bj-alert bj-alert--success" role="alert">
  <i class="bj-alert__icon ri-checkbox-circle-line" aria-hidden="true"></i>
  <div class="bj-alert__body">
    <p class="bj-alert__title">Succès</p>
    <div class="bj-alert__text">Votre dossier a été enregistré avec succès.</div>
  </div>
</div>
<div class="bj-alert bj-alert--warning" role="alert">
  <i class="bj-alert__icon ri-alert-line" aria-hidden="true"></i>
  <div class="bj-alert__body">
    <p class="bj-alert__title">Attention</p>
    <div class="bj-alert__text">Certaines pièces jointes ne sont pas au format attendu.</div>
  </div>
</div>
<div class="bj-alert bj-alert--error" role="alert">
  <i class="bj-alert__icon ri-error-warning-line" aria-hidden="true"></i>
  <div class="bj-alert__body">
    <p class="bj-alert__title">Erreur</p>
    <div class="bj-alert__text">La soumission a échoué. Réessayez ultérieurement.</div>
  </div>
</div>

<div class="bj-alert" role="alert">
  <i class="bj-alert__icon ri-information-line" aria-hidden="true"></i>
  <div class="bj-alert__body">
    <div class="bj-alert__text">Message sans titre : omettez <code>bj-alert__title</code>.</div>
  </div>
</div>

Alerte avec bouton de fermeture

Titre de l'alerte

Description détaillée.

<div class="bj-alert" role="alert">
  <i class="bj-alert__icon ri-information-line" aria-hidden="true"></i>
  <div class="bj-alert__body">
    <p class="bj-alert__title">Titre de l'alerte</p>
    <div class="bj-alert__text">Description détaillée.</div>
  </div>
  <button type="button" class="bj-alert__close" aria-label="Fermer"><i class="ri-close-line" aria-hidden="true"></i></button>
</div>

Alerte compacte

La classe bj-alert--sm réduit le padding et les tailles de texte pour les encarts ou colonnes étroites.

Rappel

Les guichets ferment à 17 h 00 les jours ouvrés.

<div class="bj-alert bj-alert--sm" role="alert">
  <i class="bj-alert__icon ri-information-line" aria-hidden="true"></i>
  <div class="bj-alert__body">
    <p class="bj-alert__title">Rappel</p>
    <div class="bj-alert__text">Les guichets ferment à 17 h 00 les jours ouvrés.</div>
  </div>
</div>

Variante × taille

Les quatre tons avec bj-alert--sm : info = bj-alert seul (pas de bj-alert--info), puis bj-alert--success, bj-alert--warning, bj-alert--error.

Info compacte (classe de base).

Succès compact.

Avertissement compact.

Échec

Réessayez plus tard.

<!-- Info sm (classe de base, pas de --info) -->
<div class="bj-alert bj-alert--sm" role="alert">
  <i class="bj-alert__icon ri-information-line" aria-hidden="true"></i>
  <div class="bj-alert__body"><div class="bj-alert__text">Info compacte.</div></div>
</div>
<div class="bj-alert bj-alert--success bj-alert--sm" role="alert">…</div>
<div class="bj-alert bj-alert--warning bj-alert--sm" role="alert">…</div>
<div class="bj-alert bj-alert--error bj-alert--sm" role="alert">…</div>

Variante × fermeture

Le bouton bj-alert__close peut accompagner n’importe quelle variante ; la structure reste icône + corps + bouton optionnel.

Maintenance

Interruption prévue ce soir.

<div class="bj-alert bj-alert--warning" role="alert">
  <i class="bj-alert__icon ri-alert-line" aria-hidden="true"></i>
  <div class="bj-alert__body">
    <p class="bj-alert__title">Maintenance</p>
    <div class="bj-alert__text">Interruption prévue ce soir.</div>
  </div>
  <button type="button" class="bj-alert__close" aria-label="Fermer"><i class="ri-close-line" aria-hidden="true"></i></button>
</div>

Toutes les variantes × fermeture

Chaque variante peut inclure bj-alert__close avec le même couple d’icônes Remix.

Info avec fermeture.

Succès avec fermeture.

Avertissement avec fermeture.

Erreur avec fermeture.

<div class="bj-alert" role="alert">
  <i class="bj-alert__icon ri-information-line" aria-hidden="true"></i>
  <div class="bj-alert__body"><div class="bj-alert__text">Info.</div></div>
  <button type="button" class="bj-alert__close" aria-label="Fermer"><i class="ri-close-line" aria-hidden="true"></i></button>
</div>
<div class="bj-alert bj-alert--success" role="alert">… + bj-alert__close</div>
<div class="bj-alert bj-alert--warning" role="alert">… + bj-alert__close</div>
<div class="bj-alert bj-alert--error" role="alert">… + bj-alert__close</div>

Classes CSS

Classe	Description
`bj-alert`	Conteneur flex de l’alerte ; style information (bordure et fond) sans modificateur supplémentaire.
`bj-alert__icon`	Icône sémantique à gauche (Remix Icon).
`bj-alert__body`	Zone titre + texte.
`bj-alert__title`	Titre du message (optionnel).
`bj-alert__text`	Corps du message.
`bj-alert__close`	Bouton de fermeture aligné à droite (aucune classe <code>bj-alert--closable</code> en feuille de style — la présence du bouton suffit).
`bj-alert--success`	Variante succès (bordure et fond).
`bj-alert--warning`	Variante avertissement.
`bj-alert--error`	Variante erreur.
`bj-alert--sm`	Variante compacte.