About Halo Toggle

The Halo Toggle is a modern toggle component inspired by the Google Pixel / Android 16 UI language. It’s built around two things: motion that feels tuned, and a soft halo cue that appears behind the active end of the track after the thumb lands—making state changes feel intentional and satisfying.

Use it anywhere you want controls that feel “system-level”: settings pages, dashboards, onboarding flows, preference panels, and mobile-first landing pages.

Signature Interaction

Smooth thumb slide between off/on with carefully tuned transition timing
Active-state halo appears around and behind the end of the toggle where the thumb settles
Halo stays faint and controlled (adds feedback without looking neon or noisy)

Clear On/Off Visual Language

Off state: greyed-out track for a disabled/idle feel
On state: bright/white track for a clean active look
Thumb styling changes by state for clarity:
- Off thumb includes a border (matches the thumb’s tone)
- On thumb is borderless, using contrast (white track + darker thumb)