Composants · foundation

Boutons

Un seul bouton principal par écran ; les actions secondaires en bouton secondaire ou dans un menu ; le danger uniquement pour l’irréversible, toujours confirmé.

Button
buttonVariants
Spinner
Kbd

Variantes

Les cinq variantes

Quand l’utiliser : primary pour l’action principale de l’écran (une seule) ; secondary pour les autres actions ; ghost dans les barres d’outils et en-têtes de tableau ; danger pour une action destructrice ; link pour une action dans un texte.

Survol : la couleur de fond s’assombrit (primary-hover, bg-muted). Focus clavier : anneau menthe de 2 px (focus-ring), testez avec Tab. Actif : primary-active.

Afficher le code

<Button variant="primary">Confirmer la commande</Button>
<Button>Enregistrer le brouillon</Button>          {/* secondary par défaut */}
<Button variant="ghost">Exporter</Button>
<Button variant="danger">Annuler la commande</Button>
<Button variant="link">Voir le bon de livraison</Button>

États

Quand l’utiliser : Désactivé quand l’action n’est pas encore possible (préférer masquer une action interdite par les permissions) ; chargement pendant un envoi pour empêcher le double clic.

primary

secondary

ghost

danger

link

loading désactive le bouton, affiche un Spinner et pose aria-busy. Un bouton désactivé n’est pas focalisable : expliquer pourquoi à côté si ce n’est pas évident.

Afficher le code

<Button variant="primary" loading={saving} onClick={save}>Enregistrer</Button>
<Button variant="primary" disabled>Facturer</Button>
<Button disabled>Exporter</Button>

Tailles

sm, md, lg et touch

Quand l’utiliser : md (36 px) par défaut ; sm (28 px) dans les tableaux denses et barres de filtres ; lg (44 px) pour les écrans d’accueil ou mobiles ; touch (56 px) pour les écrans terrain (tablette d’atelier, gants).

size="sm"

size="md"

size="lg"

size="touch"

Afficher le code

<Button size="sm">Filtrer</Button>
<Button size="md">Enregistrer</Button>
<Button size="lg">Nouvelle commande</Button>
<Button size="touch" variant="primary">Valider la pesée</Button>

Icônes et boutons icône

Icône de tête, de fin, icône seule

Quand l’utiliser : Une icône aide à repérer une action fréquente (Créer, Imprimer). Icône seule uniquement pour des actions universelles, toujours avec aria-label et une infobulle.

Afficher le code

<Button variant="primary" leadingIcon={<Plus />}>Nouvelle commande</Button>
<Button trailingIcon={<ChevronDown />}>Actions</Button>
<Tooltip content="Imprimer le bon de livraison">
  <Button iconOnly aria-label="Imprimer le bon de livraison"><Printer /></Button>
</Tooltip>

Lien avec le style d’un bouton (asChild)

Quand l’utiliser : Quand l’action est une navigation (ouvrir une page) : le rendu reste un vrai lien <a> (clic milieu, lecteur d’écran), avec l’apparence d’un bouton.

Nouvelle commande Toutes les commandes

Afficher le code

<Button asChild variant="primary">
  <Link href="/sales/orders/new">Nouvelle commande</Link>
</Button>

// Hors composant Button : buttonVariants()
<Link href="/sales/orders" className={buttonVariants({ variant: 'secondary', size: 'sm' })}>Toutes les commandes</Link>

Spinner et Kbd

Spinner

Quand l’utiliser : Chargement local d’une zone ou d’un bouton (géré par Button loading). Pour une page ou un tableau, préférer un Skeleton.

size="sm"

size="md"

size="lg"

Synchronisation de la balance…

Afficher le code

<Spinner size="sm" />  <Spinner />  <Spinner size="lg" label="Calcul du rendement…" />

Kbd

Quand l’utiliser : Afficher un raccourci clavier dans une aide, une infobulle ou un menu.

⌘K RechercherF8 Aller aux notificationsÉchap Fermer

Afficher le code

<Kbd>⌘</Kbd><Kbd>K</Kbd>  Rechercher