Components

Toggle Buttons

Toggle buttons activate and deactivate content directly via a button, either isolated or grouped. This guide explains how to use them.

This guide contains

Usage

Grouping

Toggle buttons can be used in two ways. If they don’t influence, each other you can place them solitarily. Group them together whenever they are related and only one option can be applied.

Button or underline

Basic toggle buttons have a simple border. More lightweight toggle buttons can also be used if needed. A simple text button that has an underline as soon as it is toggled is sufficient here. Another option is to use simple text and a full button as the toggled element.

Colors and icons

Toggle buttons can be set in black or red as a main color. Be careful not to mix them in your designs. In addition, toggle button may also consist of only one icon if necessary.