🔘 Boutons Orochi

Les boutons sont un composant essentiel d’Orochi : ils permettent de créer des actions claires et intuitives, tout en respectant les bonnes pratiques de design. Ce guide vous explique comment utiliser les différents styles, tailles, états et variantes des boutons disponibles.

Comment ils fonctionnent

Les boutons Orochi sont conçus pour être flexibles et adaptés à divers contextes. Ils possèdent plusieurs classes de base, permettant d'ajuster leur apparence, leur taille, et leurs états (actifs/désactivés, chargement, etc.). Le système est modifiable via des variables CSS pour personnaliser les couleurs et les marges.

  • .o-btn : classe de base pour tous les boutons
  • .o-btn-{color} : variantes de couleur (primaire, secondaire, succès, etc.)
  • .o-btn-phone / .o-btn-laptop : tailles ajustables
  • .o-btn-outline-{color} : boutons sans fond

Styles de base

Ces boutons représentent les états de base (primaire, secondaire, succès, etc.). Ils sont utilisés pour des actions courantes, comme la validation ou l'information.

<button class="o-btn o-btn-primary">Primaire</button>
<button class="o-btn o-btn-secondary">Secondaire</button>
<button class="o-btn o-btn-success">Succès</button>
<button class="o-btn o-btn-danger">Danger</button>
<button class="o-btn o-btn-warning">Warning</button>
<button class="o-btn o-btn-info">Info</button>
💡 Personnalisation : Utilisez les variables CSS pour modifier les couleurs du fond, du texte et de la bordure, ainsi que leurs variantes au survol.
:root {
  /* 🎨 Couleurs de fond principales des boutons */
  --o-btn-bg-primary: #votre_couleur; /* Fond du bouton principal */
  --o-btn-bg-secondary: #votre_couleur; /* Fond du bouton secondaire */
  --o-btn-bg-success: #votre_couleur; /* Fond du bouton de succès */
  --o-btn-bg-danger: #votre_couleur; /* Fond du bouton d’erreur */
  --o-btn-bg-warning: #votre_couleur; /* Fond du bouton d’avertissement */
  --o-btn-bg-info: #votre_couleur; /* Fond du bouton d’information */

  /* 🖋️ Couleurs du texte des boutons */
  --o-btn-text-primary: #votre_couleur; /* Couleur du texte du bouton principal */
  --o-btn-text-secondary: #votre_couleur; /* Couleur du texte du bouton secondaire */
  --o-btn-text-success: #votre_couleur; /* Couleur du texte du bouton de succès */
  --o-btn-text-danger: #votre_couleur; /* Couleur du texte du bouton d’erreur */
  --o-btn-text-warning: #votre_couleur; /* Couleur du texte du bouton d’avertissement */
  --o-btn-text-info: #votre_couleur; /* Couleur du texte du bouton d’information */

  /* 🧱 Couleurs de bordure des boutons */
  --o-btn-border-primary: #votre_couleur; /* Bordure du bouton principal */
  --o-btn-border-secondary: #votre_couleur; /* Bordure du bouton secondaire */
  --o-btn-border-success: #votre_couleur; /* Bordure du bouton de succès */
  --o-btn-border-danger: #votre_couleur; /* Bordure du bouton d’erreur */
  --o-btn-border-warning: #votre_couleur; /* Bordure du bouton d’avertissement */
  --o-btn-border-info: #votre_couleur; /* Bordure du bouton d’information */

  /* 🖱️ Couleurs de fond au survol */
  --o-btn-hover-bg-primary: #votre_couleur; /* Fond du bouton principal au survol */
  --o-btn-hover-bg-secondary: #votre_couleur; /* Fond du bouton secondaire au survol */
  --o-btn-hover-bg-success: #votre_couleur; /* Fond du bouton de succès au survol */
  --o-btn-hover-bg-danger: #votre_couleur; /* Fond du bouton d’erreur au survol */
  --o-btn-hover-bg-warning: #votre_couleur; /* Fond du bouton d’avertissement au survol */
  --o-btn-hover-bg-info: #votre_couleur; /* Fond du bouton d’information au survol */

  /* ✍️ Couleurs du texte au survol */
  --o-btn-hover-text-primary: #votre_couleur; /* Texte du bouton principal au survol */
  --o-btn-hover-text-secondary: #votre_couleur; /* Texte du bouton secondaire au survol */
  --o-btn-hover-text-success: #votre_couleur; /* Texte du bouton de succès au survol */
  --o-btn-hover-text-danger: #votre_couleur; /* Texte du bouton d’erreur au survol */
  --o-btn-hover-text-warning: #votre_couleur; /* Texte du bouton d’avertissement au survol */
  --o-btn-hover-text-info: #votre_couleur; /* Texte du bouton d’information au survol */

  /* 🔲 Couleurs des bordures au survol */
  --o-btn-hover-border-primary: #votre_couleur; /* Bordure du bouton principal au survol */
  --o-btn-hover-border-secondary: #votre_couleur; /* Bordure du bouton secondaire au survol */
  --o-btn-hover-border-success: #votre_couleur; /* Bordure du bouton de succès au survol */
  --o-btn-hover-border-danger: #votre_couleur; /* Bordure du bouton d’erreur au survol */
  --o-btn-hover-border-warning: #votre_couleur; /* Bordure du bouton d’avertissement au survol */
  --o-btn-hover-border-info: #votre_couleur; /* Bordure du bouton d’information au survol */
}

Tailles disponibles

Les boutons Orochi peuvent être personnalisés en taille pour s'adapter à différents espaces. Les tailles sont contrôlées par les classes .o-btn-phone, .o-btn, et .o-btn-laptop. 

<button class="o-btn o-btn-phone">Petit</button>
<button class="o-btn">Moyen</button>
<button class="o-btn o-btn-laptop">Large</button>
💡 Personnalisation : Ajustez facilement l’espacement interne des boutons en modifiant ces variables CSS : 
:root {
  --o-btn-padding: 0.5rem 1rem; /*Rembourrage (padding) par défaut du bouton */
  --o-btn-phone-padding: 0.375rem 0.75rem; /*Rembourrage pour les petits boutons (.o-btn-phone) */
  --o-btn-laptop-padding: 1rem 2rem; /*Rembourrage pour les grands boutons (.o-btn-laptop) */
}

États spéciaux

Les boutons peuvent avoir des états spéciaux pour indiquer un statut (désactivé, chargement, lien). Ces états sont déclarés via des classes ou l'attribut disabled.

Lien bouton 
<!-- Désactivé -->
<button class="o-btn" disabled>Désactivé</button>

<!-- Chargement -->
<button class="o-btn o-btn-loading">
  <span class="o-btn-spinner"></span>
    Chargement
</button>

<button class="o-btn o-btn-loading-dots">
  Chargement
</button>

<!-- Lien bouton -->
<a href="#" class="o-btn">Lien bouton</a>

Style Outline

Les boutons outline sont similaires aux boutons standards, mais sans fond de couleur. Ils utilisent des classes spécifiques pour leur style.

<button class="o-btn o-btn-outline-primary">Primaire</button>
<button class="o-btn o-btn-outline-secondary">Secondaire</button>
<button class="o-btn o-btn-outline-success">Succès</button>
<button class="o-btn o-btn-outline-danger">Danger</button>
<button class="o-btn o-btn-outline-warning">Avertissement</button>
<button class="o-btn o-btn-outline-info">Info</button>
💡 Personnalisation : Utilisez les variables CSS pour modifier les couleurs du fond, du texte et de la bordure, ainsi que leurs variantes au survol.
:root {
  /* 🎨 Couleurs de fond principales des boutons */
  --o-btn-outline-bg-primary: #votre_couleur; /* Fond du bouton principal */
  --o-btn-outline-bg-secondary: #votre_couleur; /* Fond du bouton secondaire */
  --o-btn-outline-bg-success: #votre_couleur; /* Fond du bouton de succès */
  --o-btn-outline-bg-danger: #votre_couleur; /* Fond du bouton d’erreur */
  --o-btn-outline-bg-warning: #votre_couleur; /* Fond du bouton d’avertissement */
  --o-btn-outline-bg-info: #votre_couleur; /* Fond du bouton d’information */

  /* 🖋️ Couleurs du texte des boutons */
  --o-btn-outline-text-primary: #votre_couleur; /* Couleur du texte du bouton principal */
  --o-btn-outline-text-secondary: #votre_couleur; /* Couleur du texte du bouton secondaire */
  --o-btn-outline-text-success: #votre_couleur; /* Couleur du texte du bouton de succès */
  --o-btn-outline-text-danger: #votre_couleur; /* Couleur du texte du bouton d’erreur */
  --o-btn-outline-text-warning: #votre_couleur; /* Couleur du texte du bouton d’avertissement */
  --o-btn-outline-text-info: #votre_couleur; /* Couleur du texte du bouton d’information */

  /* 🧱 Couleurs de bordure des boutons */
  --o-btn-outline-border-primary: #votre_couleur; /* Bordure du bouton principal */
  --o-btn-outline-border-secondary: #votre_couleur; /* Bordure du bouton secondaire */
  --o-btn-outline-border-success: #votre_couleur; /* Bordure du bouton de succès */
  --o-btn-outline-border-danger: #votre_couleur; /* Bordure du bouton d’erreur */
  --o-btn-outline-border-warning: #votre_couleur; /* Bordure du bouton d’avertissement */
  --o-btn-outline-border-info: #votre_couleur; /* Bordure du bouton d’information */

  /* 🖱️ Couleurs de fond au survol */
  --o-btn-outline-hover-bg-primary: #votre_couleur; /* Fond du bouton principal au survol */
  --o-btn-outline-hover-bg-secondary: #votre_couleur; /* Fond du bouton secondaire au survol */
  --o-btn-outline-hover-bg-success: #votre_couleur; /* Fond du bouton de succès au survol */
  --o-btn-outline-hover-bg-danger: #votre_couleur; /* Fond du bouton d’erreur au survol */
  --o-btn-outline-hover-bg-warning: #votre_couleur; /* Fond du bouton d’avertissement au survol */
  --o-btn-outline-hover-bg-info: #votre_couleur; /* Fond du bouton d’information au survol */

  /* ✍️ Couleurs du texte au survol */
  --o-btn-outline-hover-text-primary: #votre_couleur; /* Texte du bouton principal au survol */
  --o-btn-outline-hover-text-secondary: #votre_couleur; /* Texte du bouton secondaire au survol */
  --o-btn-outline-hover-text-success: #votre_couleur; /* Texte du bouton de succès au survol */
  --o-btn-outline-hover-text-danger: #votre_couleur; /* Texte du bouton d’erreur au survol */
  --o-btn-outline-hover-text-warning: #votre_couleur; /* Texte du bouton d’avertissement au survol */
  --o-btn-outline-hover-text-info: #votre_couleur; /* Texte du bouton d’information au survol */

  /* 🔲 Couleurs des bordures au survol */
  --o-btn-outline-hover-border-primary: #votre_couleur; /* Bordure du bouton principal au survol */
  --o-btn-outline-hover-border-secondary: #votre_couleur; /* Bordure du bouton secondaire au survol */
  --o-btn-outline-hover-border-success: #votre_couleur; /* Bordure du bouton de succès au survol */
  --o-btn-outline-hover-border-danger: #votre_couleur; /* Bordure du bouton d’erreur au survol */
  --o-btn-outline-hover-border-warning: #votre_couleur; /* Bordure du bouton d’avertissement au survol */
  --o-btn-outline-hover-border-info: #votre_couleur; /* Bordure du bouton d’information au survol */
}

Avec icônes

Les boutons peuvent inclure des icônes pour améliorer leur utilisation dans l'interface utilisateur. Les icônes sont chargées via le framework.

<button class="o-btn o-btn-primary">
  <i class="oi oi-download"></i>
  Télécharger
</button>