Toggle Premium

What is Toggle Premium?

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. 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 .

Toggle with presets and popouts.