Toggle

Binary state switches with hard-edge aesthetics. Toggles provide tactile feedback with solid shadows that press down on activation, like physical buttons on a control panel.

Basic Toggle

Toggle with Text

Sizes

Variants

Default

Outline

Animated Icon Toggles

Icons that animate when toggled - pulse, spin, bounce effects

Animated Icon Swap

Smooth transitions between different icons

Animated Background

Background animations that indicate state

Disabled State

Default Pressed

Practical Example: Text Alignment

Text Alignment

Note: For mutually exclusive options, use ToggleGroup instead

Icon Only Toggles