Figma Toggle
Figma Toggle
Preview
Figma Toggle
Figma Toggle Component
The Toggle or Switch component allows users to switch between two states of a single interface action or property. It can also be used to immediately activate or deactivate a system's mode, action, or feature.
Toggle UI component provides animations for on/off visual states with color and position changes for clear and immediate feedback.
Toggle Anatomy
| Set | Variants | Properties | Copy to Figma |
|---|---|---|---|
| ToggleLabel | 32 | Size XL, Large, Medium, SmallState Hover Off, Off, Hover On, OnDirection Left, Right | |
| SwitchLabel | 32 | Size XL, Large, Medium, SmallState Hover Off, Off, Hover On, OnDirection Left, Right | |
| ToggleKnob | 24 | Size Small, Medium, Large, XLState Off, Hover Off, Disabled Off, Hover On, On, Disabled On | |
| Switch | 24 | Size Small, Medium, Large, XLState Off, Hover Off, Disabled Off, Hover On, On, Disabled On |
Figma Toggle
Toggle
figma toggle
switch ui
toggle component
Interactive component
