Toggle Component
Capsule-shaped toggle buttons with orbit hover effects and clean ink-line styling.
Default Variant
Click to toggle on/off. The default variant uses subtle background fills.
Outline Variant
The outline variant features ink-line borders with orbit hover effects.
Accent Variant
The accent variant uses Electric Violet for the active state.
Sizes
With Text
Disabled State
Disabled toggles have reduced opacity and cannot be interacted with.
Animated Icon Toggle
Icons animate with scale, rotation, or fade effects when toggling states.
Controlled Toggle
State: not pressed
The toggle state is controlled by React state, allowing programmatic control.
Dark Mode Toggle with Animation
A common use case for toggles is theme switching with smooth icon transitions.