Composants

IconButton

Un bouton réduit à son icône, pour les actions denses des tables et barres d'outils. Enrobe l'IconButton d'Astryx (Button en mode icône seule) et impose un label pour rester accessible.

Nouveau. Remplace les <button className="icon-btn"> maison de l'ERP par le composant natif du DS : variantes sémantiques, tailles alignées sur Button, nom accessible garanti.

import { IconButton } from "@forme-ch/ui/controls";
import { PencilIcon, CopyIcon, GearIcon, TrashIcon } from "@forme-ch/ui/icons";

<IconButton icon={<PencilIcon />} label="Modifier" variant="primary" />
<IconButton icon={<CopyIcon />} label="Dupliquer" variant="secondary" />
<IconButton icon={<GearIcon />} label="Réglages" variant="ghost" />
<IconButton icon={<TrashIcon />} label="Supprimer" variant="destructive" />

Tailles

<IconButton icon={<BellIcon />} label="Notifications" size="sm" />
<IconButton icon={<BellIcon />} label="Notifications" size="md" />
<IconButton icon={<BellIcon />} label="Notifications" size="lg" />

États

<IconButton icon={<PencilIcon />} label="Modifier" variant="primary" />
<IconButton icon={<PencilIcon />} label="Modifier" variant="primary" isDisabled />
<IconButton icon={<PencilIcon />} label="Enregistrement en cours" variant="primary" isLoading />

Interactif

L'icon et le label peuvent changer selon l'état — ici un favori piloté par onClick.

const [fav, setFav] = useState(false);

<IconButton
  icon={<StarIcon weight={fav ? "fill" : "regular"} />}
  label={fav ? "Retirer des favoris" : "Ajouter aux favoris"}
  variant={fav ? "warning" : "ghost"}
  onClick={() => setFav((v) => !v)}
/>

Props

Prop	Type	Défaut	Description
`icon` *	`ReactNode`	—	Icône affichée (wrapper @forme-ch/ui/icons, Lucide). Obligatoire.
`label` *	`string`	—	Nom accessible obligatoire : sert d'`aria-label` et de tooltip.
`variant`	`ButtonVariant`	`"secondary"`	primary · secondary · ghost · destructive · success · warning.
`size`	`ControlSize`	`"md"`	sm · md · lg.
`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.

Accepte aussi name, value, form, className, style et autoFocus.

Accessibilité

label est obligatoire : sans texte visible, il constitue le seul nom accessible du bouton et alimente le tooltip. Ne le rends jamais vide et décris l'action, pas l'icône (« Supprimer », pas « Corbeille »). Pour une action avec texte visible, utilise Button avec sa prop icon.

Do & Don't

✓ À faire

Un label qui nomme l'action. Réserver IconButton aux icônes universelles (modifier, supprimer, copier).

✕ À éviter

Une icône obscure sans équivalent texte ailleurs. Recréer un <button className="icon-btn"> maison.