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.