Toggle component translated from shadcn/ui (new-york-v4).
A two-state toggle button. Unlike a native checkbox, the pressed state lives in
ARIA (aria-pressed) and a data-state of "on"/"off" that the cva styles
key off of (the on-state gets bg-accent). It renders a plain
<button type="button"> and is uncontrolled: @pressed only seeds the initial
markup. The small ShadixToggle hook (assets/ts/toggle.ts) flips both
aria-pressed and data-state on click by reading the current DOM value, so it
stays independent of the server-rendered initial state.
Caller-supplied class is appended last; Tailwind cascade layers ensure it wins
over the defaults.
Summary
Functions
Renders an uncontrolled two-state toggle button.
Functions
Renders an uncontrolled two-state toggle button.
:pressed seeds the initial aria-pressed / data-state; thereafter the
ShadixToggle hook owns the state and flips it on click.
Attributes
variant(:string) - Defaults to"default". Must be one of"default", or"outline".size(:string) - Defaults to"default". Must be one of"default","sm", or"lg".pressed(:boolean) - Defaults tofalse.class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)