Member-only story
The basics of designing a switch component in a design system
A simple guide to understanding the switch UI element
Every design system should include the switch component. This component, also called a toggle component, is a small and basic component commonly used on mobile devices and desktop apps, and it is used to enable and disable different options.
This article focuses on the switch component, its basics, the UI design, and some best practices.
Switch component basic structure
The switch component consists of a track and a thumb. The thumb travels along the track to indicate its current status. It is possible to design this component with an indicator inside the thumb or the track to explain the status, but in most design systems, the basic design is used.
State and possibilities
In most design system documentation I have read, the common statuses are enabled, disabled, and focus. Additionally, there are two statuses in Google material design, hover and pressed.
