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.
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)
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)
Customize the color of every key layer without breaking the look:
Halo color
Track background (On & Off)
Thumb color (On & Off)
Border color (On & Off)
Reach out any time via x.com or email at contact@omermirza.com.
Omer Mirza
