Alertes
Les alertes affichent un message contextuel : confirmation d’une opération, avertissement, erreur ou simple information. Elles peuvent être fermées par l’utilisateur grâce au JavaScript de Cauri.
Couleurs#
Choisissez la classe alert-* selon le sens du message. alert-secondary et alert-success ont la même teinte verte dans Cauri ; réservez alert-success aux confirmations.
<div class="alert alert-primary" role="alert">Votre demande de carte a bien été enregistrée.</div>
<div class="alert alert-secondary" role="alert">Votre relevé de mars est disponible.</div>
<div class="alert alert-success" role="alert">Virement de 150 000 FCFA effectué avec succès.</div>
<div class="alert alert-danger" role="alert">Le virement a échoué : solde insuffisant.</div>
<div class="alert alert-warning" role="alert">Votre carte expire dans 30 jours.</div>
<div class="alert alert-info" role="alert">Les agences sont fermées lundi, jour férié.</div>
<div class="alert alert-light" role="alert">Aucune opération récente sur ce compte.</div>
<div class="alert alert-dark" role="alert">Maintenance prévue dimanche de 2 h à 4 h.</div>Liens dans une alerte#
Ajoutez alert-link aux liens pour qu’ils reprennent la couleur de l’alerte et restent lisibles.
<div class="alert alert-warning" role="alert">
Une échéance de prêt approche. <a href="#" class="alert-link">Consultez votre tableau d'amortissement</a> pour en connaître le détail.
</div>Contenu détaillé#
Une alerte peut contenir un titre alert-heading, des paragraphes et un séparateur. Retirez la marge du dernier paragraphe avec mb-0.
Votre dossier est transmis à votre agence. Un conseiller vous contactera sous 48 heures pour confirmer la mensualité de 85 000 FCFA.
Gardez vos trois derniers bulletins de salaire à portée de main.
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Demande de prêt envoyée</h4>
<p>Votre dossier est transmis à votre agence. Un conseiller vous contactera sous 48 heures pour confirmer la mensualité de 85 000 FCFA.</p>
<hr>
<p class="mb-0">Gardez vos trois derniers bulletins de salaire à portée de main.</p>
</div>Icône et alignement#
Combinez l’alerte avec les utilitaires de flexbox pour aligner une icône SVG. L’icône est décorative : masquez-la aux lecteurs d’écran avec aria-hidden.
<div class="alert alert-danger d-flex align-items-center" role="alert">
<svg class="flex-shrink-0 me-2" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2 1 21h22L12 2Zm1 14h-2v-2h2v2Zm0-4h-2V9h2v3Z"/>
</svg>
<div>Votre carte a été bloquée après trois codes erronés. Contactez votre agence.</div>
</div>Alerte fermable#
Ajoutez alert-dismissible, un bouton btn-close avec data-bs-dismiss="alert" et un aria-label. Les classes fade show animent la disparition.
<div class="alert alert-info alert-dismissible fade show" role="alert">
<strong>Nouveau :</strong> vous pouvez désormais épargner à partir de 5 000 FCFA.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Fermer"></button>
</div>Classes
| Classe | Rôle |
|---|---|
alert | Base de l’alerte : espacement, bordure et arrondi. |
alert-primary, alert-secondary, alert-success, alert-danger, alert-warning, alert-info, alert-light, alert-dark | Couleur contextuelle (fond, bordure et texte accordés). |
alert-heading | Titre interne qui reprend la couleur de l’alerte. |
alert-link | Lien dans une alerte, en gras et à la couleur de l’alerte. |
alert-dismissible | Réserve la place du bouton de fermeture (padding droit de 3 rem). |
fade et show | Animent la fermeture ; sans fade, l’alerte disparaît instantanément. |
Utilisation en JavaScript#
Les alertes fermables fonctionnent sans code avec data-bs-dismiss="alert". Voici comment réagir à la fermeture ou la déclencher depuis un script.
const alerte = document.querySelector('#alerte-virement');
alerte.addEventListener('close.bs.alert', (evenement) => {
// evenement.preventDefault() empêcherait la fermeture
});
alerte.addEventListener('closed.bs.alert', () => {
console.log('Alerte retirée de la page');
});
// Fermer l'alerte depuis un script
bootstrap.Alert.getOrCreateInstance(alerte).close();Méthodes et événements
L’alerte n’a aucune option de configuration. Fermée, elle est retirée du DOM : l’instance est détruite.
| Nom | Description |
|---|---|
close() | Ferme l’alerte (avec animation si elle porte fade) puis la supprime de la page. |
dispose() | Détruit l’instance sans retirer l’élément. |
getInstance(element) | Méthode statique : renvoie l’instance associée, ou null. |
getOrCreateInstance(element) | Méthode statique : renvoie l’instance existante ou en crée une. |
close.bs.alert | Avant la fermeture. preventDefault() annule la fermeture. |
closed.bs.alert | Après la fermeture, quand l’alerte a été retirée. |
Attributs data-bs
| Attribut | Où le poser | Rôle |
|---|---|---|
data-bs-dismiss="alert" | Bouton à l’intérieur de l’alerte | Ferme l’alerte parente au clic. |
Variables Sass
Les couleurs de chaque variante viennent de la map $theme-colors : modifier une couleur du thème change l’alerte correspondante.
| Variable | Défaut | Rôle |
|---|---|---|
$alert-padding-y | 1rem ($spacer) | Espacement vertical interne. |
$alert-padding-x | 1rem ($spacer) | Espacement horizontal interne. |
$alert-margin-bottom | 1rem | Marge sous l’alerte. |
$alert-border-radius | var(--bs-border-radius) | Arrondi des angles. |
$alert-border-width | var(--bs-border-width) | Épaisseur de la bordure. |
$alert-link-font-weight | 700 | Graisse de alert-link. |
$alert-dismissible-padding-r | 3rem | Espace réservé au bouton de fermeture. |
Personnalisation#
Chaque alerte lit des propriétés CSS locales (--bs-alert-bg, --bs-alert-color, --bs-alert-border-color, --bs-alert-padding-x, --bs-alert-padding-y…). Redéfinissez-les sur une classe à vous.
// Global : avant l'import de Cauri
$alert-padding-y: 1.25rem;
$alert-border-radius: 0.625rem;
// Local : une variante propre à votre application
.alert-agence {
--bs-alert-bg: #EEF3EA;
--bs-alert-color: #212121;
--bs-alert-border-color: #6CA942;
--bs-alert-link-color: #0856A1;
}Bonnes pratiques
À faire
- Rédigez un message court qui dit ce qui s’est passé et ce que l’utilisateur peut faire ensuite.
- Associez la couleur au sens :
dangerpour une erreur bloquante,warningpour une mise en garde,successpour une confirmation. - Placez l’alerte près de l’élément concerné ou en haut du contenu principal.
- Rendez fermables les messages d’information qui ne demandent aucune action.
À éviter
- Ne vous appuyez pas sur la seule couleur pour distinguer un succès d’une erreur : le texte doit porter le sens.
- N’empilez pas plusieurs alertes dans la même zone : regroupez-les ou hiérarchisez-les.
- Ne rendez pas fermable une erreur que l’utilisateur doit absolument corriger.
Accessibilité
- Ajoutez
role="alert"aux messages insérés dynamiquement : les lecteurs d’écran les annoncent aussitôt. Le conteneur doit exister dans la page avant l’insertion du texte. - Pour une information statique présente au chargement,
role="alert"n’est pas nécessaire. - Le bouton de fermeture porte un
aria-label(« Fermer ») ; les icônes décoratives portentaria-hidden="true". - Les couleurs
alert-*respectent les contrastes de lecture ; n’y forcez pas une autre couleur de texte sans vérifier le contraste.