---
title: "Halo Toggle — Free Framer component · Best of Framer"
description: "Free Framer component · by Omer Mirza · Buttons. The Halo Toggle is a modern toggle component inspired by the Google Pixel / Android 16 UI language."
canonical: "https://framer.elliotli.dev/component/halo-toggle"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Halo Toggle

# Halo Toggle

Pixel-Inspired Switch

[View on Framer](https://framer.com/marketplace/components/halo-toggle/?via=elliot-li)

![Halo Toggle preview image 1](https://framer.elliotli.dev/og/component/halo-toggle/b9c5ba9308aac083/1600x1200.jpg)

## Summary

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

## Description

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)**
    

![Color Customization](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-e02qsikc-TtnS1Xg9gXa5FLnLLyPdQ18uDKYqye)Color Customization

## Questions & Support

Reach out any time via [**x.com**](http://x.com/_omermirza) or email at [**contact@omermirza.com**](mailto:contact@omermirza.com).

## Rank history [How rankings work →](/terms#rankings)

-   All · #3288

## Details

- **Author**: Omer Mirza
- **Published**: 2026-02-27
- **Updated**: 2026-02-27
- **Added**: 2026-02-23
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything