Button Group
Button Groups contain buttons that perform related actions.
Also known as:
Toggle ButtonsRadio Button GroupsSwitchers
- Overview
- Autocomplete (not built)
- Avatar
- Badge
- Button
- Button Group (not built)
- Card
- Checkbox Group
- Collapsible
- Commentary
- Content
- Date Picker (not built)
- Divider
- Drawer
- Dropdown
- Empty State
- Filter Menu
- Global Notification
- Guidance Block
- Hero Card
- Icon
- Icon Button
- Illustration
- Infinite Scroll (not built)
- Inline Notification
- Likert Scale Legacy
- Loading Placeholder
- Loading Skeleton (not built)
- Loading Spinner
- Menu
- Modal
- Pagination (not built)
- Popover
- Progress Bar (not built)
- Progress Stepper
- Radio
- Radio Group
- Rich Text Editor
- Search Field (not built)
- Select
- Slider (not built)
- Split Button
- Table
- Tabs
- Tag
- Tile
- Tile Grid
- Toast Notification
- 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
UI Kit
Examples
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
- For an example of a toggle button group, consider Bold/Italic/Underline in a text editor.
- 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.
- Use when all the actions in the group take place immediately on click. For example, if one or more actions does not immediately apply on click, then either use a different component, or remove that action from the group. If a subsequent button press is required, consider using a radio group instead.
- Use when the buttons can all be described by one related action. For example, in options to add to calendar, ICS and Google Cal are both options to add to calendar.
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: