Toggle

Un bouton à deux états.

Ce n'est pas un Switch : un interrupteur décrit un réglage qui persiste, une bascule décrit un état de l'interface ici et maintenant — gras, filtre actif, colonne affichée. aria-pressed porte cette différence.

Installation

sia-ui add toggle

Ou par le paquet, sans rien copier :

import { Toggle, ToggleGroup } from "@sia-ui/react-web";

Props de Toggle

Prop	Type	Défaut	Description
ariaLabel	string	—	Obligatoire quand le contenu se réduit à une icône.
className	string	—
defaultPressed	boolean	false
disabled	boolean	false
icon	ReactNode	—
onPressedChange	(pressed: boolean) => void	—
pressed	boolean	—
size	ComponentSize	md
tone	ComponentTone	primary
variant	"solid" | "outline" | "ghost"	ghost

Props de ToggleGroup

Plusieurs bascules qui partagent une valeur.

Le repère glisse d'une option à l'autre au lieu de sauter : c'est la même idée que les onglets, et c'est ce qui rend le changement lisible.

Prop	Type	Défaut	Description
* options	ToggleGroupOption[]	—
ariaLabel	string	—
className	string	—
defaultValue	string | string[]	—
deselectable	boolean	true	Autorise à tout désélectionner en single.
disabled	boolean	false
onValueChange	(value: string | string[]) => void	—	Une chaîne en single, un tableau en multiple — comme value.
size	ComponentSize	md
tone	ComponentTone	primary
type	"single" | "multiple"	single	single : une valeur ou aucune. multiple : un tableau.
value	string | string[]	—

* obligatoire.

Voir aussi

• Le composant dans le catalogue — états, variantes, et bac à sable.
• La référence complète — tous les composants.