The toggle button is a button that indicates one of two states. Clicking the toggle button changes its state. The button returns to its initial state when the user clicks it again. It can contain an icon or a text. The toggle button is similar to a checkbox control.

Do

• If an option is inactive and the user can activate it by doing something on the same screen, then disable the button.
• If an option is inactive and the user can do nothing on the screen to make it active, then hide the button.
• When using text in button, name it as short as possible (best: a single-word), use self-explanatory text that clearly describes the action that the button performs (best: a verb), and explain it in more details in a tooltip. Also, keep in mind that it may be longer in other languages (up to 300%).

Don’t

• Don’t combine icons and text in one button.
• If an option is inactive and the user can do nothing on the same screen to make it active then don’t show the button.
• When using text in button, don’t show a tooltip unless you wish to provide more details about the button states.