In a situation where users can move between 2 possible states (for example on or off), there are two bits of information that are relevant to the user:
- The current state of the system 
- What will happen if the user presses the button — that is the next state, which could be off or on, depending on the current state
One way of implementing them would be to have two different UI elements: a state indicator and a change-state button.

University of Illinois at Urbana-Champaign

Summary: "On–off controls that switch between two different system states need to clearly communicate to users both the current state and the state the system will move to, should the user press that control."
- Two Pieces of Information, Two Controls
- Two Pieces of Information, One Control
- State-Switch Control Recommendations

State-Switch Controls: The Infamous Case of the "Mute" Button

By Raluca Budiu on October 18, 2020
Topics: Application Design,  Design Patterns,  Interaction Design
https://www.nngroup.com/articles/state-switch-buttons/
Copyright © 1998-2021 Nielsen Norman Group, All Rights Reserved.

NNG Article Reference: State-Switch Controls: The Infamous Case of the "Mute" Button

Two Pieces of Information, Two Controls

If you have a 2-state system, the current state and what will happen next are complementary. In other words, one may assume that the two pieces of information (state and what happens next) could be conveyed through a single control — a switch-state button. That’s because, if users knew one they could infer the other. However, this can require time and cognitive effort from the user. There are two alternative methods to use a single control to indicate both state and what will happen next:
- The button label communicates the state that the system will move to
- The button communicates the active state using a shadow

Two Pieces of Information, One Control


The safest solution is to use 2 UI elements, one for current state and another one for the switch-state action.

If you want, you can combine the two in a single control like Zoom does. Its Mute control has two separate components:
- A text label indicating what will happen if the user will tap on that control
- An icon indicating the current system state

Clicking on either will change the state.

Learn Before

Related