Group

When to use

Use a set of buttons to switch between different views. Be mindful of how a lengthy series of toggle buttons may appear on smaller screens. In such cases, consider using a type of control that would be more suitable.

Anatomy

1. Icon
2. Label
3. Body

 

 

 

 

 

Positions

1. Start
2. Middle
3. End

 

 

 

 

Variations

1. Button group with text only
2. Button group with left icon
3. Button group with right icons (example of nested badges)
4. Button group with icons

 

 

 

 

Action types

 

 

 

 

 

Where to use

✅ Toolbars

✅ Forms

✅ Menus