# Button groups
[Button groups](https://m3.material.io/components/button-groups/overview)
organize buttons and add interactions between them.There are two variants of a
button group.
1. Standard button group
2. Connected button group
**Note:** Images use various dynamic color schemes.
## Design & API documentation
* [Material 3 (M3) spec](https://m3.material.io/components/button-groups/overview)
* [API reference](https://developer.android.com/reference/com/google/android/material/button/package-summary)
## Anatomy
Button groups are invisible containers that add padding between buttons and
modify button shape. They don’t contain any buttons by default.
1. Container
More details on anatomy items in the
[component guidelines](https://m3.material.io/components/button-groups/guidelines#8fcef838-b0f2-4663-9df5-a8c140822fa6).
## M3 Expressive
### M3 Expressive update
Before you can use `Material3Expressive` component styles, follow the
[`Material3Expressive` themes setup instructions](https://github.com/material-components/material-components-android/tree/master/docs/getting-started.md#material3expressive-themes).
Button groups apply shape, motion, and width changes to buttons and icon buttons
to make them more interactive.
[More on M3 Expressive](https://m3.material.io/blog/building-with-m3-expressive)
Button groups are new components added in Expressive.
**Types and naming:**
* Added standard button group
* Added connected button group
* Use instead of segmented button, which is deprecated
**Configurations:**
* Works with all button sizes: XS, S, M, L, and XL
* Applies default shape to all buttons: round or square
### M3 Expressive styles
Default styles in the expressive themes:
- Standard button group:
`Widget.Material3Expressive.MaterialButtonGroup`
- Connected button group:
`Widget.Material3Expressive.MaterialButtonGroup.Connected`
## Key properties
### Shape and size attributes
Element | Attribute | Related method(s) | Default value
------------------------------- | ------------------------ | -------------------------------------------- | -------------
**Group shape (outer corners)** | `app:shapeAppearance` | `setShapeAppearance` `getShapeAppearance` | `none`
**Size of inner corners** | `app:innerCornerSize` | `setInnerCornerSize` `getInnerCornerSize` | `none`
**Spacing between buttons** | `android:spacing` | `setSpacing` `getSpacing` | `12dp`
**Child size change** | `app:childSizeChange` | N/A | `15%` in pressed, otherwise, `0%`
**Child overflow mode** | `app:overflowMode` | `setOverflowMode` `getOverflowMode` | `none`
**Overflow button icon** | `app:overflowButtonIcon` | `setOverflowButtonIcon` | `abc_ic_menu_overflow_material` (3 dots)
### Additional attributes of child buttons
Element | Attribute | Related method(s) | Default value
----------------------------------- | -------------------------| ----------------- | -------------
**Title of the overflow menu item** | `app:layout_overflowText`| N/A | button's `text` value, if not specified or empty
**Icon of the overflow menu item** | `app:layout_overflowIcon`| N/A | `null`
### Styles and theme attributes
Element | Style | Theme Attribute
------------------------------ | -------------------------------------- | ---------------
**Default style** | `Widget.Material3.MaterialButtonGroup` | `?attr/materialButtonGroupStyle`
**Overflow icon button style** | `?attr/materialIconButtonStyle` | `?attr/materialButtonGroupOverflowButtonStyle`
**Overflow menu style** | `?attr/popupMenuStyle` | `?attr/materialButtonGroupOverflowPopupMenuStyle`
## Variants of button groups
Standard button group
The standard button group contains multiple related individual buttons. The
individual button's shape is preserved.
#### Button group examples
Source code:
* `MaterialButtonGroup`
* [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/MaterialButtonGroup.java)
* `MaterialButton`
* [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/MaterialButton.java)
The following example shows a button group with three buttons that have text
labels.
In the layout:
```xml
```
Connected button group
In addition to standard button groups, connected button group also overrides the
individual button's shape to make them visually more belong to a group with 2dp
spacing, 8dp inner corners, and fully rounded outer corners.
#### Connected button group examples
Source code:
* `MaterialButtonGroup`
* [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/MaterialButtonGroup.java)
* `MaterialButton`
* [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/MaterialButton.java)
The following example shows a connected button group with three buttons that
have text labels. To correctly style a button group as connected button group,
the specific style needs to be set.
In the layout:
```xml
```
## Code implementation
Before you can use Material button groups, you need to add a dependency to the
Material components for Android library. For more information, go to the
[Getting started](https://github.com/material-components/material-components-android/tree/master/docs/getting-started.md)
page.
**Note:** `
Button groups apply shape, motion, and width changes to buttons and icon buttons
to make them more interactive.
[More on M3 Expressive](https://m3.material.io/blog/building-with-m3-expressive)
Button groups are new components added in Expressive.
**Types and naming:**
* Added standard button group
* Added connected button group
* Use instead of segmented button, which is deprecated
**Configurations:**
* Works with all button sizes: XS, S, M, L, and XL
* Applies default shape to all buttons: round or square
### M3 Expressive styles
Default styles in the expressive themes:
- Standard button group:
`Widget.Material3Expressive.MaterialButtonGroup`
- Connected button group:
`Widget.Material3Expressive.MaterialButtonGroup.Connected`
## Key properties
### Shape and size attributes
Element | Attribute | Related method(s) | Default value
------------------------------- | ------------------------ | -------------------------------------------- | -------------
**Group shape (outer corners)** | `app:shapeAppearance` | `setShapeAppearance`