Composants

ToggleButton

Un bouton à état pressé / relâché, pour les bascules d'éditeur (gras, alignement) ou un « suivre ». Autonome via isPressed / onPressedChange, ou en groupe via ToggleButtonGroup.

Pour un simple réglage on/off dans un formulaire, préfère Switch. Le ToggleButton est fait pour les barres d'outils et les bascules contextuelles.

Autonome

Contrôle l'état pressé avec useState. Clique pour basculer.

import { ToggleButton } from "@forme-ch/ui/controls";
import { TextBIcon } from "@forme-ch/ui/icons";

const [bold, setBold] = useState(false);

<ToggleButton
  label="Gras"
  tooltip="Gras"
  icon={<TextBIcon />}
  isIconOnly
  isPressed={bold}
  onPressedChange={(p) => setBold(p)}
/>

Icône pressée & texte

pressedIcon remplace l'icône à l'état pressé ; le children fournit le texte.

<ToggleButton
  label={suivi ? "Ne plus suivre" : "Suivre"}
  icon={<StarIcon />}
  pressedIcon={<StarIcon />}
  isPressed={suivi}
  onPressedChange={(p) => setSuivi(p)}
>
  {suivi ? "Suivi" : "Suivre"}
</ToggleButton>

Groupe — choix unique

Un seul segment actif à la fois. value est un string | null.

import { ToggleButtonGroup, ToggleButton } from "@forme-ch/ui/controls";

const [align, setAlign] = useState<string | null>("left");

<ToggleButtonGroup label="Alignement du texte" value={align} onChange={setAlign}>
  <ToggleButton value="left" label="Aligner à gauche" icon={<TextAlignLeftIcon />} isIconOnly />
  <ToggleButton value="center" label="Centrer" icon={<TextAlignCenterIcon />} isIconOnly />
  <ToggleButton value="right" label="Aligner à droite" icon={<TextAlignRightIcon />} isIconOnly />
</ToggleButtonGroup>

Groupe — choix multiple

type="multiple" : value devient un string[].

const [fmt, setFmt] = useState<string[]>(["bold"]);

<ToggleButtonGroup type="multiple" label="Format du texte" value={fmt} onChange={setFmt}>
  <ToggleButton value="bold" label="Gras" icon={<TextBIcon />} isIconOnly />
  <ToggleButton value="italic" label="Italique" icon={<TextItalicIcon />} isIconOnly />
  <ToggleButton value="underline" label="Souligné" icon={<TextUnderlineIcon />} isIconOnly />
</ToggleButtonGroup>

Props — ToggleButton

Prop	Type	Défaut	Description
`label` *	`string`	—	Nom accessible obligatoire.
`isPressed`	`boolean`	—	État pressé (usage autonome, contrôlé).
`onPressedChange`	`(isPressed, event) => void`	—	Callback de bascule (usage autonome).
`value`	`string`	—	Identifiant du bouton en usage groupé.
`size`	`ControlSize`	`"md"`	sm · md · lg.
`isDisabled`	`boolean`	`false`	Désactive le bouton.
`isLoading`	`boolean`	—	État de chargement.
`icon`	`ReactNode`	—	Icône (état relâché).
`pressedIcon`	`ReactNode`	—	Icône alternative quand le bouton est pressé.
`isIconOnly`	`boolean`	—	Icône seule (le `label` sert d'aria-label).
`tooltip`	`string`	—	Infobulle.
`children`	`ReactNode`	—	Contenu texte du bouton.

Props — ToggleButtonGroup

Prop	Type	Défaut	Description
`children` *	`ReactNode`	—	`ToggleButton` porteurs d'un `value`.
`label` *	`string`	—	Nom accessible obligatoire du groupe.
`type`	`"single" \| "multiple"`	`"single"`	Sélection unique ou multiple (union discriminée).
`value` *	`string \| null · string[]`	—	single : `string \| null`. multiple : `string[]`.
`onChange` *	`(value) => void`	—	single : `(string \| null)`. multiple : `(string[])`.
`orientation`	`"horizontal" \| "vertical"`	—	Sens du groupe.
`size`	`ControlSize`	`"md"`	sm · md · lg.
`isDisabled`	`boolean`	—	Désactive tout le groupe.

Accessibilité

label est obligatoire sur chaque bouton et sur le groupe. L'état pressé est exposé aux lecteurs d'écran (aria-pressed en autonome, rôle de groupe en ToggleButtonGroup). En mode isIconOnly, le label est la seule source du nom accessible : décris l'action.

Do & Don't

✓ À faire

Regrouper des bascules exclusives (alignement) en single, cumulables (gras/italique) en multiple.

✕ À éviter

Employer un ToggleButton pour un réglage on/off de formulaire (utiliser Switch). Oublier le label en mode icône seule.