Toggles

Binary On/Off controls with Ink & Acid mechanics.

1. Glassmorphism Pill Toggle

Translucent and crisp, with a strong modern accent. Designed for dark backgrounds.

Available configuration to customize the component.

Prop	Type	Default	Description
defaultChecked	boolean	false	Initial state of the toggle
onChange	(checked: boolean) => void	—	Callback when the toggle state changes
className	string	—	Optional custom class name
...props	HTMLMotionProps<"button">	—	All standard Framer Motion button attributes (excluding onChange)

Mechanical switch. Flat when off, reveals shadow-sm and electric color when turned on.

Available configuration to customize the component.

Prop	Type	Default	Description
defaultChecked	boolean	false	Initial state of the toggle
onChange	(checked: boolean) => void	—	Callback when the toggle state changes
activeColor	string	"#ccff00"	Background color when turned on
inactiveColor	string	"#f4f0ea"	Background color when turned off
className	string	—	Optional custom class name