Design ALERTS

Introduction aux alerts (messages utilisateurs)

Les .alert sont des composants permettant d'afficher des messages importants à l'utilisateur. Ils servent à communiquer des informations telles qu’un succès, une erreur, un avertissement ou une information.

Faciles à intégrer, les alerts permettent d’améliorer l’expérience utilisateur en fournissant un retour visuel immédiat après une action (formulaire, traitement, etc.).

Les alerts sont idéales pour informer rapidement l’utilisateur d’un événement

Types d’alerts

Aperçu

.alert .alert-success

.alert .alert-danger

.alert .alert-warning

.alert .alert-info

Code


<div class="alert alert-success">.alert .alert-success</div>
<div class="alert alert-danger">.alert .alert-danger</div>
<div class="alert alert-warning">.alert .alert-warning</div>
<div class="alert alert-info">.alert .alert-info</div>

Alert fermable

Aperçu

.alert .alert-warning .alert-dismissible

Code


<div class="alert alert-warning alert-dismissible fade show" role="alert">
.alert .alert-warning .alert-dismissible
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

Alert avec icône

Aperçu

.alert .alert-success + icône

Code


<div class="alert alert-success">
<i class="fa-solid fa-circle-check me-2"></i>
.alert .alert-success + icône
</div>

Alert avec titre

Aperçu

.alert-heading

Message principal

Texte secondaire

Code


<div class="alert alert-danger">
<h4 class="alert-heading">.alert-heading</h4>
<p>Message principal</p>
<hr>
<p class="mb-0">Texte secondaire</p>
</div>

Alert avec lien

Aperçu

Voir la documentation

Code


<div class="alert alert-info">
Voir la <a href="#" class="alert-link">documentation</a>
</div>

Bonnes pratiques

alert-success → succès
alert-danger → erreur
alert-warning → attention
alert-info → information

Ne pas surcharger l’interface avec trop d’alerts