Compare Features LandingLanding page, 1 page
Flowline SaaS LandingLanding page, 1 page
Prismo Creative AgencyCreative, 1 page
Velour Car DetailingLanding page, 1 pageSegmented Pill Switch
Segmented controls (radiogroup) for billing periods, views or themes: a pill thumb glides to the chosen option and, with the spring curve, stretches toward it before settling; arrow keys, Home and End move the selection…
50 sites for €79 only, Compare all plans
All photos and visual assets used in this preview are sourced from Unsplash.
The system behind it
One pattern, your whole brand.
Segmented Pill Switch reads your ACSS tokens, so changing a color, a font or a spacing value once restyles it everywhere. No hard-coded values, nothing to override.
- Type
- Element
- Category
- Switches
- Responsive
- Desktop to phone
- Works with
- Bricks, ACSS, plain CSS
Options 10
Set on the section, in Bricks’ attributes panel. No code needed.
data-themesurface of the showcase section
data-alignalignment of the switches
data-styletrack surface
data-tonecolour of the thumb
data-sizesize
data-fullstretch every switch to the full row width with equal options
data-speedms · thumb glide time
data-easingthumb curve
data-animentrance
data-default0-based option shown first
Component props 1
Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.
labelMonthly
valuemonthly
showIconFalse
iconlist
showBadgeFalse
badge-20%
Included in Pro €99 once with Pro Unlimited Lifetime: all 785 patterns, unlimited sites.
Get Pro
