Forms/Toggle

Toggle

A two-state pressable button, like a bold or italic toolbar button. Visually inverts when pressed and exposes its state via aria-pressed.

import { Toggle } from "@animui/ui"

Basic

Prop	Type	Default	Description
`pressed`	`boolean`	—	Controlled pressed state.
`defaultPressed`	`boolean`	`false`	Uncontrolled initial pressed state.
`onPressedChange`	`(pressed: boolean) => void`	—	Called when the pressed state changes.
`variant`	`"default" \| "outline"`	`"default"`	Visual style of the toggle.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Controls padding and font size.
`disabled`	`boolean`	`false`	Prevents interaction and applies reduced opacity.
`children`	`React.ReactNode`	—	Content rendered inside the toggle button.
`className`	`string`	—	Additional classes for the button element.