Composant

Boutons

Le bouton est l'élément d'action principal. Il existe en plusieurs variantes de couleur et de taille.

Variantes

Utilise .lumy-btn associé à une classe de variante.

<button class="lumy-btn">Secondaire</button>
<button class="lumy-btn lumy-btn--primary">Primaire</button>
<button class="lumy-btn lumy-btn--blue">Bleu</button>
<button class="lumy-btn lumy-btn--danger">Danger</button>
<button class="lumy-btn lumy-btn--ghost">Fantôme</button>
HTML

Tailles

<button class="lumy-btn lumy-btn--primary lumy-btn--sm">Petit</button>
<button class="lumy-btn lumy-btn--primary">Normal</button>
<button class="lumy-btn lumy-btn--primary lumy-btn--lg">Grand</button>
HTML

Pleine largeur

<button class="lumy-btn lumy-btn--primary lumy-btn--block">
    Bouton pleine largeur
</button>
HTML

État désactivé

<button class="lumy-btn lumy-btn--primary" disabled>
    Indisponible
</button>
HTML

Accessibilité

  • Utilise toujours un <button>, jamais un <div> cliquable.
  • Un bouton icône seul doit avoir un aria-label.
  • Le focus visible est géré automatiquement par ui.css.