Toggle Group
A set of two-state buttons that can be toggled on or off with smooth, organic styling.
Single Selection
Multiple Selection
Light Selection Style
An alternative color scheme using light green (bg-primary/10) for the selected state instead of deep green. This creates a softer, more subtle selection indicator that works well for navigation-like toggles.
View Switcher
Theme Switcher
Pill Style Toggle
Uses deep green (bg-primary) for a more prominent selection state. Good for action confirmations.
Icon-Only Animated Toggle
Compact icon toggles with deep green selection. The strong contrast helps identify the active state at a glance.
Outline Variant
Sizes
Small
Default
Large
With Spacing
Segmented Control (No Spacing)
Use spacing=0 for a compact segmented control appearance.
Pricing Plan Switcher
Common pattern for pricing page toggles.