Appearance Toggle

A two-segment light / dark control whose pill slides between the icons. It reports the choice and nothing else — applying the theme is the page's job.

tsx

1import { AppearanceToggle } from "@pestoui/core"

Controlled

The control is a radio group, so the arrow keys move the selection. Wire onValueChange to whatever sets the .dark class on your document.

Selected: light

Sizes

Uncontrolled with defaultValue. Two instances on one page each need their own srLabel.

Props

Prop	Type	Default	Description
value	"light" \| "dark"	—	Controlled selection.
defaultValue	"light" \| "dark"	"light"	Uncontrolled starting selection.
onValueChange	(value: "light" \| "dark") => void	—	Fires with the newly chosen segment.
size	"sm" \| "default"	"default"	Segment size: 36 × 28px, or 40 × 32px.
srLabel	string	"Appearance"	Accessible name for the radio group.
lightSrLabel / darkSrLabel	string	"Light" / "Dark"	Accessible names for the two icon-only segments.

PreviousApp Switcher Next Aspect Ratio

Pesto UI · 117 documented components