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.
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.
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
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
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
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
Track Background, Thumb Background, Accent, Active Text, Inactive Text, Border — Full colour control when using the Custom preset
Show Badge — Slide-in pill beside the toggle on active state
Badge Text and Badge Color — Fully customisable
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.
We design and build custom Framer components. Get in touch at contact@teampixel.com.au.
Aidan Looker
