Toggle button group
A toggle button group is a single and multi selection pattern that provides increased visual emphasis for the available choices.
- Skin
- Marko
- React
Friendly
Toggle button groups are interactive and provide subtle delight to the experience.
Quick
They should be lightweight and easily digestible for the action at hand.
Informative
They should help make decisions easier to scan in order to take action.
Use toggle buttons to highlight a selectable option with clear visual feedback. They work best when options stand on their own, helping create a strong visual hierarchy that guides users. For situations where the selection option is isolated, toggle buttons make the experience clear and focused. If your page features multiple selection sections, consider using radio buttons or checkboxes for a more organized and intuitive layout.
- Use toggle buttons when selection options exist in isolation, meaning they are not part of a multiple selection groups.
- Avoid toggle buttons when multiple selection sections appear on the same page or layout. In these cases, use radio buttons for single-choice selections or checkboxes for multiple-choice selections.
Size
It is important to ensure you follow the sizing guide for each toggle button variant. The various styles and layouts adhere to different minimum and maximum sizing rules.
