Toggle

A two-state button with a recognizable pressed state.

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add toggle

What add toggle installs alongside the component. The CLI skips any you already have in a compatible version.

3 examples · 1 component

Constant labels through aria-label; the state is announced as pressed.

variant="outline" for a toggle that sits among fields.

sm, default and lg (44 px target); disabled blocks interaction.

Keeps the props, events and refs of the matching Base UI primitive, plus ZUNO's styles.

Prop	Type	Default
`variant` Transparent or bordered surface.	`"default" \| "outline"`	`"default"`
`size` 32, 36 or 44 px tall; lg meets the 44 px touch target.	`"sm" \| "default" \| "lg"`	`"default"`
`pressed / defaultPressed` Controlled or uncontrolled state.	`boolean`	`false`
`onPressedChange` Called when the state changes.	`(pressed: boolean) => void`	—
`disabled` Dims the toggle and blocks interaction.	`boolean`	`false`
`toggleClasses` The exported class recipe, shared with ToggleGroupItem.	`(variant, size) => string`	—

The states that apply to this component and their visual treatment.

State	Treatment
Off	Transparent or bordered, with hover feedback.
On	Accent fill (data-pressed).
Focus	Offset outline.
Disabled	Dimmed; no pointer events.

It is a button with aria-pressed, so screen readers announce "pressed" or "not pressed"; Space and Enter toggle it.

Keep the label constant ("Bold"), not the action ("Make bold"): the pressed state already tells whether it is on.

Icon-only toggles need an aria-label; the pressed state uses a fill change, not color alone on the icon.