Switch
Description
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 composition
Component consists of the following:
Switch.Value
Switch.Addon
Appearance
Sizes
The switch comes in three sizes: m
, l
and xl
.
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 --text-secondary
token.
Switch size (height in px) | Appearance example and margins | Styles |
---|---|---|
M (12px) | font-size: var(--fs-100) , margin between the control and the text is 8px | |
L (20px) | font-size: var(--fs-200) , margin between the control and the text is 8px | |
XL (24px) | font-size: var(--fs-300) , margin between the control and the text is 8px |
Themes
The Switch component offers two themes: info
and success
.
Theme | Appearance example | Usage |
---|---|---|
info | Default theme. | |
success | Theme for highlighting a positive enabled state of the switch. |
Switch with icon
For larger sizes of the component (l
and 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.
size | Normal state | Checked state |
---|---|---|
L | ||
XL |
Interaction
State | Appearance example | Styles |
---|---|---|
Normal | background: var(--control-switch-bg) | |
Checked | background: var(--control-primary-success) or background: var(--control-primary-info) . | |
Disabled | Transparency of the component changes to 30%. Use --disabled-opacity token. |
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.