Components
Switch.
The Switch represents a binary state - on/off or enabled/disabled. It looks like a sliding button and gives immediate visual feedback on toggle. Switches are commonly used for preferences, settings, or feature activation. Unlike checkboxes, switches commit on toggle with no Save button required.
Anatomy
Size
Three sizes for different surface densities. Medium (34x18px) is the Sprout default.
Small
Medium (default)
Large
Do's & Don'ts
Enable notifications
Do
Always pair a switch with a short, descriptive label
Don't
Don't use a switch without a label - the user won't know what it controls
Enable notificationsDark mode
Do
Apply changes immediately on toggle - no save button needed
Enable notifications
Don't
Don't pair a switch with a Save button - that's a form pattern, not a switch
Enable wifi
Do
Use for simple, reversible on/off settings the user controls
Delete all data
Don't
Don't use switches for destructive or irreversible actions
Privacy mode
Do
Use a switch for persistent preferences the system remembers
Privacy settings
Don't
Don't use a checkbox where a switch is expected - pick one pattern per context
Spec
Switch track34x18px (medium), 26x14px (small), 44x24px (large)
Switch thumb14px diameter (medium), 10px (small), 18px (large)
Switch gap label9px between track and label