# Toggle Button

A toggle is used to quickly switch between two possible states. They are commonly used for "on/off" switches.

## Anatomy

<img src="/images/uxd/toggle-button.png">


- **Label:** The text displayed on the button, indicating its function.
- **Toggle Icon:** The visual indicator representing the active state.
- **Background:** The background area that encompasses the toggle button, providing visual context and affordance.
- **Border:** The outline surrounding the button, providing visual separation from surrounding elements.

## Variants

| Variant   | How to use                                                                                         |
| --------- | -------------------------------------------------------------------------------------------------- |
| Brand     | Brand toggle button is used if it's the primary action in a view. I.e. "Follow" on a subject page. |
| Primary   | Not used at the moment.                                                                            |
| Secondary | Secondary toggle buttons are used if we have several toggle buttons in a view.                    |

## Usage

A toggle is used to quickly switch between two possible states. They are commonly used for "on/off" switches.

### Dos

- **"On" state refers to the task as completed:** The off label should explain what happens when the toggle is on, i.e. "Follow" - and the on label confirms that the task is done, i.e. "Following".
- **Pair with other visual cues:** Make sure that it's clear what task the toggle refers to. Typically the button is placed in a list item or next to a subject label.

### Don'ts

- **Avoid using an On label that refers to the off state:** Don't use a negative copy for call to action, i.e. "Stop following". Instead use the on label to inform of the current state, i.e. "Following".
- **Overuse of Brand or Primary Toggle Buttons:** If there are several toggle buttons in one view they are all equally important, so don't use high emphasis buttons at all in that case.