---
url: /components/button-groups/guidelines.md
description: Button groups organize buttons and add interactions between them
---
# Button groups
Button groups organize buttons and add interactions between them
[Overview](overview.md) · [Specs](specs.md) · **Guidelines** · [Accessibility](accessibility.md)
Standard button groups add interaction between adjacent buttons
## Usage
There are two variants of button groups: **standard** and **connected**.
**Standard button groups** add interaction between adjacent buttons so they respond to each other. When a button in a standard group is selected:
* The selected button changes shape and width
* A selected toggle button also changes color
* Adjacent buttons move and temporarily change width
Button groups add more expression to a product
Mix and match the different button variants, widths, and colors to emphasize what’s important, and to visually group related buttons.
By default, all buttons in a standard group should be the same size (XS to XL) and shape (round or square).
* Only use multiple sizes in a group for hero moments
* Avoid mixing sizes frequently
* Only use a different shape in a group when a button is selected, or to add meaning or contrast
::: tip Do
Use the same shapes for buttons in a group, but change other properties like width and color
:::
::: warning Caution
Reserve shape differences in button groups for key interactions
:::
**Connected button groups** help people select options, switch views, or sort elements in a page.
They behave similarly to standard groups, except they don’t affect adjacent buttons.
Connected groups should replace the [baseline segmented button](../segmented-buttons/overview.md "Segmented buttons help people select options, switch views, or sort elements. Note: They're deprecated in the expressive update. Use a nav rail instead."), which is no longer recommended.
Connected button groups can be used to toggle between similar actions
Use connected button groups when the button content is related, and buttons can be selected.
Closely related actions work well in a connected button group
Connected button groups should be used for single or multi-select patterns that use toggle buttons.
Avoid using a connected group when none of the buttons can be toggled.
Use the connected button group with single or multi-select patterns
### Color
Avoid mixing color styles in connected button groups; it can make selection and emphasis unclear.
::: danger Don't
Don’t mix color styles in connected button groups
:::
## Anatomy
1. Container
### Container
The standard button group container has padding between buttons so they can animate width and shape without disrupting the product layout.
The standard button group hugs the width of the buttons inside.
Button groups can animate without affecting their surroundings
The connected button group should span the width of the page or surface it’s placed on, increasing the button widths inside.
In larger windows, consider adding a maximum width to the connected group to avoid it growing too wide.
Connected button groups increase the widths of each button inside and expand to their container width
## Adaptive design
Adaptive design allows an interface to respond or change based on context, such as the user, device, and usage. [More on adaptive design](../../foundations/layout/layout-overview/adaptive-design.md)
### Resizing
Button groups should move through layouts together in a single line. They shouldn’t wrap to a second line. Multiple button groups can be stacked to keep items close together. However, button groups don’t interact vertically.
Button groups and individual buttons can be set to **fixed** or **flexible** resizing:
* **Fixed**: Manually define the button width (narrow to wide), size (XS to XL), or padding at each breakpoint.
* **Flexible**: Automatically increase or decrease the width of buttons and the button group. Button groups grow until all flexible buttons are at their largest width.
If adjusting button width manually, avoid stretching icon buttons beyond the wide setting.
Buttons can have width, size, and padding manually adjusted to fit different breakpoints
In [compact windows](../../foundations/layout/breakpoints/compact.md "Window widths smaller than 600dp, such as a phone in portrait orientation."), consider using smaller, narrower buttons so all buttons in the button group can fit. In [large](../../foundations/layout/breakpoints/large-extra-large.md "Window widths 1200dp to 1599dp, such as desktop.") and [extra large](../../foundations/layout/breakpoints/large-extra-large.md "Window widths 1600dp and larger, such as ultra-wide monitors.") windows, consider using larger, wider buttons to better fill in the available space.
Flexible buttons or button groups will automatically adjust width.
Set the size, shape, and padding to manually adjust the button group at different breakpoints
When scaling to larger breakpoints, make sure that the visual hierarchy of each button is preserved using qualities like color and size.
For example, the primary action should remain the largest, widest, or most visually prominent button at all breakpoints.
Maintain hierarchy across layouts and devices
### Presentation
Buttons at the trailing edge of the button group can be customized to collapse into an overflow menu at smaller breakpoints, and become visible again at larger sizes. Place the overflow menu at the trailing end of the group.
Buttons outside the group aren’t affected by button group behavior.
Buttons should become hidden in an overflow menu or visible again, depending on screen size. Buttons outside the button group, like the **end call** button, will not be affected.
## Behavior
### Pressed
When a button is pressed, it changes width and shape.
In a standard button group, pressing a button also affects the width of adjacent buttons.
In a connected button group, only the shape of the pressed button changes.
Pressing buttons in a standard group changes the width of adjacent buttons
### Selected
A selected button should change shape from round to square, or square to round.
Selected buttons should change shape