Boutons
Les boutons permettent aux usagers de déclencher des actions, d'interagir ou de valider des formulaires administratifs.
1. Variantes de couleur
Cinq variantes pour chaque cas d'usage : action principale, secondaire, mise en valeur, destructive ou discrète.
<button class="ml-btn ml-btn-primary">Bouton Principal</button>
<button class="ml-btn ml-btn-secondary">Bouton Secondaire</button>
<button class="ml-btn ml-btn-accent">Accent (Gold)</button>
<button class="ml-btn ml-btn-danger">Destructif</button>
<button class="ml-btn ml-btn-ghost">Ghost</button>2. Tailles
Trois tailles pour s'adapter à la densité de l'interface.
<button class="ml-btn ml-btn-primary ml-btn-sm">Petit</button>
<button class="ml-btn ml-btn-primary">Moyen</button>
<button class="ml-btn ml-btn-primary ml-btn-lg">Grand</button>3. États interactifs
Des retours d'état clairs pour indiquer si une action est bloquée ou en cours de traitement.
<!-- Disabled via HTML attribute -->
<button class="ml-btn ml-btn-primary" disabled>Désactivé</button>
<!-- Disabled via CSS class -->
<button class="ml-btn ml-btn-secondary disabled">Désactivé</button>
<!-- Loading state -->
<button class="ml-btn ml-btn-primary ml-btn-loading">Chargement</button>4. Boutons avec icônes
Des boutons enrichis d'icônes SVG pour clarifier le but de l'action.
<!-- Icon on left -->
<button class="ml-btn ml-btn-primary">
<svg viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
Télécharger
</button>
<!-- Icon on right -->
<button class="ml-btn ml-btn-secondary">
Suivant
<svg viewBox="0 0 24 24">...</svg>
</button>
<!-- Icon-only button -->
<button class="ml-btn ml-btn-primary ml-btn-icon-only" aria-label="Rechercher">
<svg viewBox="0 0 24 24">...</svg>
</button>5. Pleine largeur
Pour les zones mobiles ou les formulaires.
<button class="ml-btn ml-btn-primary ml-btn-block">
Action principale
</button>Référence des classes
| Classe | Rôle |
|---|---|
.ml-btn | Classe de base obligatoire sur tout bouton |
.ml-btn-primary | Action principale (vert) |
.ml-btn-secondary | Action secondaire (contour) |
.ml-btn-accent | Mise en valeur (or) |
.ml-btn-danger | Action destructive (rouge) |
.ml-btn-ghost | Bouton discret sans fond |
.ml-btn-sm | Taille petite |
.ml-btn-lg | Taille grande |
.ml-btn-block | Bouton pleine largeur (100%) |
.ml-btn-loading | État de chargement (spinner) |
.ml-btn-icon-only | Bouton icône seul (carré, accessible) |