---
title: "Toggle Premium — Framer component · Best of Framer"
description: "$6.00 · Framer component · by Aidan Looker · Buttons. What is Toggle Premium?"
canonical: "https://framer.elliotli.dev/component/toggle-premium"
---

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

# Toggle Premium

Toggle with presets and popouts.

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

![Toggle Premium preview image 1](https://framer.elliotli.dev/og/component/toggle-premium/4eda1fac6188bd81/1600x1200.jpg)

## Summary

What is Toggle Premium?

## Description

## What is Toggle Premium?

Toggle Premium is a high-end toggle that supports two modes — a classic on/off switch and a multi-option segmented control — each styled with glassmorphism tracks, glowing accents, and buttery-smooth transitions. Ideal for pricing toggles, billing selectors, dark mode switches, and settings panels.

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8vjwbcr2-RQLDut7AgLOovQEwgaJNpNG4n3n3B6)](https://teampixelau.lemonsqueezy.com/checkout/buy/3b016e8d-2ba4-4944-8431-e2c592334df1)

## Core Features

-   **Two modes in one component.** Switch between a classic on/off toggle and a segmented control with up to four labelled options.
    
-   **7 curated presets.** Obsidian, Aurora, Neon, Ocean, Sunset, Emerald, and Minimal Light — each with coordinated track, thumb, glow, and text colours that look premium out of the box.
    
-   **Floating popout pill.** Attach a callout label like "Save 20%" above any segment, complete with a directional arrow and accent glow. Perfect for highlighting annual billing discounts.
    
-   **Full custom colour override.** Select the Custom preset to unlock granular control over track, thumb, accent, text, and border colours.
    
-   **Smooth, premium animation.** Thumb slides with a refined ease-out curve. Optional bounce, track fill gradient, and accent glow line add depth without distraction.
    

## Controls inside Framer

### Mode and State

-   Mode — Switch or Segmented
    
-   Default State — On or Off (Switch mode)
    
-   Options — 2 to 4 segments (Segmented mode)
    
-   Default Active — Set the initially selected segment
    
-   Labels 1–4 — Custom text for each segment
    

### Appearance

-   Preset — 7 curated themes plus Custom
    
-   Size — Small, Medium, or Large
    
-   Font — Full font family and weight control
    
-   Thumb Icon — Check/Cross, Sun/Moon, Power, Dot, or None (Switch mode)
    
-   Glow Line — Toggle the accent line at the bottom of the track
    

### Popout

-   Show Popout — Floating pill above a segment
    
-   Popout On — Choose which segment displays the popout
    
-   Popout Text — Customisable label (e.g., "Save 20%")
    
-   Popout Color — Match your brand or let it inherit the preset accent
    

### Effects

-   Glow Intensity — Control the luminance of the thumb and hover glow
    
-   Track Fill — Subtle gradient wash on the active state
    
-   Bounce — Adds a gentle spring overshoot to the thumb slide
    

### Custom Colors

-   Track Background, Thumb Background, Accent, Active Text, Inactive Text, Border — Full colour control when using the Custom preset
    

### Badge

-   Show Badge — Slide-in pill beside the toggle on active state
    
-   Badge Text and Badge Color — Fully customisable
    

## Best use cases

-   **Pricing pages.** Monthly vs Yearly vs Lifetime billing toggle with a "Save 20%" popout on the annual option.
    
-   **Dark mode switches.** Use the Sun/Moon thumb icon with the Obsidian or Minimal Light preset for an instantly recognisable toggle.
    
-   **SaaS feature selectors.** Let users switch between plan tiers or feature sets with a multi-segment control that matches your brand palette.
    
-   **Settings and preference panels.** On/off toggles for notifications, privacy, or display options with consistent, premium styling.
    

One component. Seven presets. Every toggle your site needs.

## Questions or custom requests?

We design and build custom Framer components. Get in touch at [**contact@teampixel.com.au**](mailto:contact@teampixel.com.au).

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

-   All · #11290

## Details

- **Author**: Aidan Looker
- **Price**: $6.00
- **Published**: 2026-04-21
- **Updated**: 2026-06-13
- **Added**: 2026-04-12
- **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