Aller au contenu

Composant · Action

Button

Stable

Action principale, secondaire, fantôme ou destructive.

Le Button déclenche une action immédiate dans la même page (soumettre, enregistrer, supprimer). Pour une navigation vers une autre URL, utilisez plutôt le composant Link.

Quand l'utiliser

  • Soumettre un formulaire ou confirmer un dialogue.
  • Déclencher une opération (enregistrer, publier, recalculer).
  • Une seule action primaire par zone : hiérarchisez avec secondary / ghost.
  • Pour aller vers une page, préférez Link plutôt qu'un Button stylé en lien.

Variantes

Quatre variantes hiérarchisent l'action : primary (action principale), secondary (action de soutien), ghost (action discrète), danger (action destructive).

Variantes

Voir le code (Svelte) 
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>

Tailles

Trois tailles : sm (2 rem de haut, barres d'outils denses), md (2,5 rem, défaut), lg (3 rem, écrans tactiles ou hero).

Tailles

Voir le code (Svelte) 
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

États

Le focus clavier est toujours visible (outline ou box-shadow selon le thème). L'état désactivé baisse l'opacité et bloque le pointeur.

Désactivé par variante

Voir le code (Svelte) 
<Button disabled>Primary disabled</Button>
<Button variant="secondary" disabled>Secondary disabled</Button>
<Button variant="ghost" disabled>Ghost disabled</Button>
<Button variant="danger" disabled>Danger disabled</Button>

Action asynchrone

Voir le code (Svelte) 
<Button>Enregistrer</Button>
<Button disabled>Enregistrement…</Button>

Pendant une opération asynchrone, désactivez le bouton et changez son libellé pour signaler l'attente.

Types de bouton (HTML)

Dans un formulaire, choisissez le bon type : submit envoie le formulaire, reset le réinitialise, button n'a aucun comportement implicite.

Form types

Voir le code (Svelte) 
<Button type="submit">Envoyer</Button>
<Button type="reset" variant="secondary">Réinitialiser</Button>
<Button type="button" variant="ghost">Bouton</Button>

Anatomie

  • Élément racine : un <button> natif (classe st-button).
  • Libellé : le contenu enfant (children), centré, avec un gap réservé pour une éventuelle icône.
  • Boîte : hauteur, padding et rayon issus des tokens d'anatomie de la variante/taille.

Accessibilité

  • Élément natif <button> : focusable au clavier, activable avec Entrée et Espace.
  • Focus toujours visible via :focus-visible (outline 2px ou box-shadow selon le thème).
  • Un bouton sans texte (icône seule) doit recevoir un aria-label ; sinon utilisez IconButton.
  • disabled retire le bouton de l'ordre de tabulation : ne placez pas d'info essentielle uniquement dessus.

Lignes directrices

À faire

  • Une seule action primaire par contexte.
  • Libellés à l'impératif, orientés verbe (« Enregistrer », « Supprimer »).
  • Réserver danger aux actions destructives.

À éviter

  • Empiler plusieurs boutons primaires côte à côte.
  • Utiliser un Button pour une simple navigation de page.
  • Des libellés vagues comme « OK » ou « Cliquez ici ».

API

PropTypeDéfautDescription
variant"primary" | "secondary" | "ghost" | "danger""primary"Niveau d'emphase visuelle de l'action.
size"sm" | "md" | "lg""md"Hauteur et densité du bouton.
type"button" | "submit" | "reset""button"Type HTML natif, important dans un formulaire.
disabledbooleanfalseDésactive le bouton et le retire du focus.
classstringoptionnelClasse(s) CSS supplémentaire(s).
childrenSnippetlibelléContenu du bouton (texte / icône).
Autres attributsHTMLButtonAttributesN/APropagés sur l'élément <button> (onclick, aria-*, name…).

Tokens utilisés

  • --st-component-button-primaryBackground
  • --st-component-button-primaryText
  • --st-component-button-secondaryBackground
  • --st-component-button-secondaryBorder
  • --st-component-button-anatomy-shape-radius
  • --st-component-button-anatomy-density-md-controlHeight
  • --st-component-button-anatomy-states-hover-bg
  • --st-component-button-anatomy-states-disabled-opacity
  • --st-component-button-anatomy-focus-outline
  • --st-semantic-action-danger