AmbientSwitch

AmbientSwitch is a circular switch button with optional LED indicator.

Interactive preview

Power

Record

Small

Large

Props

Prop	Type	Default	Notes
checked	boolean	-	Controlled state.
defaultChecked	boolean	false	Uncontrolled initial state.
onCheckedChange	(checked: boolean) => void	-	Called when toggled.
size	"sm" | "md" | "lg"	"md"	Switch size variant.
label	string	-	Optional visible label.
led	boolean | string	-	true for default green, string for custom color.

Also accepts standard button props (except native onChange).

Examples

Uncontrolled

<AmbientSwitch label="Power" defaultChecked />

Controlled

const [enabled, setEnabled] = useState(false);

<AmbientSwitch checked={enabled} onCheckedChange={setEnabled} label="Bypass" />

Custom LED color

<AmbientSwitch label="Record" led="#ef4444" defaultChecked />