DevOps

Should a toggle show its state or its action?

Should a toggle button display its current state, or the state it will switch to when pressed?

Asked on Stack Exchange,

It depends whether the control is an action or an option. An action shows what will happen when pressed, which is why a media button reads Play while paused. An option shows the state it is currently in, which is why a shuffle control should tell you shuffle is on.

The distinction that resolves it

One reply set it out in a sentence and it is the most useful line in the thread: if the toggle performs an action, label it with the thing that will happen; if it holds an option, label it with the state it is in. Play and Pause are actions, so the button shows the next event. Shuffle and repeat are settings, so the control should report how it is configured — the reader is asking what is true, not what would happen.

Why this is a known problem

The accepted answer cites Cooper and Reimann's About Face, where this pattern is filed under idioms to avoid. Their objection is precise: a single control operating two mutually exclusive options is efficient with space, but it fails the second job of any control, which is to tell you the current state. One button showing one word cannot reliably do both jobs at once.

Ways round it

  • Put the label outside the control rather than on it. The highest-voted answer pointed at the mobile switch pattern, where a fixed label names the setting and the switch itself shows the state — which lets the interface do both.
  • Choose words that cannot be read two ways. One reply diagnosed the English problem exactly: on and off work as both adjective and adverb, so the same word describes the state and the command.
  • Use appearance rather than text: a neutral control when the option is off, a highlighted one when it is on.
  • One reply illustrated why this matters by asking whether shuffle was on or off in a screenshot of a well-known music player. The question was rhetorical.

The test to apply

  • Ask whether someone glancing at the control needs to know what it will do, or what is currently true.
  • If they need both, one word on one button is not enough, and the answer is a second element rather than a cleverer label.
  • If the control is genuinely a setting, the state must be visible without pressing it — pressing to find out is the failure this pattern produces.