Halo Toggle

The Halo Toggle is a modern toggle component inspired by the Google Pixel / Android 16 UI language.

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)

Full Customizability

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)

Questions & Support

Reach out any time via x.com or email at [email protected].