Toggle Button

Usage

When to Use

Use a toggle button to turn an option on or off instantly. If a physical switch would work for the action, a toggle button is probably the best component to use. (NNGroup, Toggle-Switch Guidelines)

When Not to Use

If the change between on- and off-state is not instant, use a checkbox instead. Toggle buttons should never require users to take an additional confirmation, e.g. clicking a button to apply the change.

Variants

Disabled Toggle Button

If toggle buttons are disabled, users can’t interact with them. If you use disabled toggle buttons, make sure that it is obvious why a toggle is disabled or what users have to do to enable it.

Content

Use short and descriptive labels. Try to use three or fewer words. If that’s not possible, provide a description below the toggle button or add a tooltip next to the toggle button.

Avoid using verb phrases like 'Turn on …' or 'Enable …'. It often helps to read the label and append the word 'on' or 'off' to the end. If it doesn’t make sense, rewrite the label.

Generally, avoid using personal pronouns like 'your' or 'my' in your labels. They are often not necessary and can even confuse users. If you can’t avoid them, use the first person for toggle button labels (I, me, my). You can read more about this topic in the chapter “Personal Pronouns: Your or My?” in the Language and Grammar Guidelines.

Use sentence-style capitalization for your labels and for help text. Only use periods in help text if the help text consists of two or more sentences.

Spacing and Alignment

Use at least 8 pixels of spacing in between separate toggle buttons for vertical alignment.

Generally, avoid horizontal alignment of toggle buttons. If you can’t avoid it, use at least 16 pixels of spacing.