🚨 Alertes Orochi

Les alertes permettent d'afficher des messages contextuels importants à vos utilisateurs. Elles sont conçues pour attirer l'attention sur des informations critiques, des succès, des avertissements ou des erreurs.

Comment elles fonctionnent

Les alertes Orochi sont des composants flexibles qui s'adaptent à divers contextes d'utilisation. Elles utilisent un système de classes modulaires pour contrôler leur apparence et leur comportement.

  • .o-alert : classe de base pour toutes les alertes
  • .o-alert-{type} : variantes de couleur (primary, secondary, success, etc.)
  • .o-alert-border-left : ajoute une bordure latérale distinctive
  • .o-alert-diphoneissible : rend l'alerte fermable

Alertes standard

Les alertes standard offrent une variété de couleurs contextuelles pour différents types de messages. Chaque couleur correspond à un niveau d'importance ou un type de message spécifique.

Alerte Primaire
Alerte Secondaire
Alerte Succès
Alerte Danger
Alerte Avertissement
Alerte Info
Alerte Light
Alerte Dark
<div class="o-alert o-alert-primary">Alerte Primaire</div>
<div class="o-alert o-alert-secondary">Alerte Secondaire</div>
<div class="o-alert o-alert-success">Alerte Succès</div>
<div class="o-alert o-alert-danger">Alerte Danger</div>
<div class="o-alert o-alert-warning">Alerte Avertissement</div>
<div class="o-alert o-alert-info">Alerte Info</div>
<div class="o-alert o-alert-light">Alerte Light</div>
<div class="o-alert o-alert-dark">Alerte Dark</div>

Alertes avec icônes

Ajoutez des icônes à vos alertes pour améliorer la compréhension et l'accessibilité. Les icônes aident à identifier rapidement le type de message sans avoir à lire le texte intégral.

Alerte informative avec icône
Opération réussie avec confirmation
Erreur détectée nécessitant une action
Avertissement important à considérer 
<div class="o-alert o-alert-warning">
    <i class="bx bx-error o-me-2"></i>
    Message d'avertissement avec icône
</div>

Alertes avec bordures accentuées

Les alertes bordurées utilisent la classe .o-alert-border-left pour ajouter une bordure latérale distinctive qui renforce l'impact visuel du message.

Bordure gauche primaire pour informations importantes
Bordure gauche succès pour confirmations
Bordure gauche danger pour alertes critiques
Bordure gauche info pour messages généraux 
<div class="o-alert o-alert-info o-alert-border-left">
    Alerte avec bordure latérale accentuée
</div>

Alertes fermables

Les alertes fermables permettent à l'utilisateur de masquer les messages une fois qu'ils ont été lus. Utilisez la classe .o-alert-diphoneissible et incluez un bouton de fermeture avec la classe .o-alert-close.

Message important pouvant être fermé
Succès pouvant être masqué après lecture
Erreur pouvant être fermée une fois corrigée
Avertissement pouvant être ignoré 
<div class="o-alert o-alert-danger o-alert-diphoneissible">
    Message d'alerte important
    <button class="o-alert-close">
        <i class="bx bx-x"></i>
    </button>
</div>

🎓 Bonnes pratiques

Pour une utilisation optimale des alertes dans vos interfaces, suivez ces recommandations :

  • Utilisez les couleurs de manière cohérente et contextuelle
  • Ajoutez des icônes pertinentes pour une meilleure compréhension visuelle
  • Rendez les alertes importantes fermables pour une meilleure expérience utilisateur
  • Utilisez un langage clair et concis dans vos messages d'alerte
  • Réservez les alertes pour les informations vraiment importantes
💡 Personnalisation : Utilisez les variables CSS pour modifier l'apparence des alertes : 
:root {
    --o-alert-padding: 1rem 1.5rem;
    --o-alert-border-radius: 0.375rem;
    --o-alert-primary-bg: #your_color;
    --o-alert-primary-text: #your_color;
}