Switch
The switch is a component used to toggle between two mutually exclusive states.
Anatomy
1
2
1: Operate the slider
There must be a clickable toggle switch to change the status.
2: container
There must be, change the color of the container to follow the switch status.
Variant/Type
Active status
Open
Close
Disabled
Open
Close
Usage scenario
Message Notification
Message Notification
Label
lg-20
sm-16
20px
16px
36px
28px
Usage
Notice
Prompt sound
Do
Prevent notifications
No sound alert when displayed
Don't
The text on the switch should be accurate and concise, only expressing the content being controlled, avoiding the inclusion of logical terms or content that contradicts the function of the switch.
Switch
Toggle switch
Switch button
Option switch
Toggle