Boutons

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

Utilisation avec View Component

Utilisez le View Component Button pour créer des boutons de manière cohérente dans tout le projet.

Exemple avec le View Component :

Bouton avec lien
Utilisation dans vos vues 
<!-- Bouton simple -->
@await Component.InvokeAsync("Button", new {
    text = "Bouton Primary",
    variant = "primary",
    icon = "fas fa-check"
})

<!-- Bouton outline avec icône à droite -->
@await Component.InvokeAsync("Button", new {
    text = "Bouton Outline",
    variant = "secondary",
    outline = true,
    icon = "fas fa-arrow-right",
    iconPosition = "right"
})

<!-- Bouton avec lien -->
@await Component.InvokeAsync("Button", new {
    text = "Bouton avec lien",
    variant = "success",
    href = "#",
    icon = "fas fa-link"
})

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