Toggle

A two-state button that can be either on or off.

Installation

Install the component using the StarUI CLI:

star add toggle

Outline variant with a visible border and shadow. Hover shows a muted preview while pressed uses the full accent.

Icon and label both react to the same signal. The icon swaps and the button text changes from Mute to Muted when pressed.

Three size variants: sm (h-8), default (h-9), and lg (h-10). Icons default to size-4 — pass an explicit size class to scale with the button.

Disabled toggles in unpressed and pressed states. Both are non-interactive with reduced opacity.

Prop	Type	Default	Description
`variant`	`Literal['default', 'outline']`	`'default'`	Visual style — default is transparent, outline adds border and shadow
`size`	`Literal['default', 'sm', 'lg']`	`'default'`	Button size controlling height, padding, and min-width
`pressed`	`bool`	`False`	Initial pressed state (maps to data-[state=on])
`signal`	`str \| Signal`	`''`	Datastar signal for pressed state — auto-generated if omitted
`disabled`	`bool`	`False`	Disable interaction and reduce opacity
`aria_label`	`str \| None`	`None`	Accessible label — required for icon-only toggles