Also known as:
Toggle ButtonsRadio Button GroupsSwitchers
Button Group
Button Groups contain buttons that perform related actions.
- Overview
- Autocomplete (not built)
- Avatar (not built)
- Badge (not built)
- Button
- Button Group (not built)
- Card (not built)
- Checkbox Field
- Checkbox Group
- Collapsible
- Date Picker (not built)
- Divider (not built)
- Dropdown
- Empty State
- Global Notification
- Guidance Block
- Hero Card
- Icon
- Icon Button
- Illustration
- Infinite Scroll (not built)
- Inline Notification
- Loading Placeholder
- Loading Skeleton (not built)
- Loading Spinner (not built)
- Modal
- Pagination (not built)
- Popover
- Radio
- Radio Group
- Search Field (not built)
- Select
- Split Button
- Table
- Tabs (not built)
- Tag
- Text Field
- Tile (not built)
- Toast Notification
- Toggle Switch
- Tooltip
- Well
Need to know
- Button Groups contain buttons that perform related actions.
- Default button groups contain connected default buttons that immediately perform actions.
- Toggle button groups apply mutually exclusive settings.
Visuals
To keep in mind
A button group contains buttons that indicate to a user that they can perform actions on an object, such as:
- Apply an action to an object, e.g. save, delete, add an item, undo, create a new item
- Trigger the next step in a process
- Default button groups:
- Follow button principles.
- These use extremely closely related actions on a single object.
- Toggle button groups
- Follow button principles.
- If using icon buttons, follow icon button principles too.
- Mutually exclusive settings, such as choosing left, centered, or right aligned text.
When to use and when not to use
When to use
- Use when there’s not enough space for separate buttons or they control the one setting.
When not to use
- Don’t use a button group when there’s space for separate buttons.
- Don’t use a button group when switching between content or object pages. Use tabs instead.
External Links
Here are some examples of other existing design systems: