Switch is a component that enables users to easily switch between two options or states without needing to refresh the page or confirm their choice.
Component consists of the following:
Sizes and margins
The switch comes in three sizes:
The switch includes a text label, which can be added to one or both of the states. When the option is enabled, the text color uses the
--text-primary token, and when the option is disabled, the text color uses the
|Switch size (height in px)||Appearance example and margins||Styles|
The Switch component offers two themes:
|Theme for highlighting a positive enabled state of the switch.|
Icon inside Switch.Value
For larger sizes of the component (
xl), you have the option to include an icon within the
Switch.Value. It is recommended to use different icons for the off and on states.
|Switch size||Normal state||Checked state|
|Disabled||Transparency of the component changes to 30%. Use |
Usage in UX/UI
For clear actions when using the toggle, use positive language for text labels in the Switch. Avoid negations like "Don't show trending subtopics," as they can cause confusion about the switch's effect. Instead, use language that clearly indicates what the switch does, such as "Show trending subtopics."
When making labels, use action verbs like "Send by email" to clearly indicate the switch's purpose.
But, in cases with limited interface space or when the label is part of a switch group (specifically in settings), it's okay to use labels without verbs.