Skip to content

Switch styles

The floating toggle comes in six built-in designs. Pick one under Customize → Style. Each shows a live mini-preview in your accent color.

  • Classic: a white pill with the label, spark, and a rounded track. The default.
  • iOS: a larger, softer track with a big knob and a subtle inset shadow.
  • Square: a low-radius track with a square knob; modern and techy.
  • Glow: the classic pill, but the track glows in your accent color when on.
  • Outline: a transparent, outlined track with an accent-colored knob; minimal.
  • Label-first: an accent-tinted pill that leads with the label, CTA-style.

Design-only #

Choosing a style changes only the switch's design: the shape, treatment, and glow. Your accent color, size, label, spark, and any custom CSS stay exactly as they are and apply on top. So you can freely try designs without losing your other settings.

Live preview

The Customize page shows a real, interactive preview. Toggle the button and select text in the mock article to see your chosen style and popup in action before you save.

Going further #

Any of these can be restyled or extended with raw CSS targeting the switch. See Custom CSS.