8 switch styles, 5 content-switch transitions, badges, icons and Elementor-template content on either side. Below are the kinds of pages you would actually drop this widget into.
The most common use of this widget — a classic pill switch above your pricing cards, with a "Save 30%" badge doing the persuading.
$29/mo
Billed monthly. Cancel anytime, no long-term commitment.
$20/mo
Billed annually at $240/year — the equivalent of over 3 months free.
A segmented control reads like a native app setting — perfect for switching between two feature lists on a product page.
Rounded button pairs make it obvious both options are equally valid — no implied "default" the way a plain toggle can suggest.
182 cm · 79 kg
Frame size guide shown in centimeters and kilograms.
6'0" · 174 lb
Frame size guide shown in feet/inches and pounds.
A glowing gradient pill switches the whole hero pitch depending on who's reading — solo builders or a full team.
A minimal underline switch above an article summary — the short version for skimmers, the long version for the curious.
The short version
Revenue grew 34% this quarter, driven mostly by the new self-serve plan.
The detailed version
Revenue grew 34% quarter-over-quarter to $2.1M, with the new self-serve plan contributing $480K in net-new MRR and reducing average sales-cycle length from 21 to 9 days.
A dark switch that matches a dark-mode admin panel, revealing the advanced controls only when asked for.
Basic settings
Workspace name, timezone, and notification preferences.
Advanced settings
API rate limits, webhook endpoints, SSO configuration, and audit log retention.
An icon-only toggle — no label needed, the sun and moon say it all. Drop this straight into a header or settings menu.
Light mode active
This is how your site looks with a bright, high-contrast light theme.
Dark mode active
This is how your site looks with a dimmer, low-glare dark theme.
Glassmorphism keeps the hero photo visible behind the switch — perfect for a conference or festival schedule.