Composants

Button

L'action principale de l'interface. Enrobe le Button d'Astryx sous l'API Forme, avec six variantes sémantiques et un nom accessible garanti par label.

import { Button } from "@forme-ch/ui/controls";

<Button label="Primaire" variant="primary" />
<Button label="Secondaire" variant="secondary" />
<Button label="Ghost" variant="ghost" />
<Button label="Destructive" variant="destructive" />
<Button label="Succès" variant="success" />
<Button label="Avertissement" variant="warning" />

Tailles

<Button label="Small" size="sm" />
<Button label="Medium" size="md" />
<Button label="Large" size="lg" />

Avec icône

Passe l'icône via la prop icon. Le label reste le nom accessible.

import { PlusIcon, ArrowRightIcon, TrashIcon } from "@forme-ch/ui/icons";

<Button label="Ajouter" variant="primary" icon={<PlusIcon />} />
<Button label="Continuer" variant="secondary" icon={<ArrowRightIcon />} />
<Button label="Supprimer" variant="destructive" icon={<TrashIcon />} />

États

<Button label="Normal" variant="primary" />
<Button label="Désactivé" variant="primary" isDisabled />
<Button label="Chargement" variant="primary" isLoading />
<LinkButton href="#" label="Lien-bouton" variant="secondary" />

Props

Prop	Type	Défaut	Description
`label`	`string`	—	Nom accessible et texte visible — la voie canonique, alignée Astryx.
`children`	`ReactNode`	—	Fallback rétrocompatible : dérivé en label si `label` est absent.
`variant`	`ButtonVariant`	`"secondary"`	primary · secondary · ghost · destructive · success · warning.
`size`	`ControlSize`	`"md"`	sm · md · lg.
`icon`	`ReactNode`	—	Icône (wrapper @forme-ch/ui/icons, Lucide) affichée avant le label.
`iconOnly`	`boolean`	`false`	Icône seule — préférer `IconButton` pour ce cas.
`isDisabled`	`boolean`	`false`	Désactive le bouton.
`isLoading`	`boolean`	`false`	État de chargement (spinner, bouton inerte).
`type`	`"button" \| "submit" \| "reset"`	`"button"`	Type HTML natif.
`onClick`	`MouseEventHandler`	—	Gestionnaire de clic.
`title`	`string`	—	Tooltip navigateur natif.

* Le bouton accepte aussi name, value, form, formAction, className, style et aria-label.

Accessibilité

Préfère toujours label : il garantit un nom accessible découplé du visuel. Sans label, le nom est dérivé de children puis de aria-label, avec un ultime repli littéral. Un bouton sans texte ni label n'est pas conforme.

Do & Don't

✓ À faire

Un seul bouton primary par zone d'action. Verbe d'action clair dans label.

✕ À éviter

Recréer un <button className="btn"> maison. Utiliser ghost pour une action destructive.