{ ViewData["Title"] = "Boutons - CCB Design System V2"; Layout = "_LayoutCorporateDesignV2"; }

Boutons

Collection complète de boutons avec différents styles, tailles et états.

Variantes

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>

Boutons Outline

<button class="btn btn-outline-primary">Primary</button>

Boutons Ghost

<button class="btn btn-ghost-primary">Ghost Primary</button>

Tailles

<button class="btn btn-primary btn-xs">Extra Small</button>
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary">Normal</button>
<button class="btn btn-primary btn-lg">Large</button>

Avec Icônes

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

Icônes Seules

<button class="btn btn-primary btn-square">
    <i class="fas fa-search"></i>
</button>
<button class="btn btn-secondary btn-circle">
    <i class="fas fa-heart"></i>
</button>

Bouton Pleine Largeur

<button class="btn btn-primary btn-block">Bouton Pleine Largeur</button>

Groupe de Boutons

Groupe normal

Groupe attaché

<div class="btn-group">
    <button class="btn btn-primary">Gauche</button>
    <button class="btn btn-primary">Milieu</button>
    <button class="btn btn-primary">Droite</button>
</div>

États

<button class="btn btn-primary" disabled>Désactivé</button>
<button class="btn btn-primary btn-loading">Loading</button>

Floating Action Button

Bouton d'action flottant fixé en bas à droite de l'écran. 

<button class="btn btn-fab btn-primary">
    <i class="fas fa-plus"></i>
</button>

Bonnes Pratiques

Conseils d'utilisation
  • Utilisez btn-primary pour l'action principale de la page
  • Limitez les boutons primaires à un ou deux par écran
  • Utilisez des icônes pour améliorer la compréhension
  • Assurez-vous que les boutons ont un contraste suffisant
  • Les états de loading sont importants pour les actions asynchrones