Composants

ButtonGroup

Regroupe des boutons connectés (bordures partagées, rayons aux extrémités). Idéal pour une barre d'actions de ligne ou un jeu d'exports. Les enfants — Button ou IconButton Forme — détectent le groupe et se stylent tout seuls.

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

<ButtonGroup label="Actions ligne">
  <IconButton icon={<PencilIcon />} label="Modifier" />
  <IconButton icon={<CopyIcon />} label="Dupliquer" />
  <IconButton icon={<TrashIcon />} label="Supprimer" variant="destructive" />
</ButtonGroup>

Boutons avec texte

<ButtonGroup label="Exporter la sélection">
  <Button label="PDF" />
  <Button label="CSV" />
  <Button label="Imprimer" icon={<ExportIcon />} />
</ButtonGroup>

Orientation verticale

<ButtonGroup label="Alignement" orientation="vertical">
  <IconButton icon={<TextAlignLeftIcon />} label="Aligner à gauche" />
  <IconButton icon={<TextAlignCenterIcon />} label="Centrer" />
  <IconButton icon={<TextAlignRightIcon />} label="Aligner à droite" />
</ButtonGroup>

Tailles

<ButtonGroup label="Petit" size="sm"> … </ButtonGroup>
<ButtonGroup label="Grand" size="lg"> … </ButtonGroup>

Props

Prop	Type	Défaut	Description
`children` *	`ReactNode`	—	`Button` / `IconButton` Forme. Ils adoptent leur position (rayons, bordures) via le contexte Astryx.
`label` *	`string`	—	Nom accessible obligatoire du groupe (`aria-label`).
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Sens du groupe.
`size`	`ControlSize`	`"md"`	Taille appliquée au groupe (sm · md · lg).
`isDisabled`	`boolean`	`false`	Désactive tous les boutons du groupe.

Accessibilité

label est obligatoire : il nomme le groupe pour les lecteurs d'écran (« Actions ligne », « Exporter »). Chaque enfant garde son propre nom accessible — d'où l'importance de renseigner le label de chaque IconButton. Pour un choix persistant (état pressé), ce n'est pas le bon composant : utilise ToggleButtonGroup.

Do & Don't

✓ À faire

Grouper des actions de même nature et de même portée. Nommer le groupe et chaque bouton.

✕ À éviter

Mélanger une action primary et une destructive dans le même groupe. S'en servir pour un choix à état (préférer ToggleButtonGroup).