Switch

Definition: A switch is an element that represents a binary state. It typically toggles an option on and off.

When to use

Use a switch for binary choices, toggling settings on/off and quick and simple user actions.

Anatomy

  1. Toggle
  2. Label

 

 

 

 

Variations

  1. Switch in small size
  2. Switch in large size
  3. Switch with a clear label indicating the state
  4. Custom switch in light mode
  5. Custom switch in dark mode

 

 

 

 

 

 

States

  1. Enabled
  2. Hover
  3. Focused
  4. Error
  5. Disabled

 

Radio button
Resources
Switch
Best practices
VUD Product Design System

VUD Product Design System is a collection of design assets, tokens, guidelines, code snippets and components that guarantees consistency and efficiency in the design and development process across enterprise software solutions.

Resources
Support

© 2024 Visma Unified Design.