---
url: /components/button-groups/specs.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** · [Guidelines](guidelines.md) · [Accessibility](accessibility.md)

## Variants

![Various colors and shapes of standard and connected button groups.](/assets/65a5dc25-ma6nan75-01-3p.TpmVofOj.webp)

1. Standard button group
2. Connected button group

| Variant                |                                                                                                              M3                                                                                                              | M3 Expressive |
| ---------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------: |
| Standard button group  |                                                                                                              --                                                                                                              |   Available   |
| Connected button group | Available as [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.") |   Available   |

## Configurations

![Five sizes of button groups and two shapes of button groups.](/assets/083b69a4-mae9tpw8-standard.DgrSeW8t.webp)

Configurations for both variants of button groups:

1. Extra small
2. Small
3. Medium
4. Large
5. Extra large
6. Single-select and multi-select
7. Round and square

| Category      | Configuration                                   | M3                                                                                                                                                                                                                           | M3 Expressive |
| ------------- | ----------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| Size          | XS, S, M, L, XL                                 | --                                                                                                                                                                                                                           | Available     |
| Default shape | Round, square                                   | --                                                                                                                                                                                                                           | Available     |
| Selection     | Single-select, multi-select, selection-required | Available as [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.") | Available     |

## Tokens & specs

Standard and connected button group tokens are organized by size. Select the variant and size from the token set menu. Go to the [button](../buttons/specs.md) and [icon button](../icon-buttons/specs.md) pages to view their tokens. [Learn about design tokens](../../foundations/design-tokens/overview.md)

::: token-table token-table-082d7fd6e058b011-9ecd1779
**Button groups tokens** · 10 token sets · 55 tokens · [live token table](https://m3.material.io/components/button-groups/specs) · DSDB `TOKEN_TABLE.082d7fd6e058b011`

* Default context: none
* Not configurable here (group default used): Theme: Light · Platform: Android · Audience: 1P Baseline · Motion scheme: Standard · Font: Static · Contrast: Default · iOS dark theme elevation: None · iOS weight setting: Default · Language height: Small
* Reference chain: aliases from the token to its source value (`token → alias → … → value`). "—" means the token holds a literal value.

**Button group standard - Size - Xsmall** · `md.comp.button-group.standard.xsmall` · 5 tokens

For XS standard button groups.

| Group | Token | Type | Reference chain | Resolved value |
| --- | --- | --- | --- | --- |
| Pressed | `md.comp.button-group.standard.xsmall.pressed.item.width.motion.spring.dampening` | Duration | `md.sys.motion.spring.fast.spatial.damping` | `0.9` |
| Pressed | `md.comp.button-group.standard.xsmall.pressed.item.width.motion.spring.stiffness` | Duration | `md.sys.motion.spring.fast.spatial.stiffness` | `1400` |
| Pressed | `md.comp.button-group.standard.xsmall.pressed.item.width.multiplier` | Length | — | `15%` |
| Other | `md.comp.button-group.standard.xsmall.container.height` | Length | — | `32dp` |
| Other | `md.comp.button-group.standard.xsmall.between-space` | Length | — | `18dp` |

**Button group standard - Size - Small** · `md.comp.button-group.standard.small` · 5 tokens

For small standard button groups.

| Group | Token | Type | Reference chain | Resolved value |
| --- | --- | --- | --- | --- |
| Pressed | `md.comp.button-group.standard.small.pressed.item.width.motion.spring.stiffness` | Duration | `md.sys.motion.spring.fast.spatial.stiffness` | `1400` |
| Pressed | `md.comp.button-group.standard.small.pressed.item.width.multiplier` | Length | — | `15%` |
| Pressed | `md.comp.button-group.standard.small.pressed.item.width.motion.spring.dampening` | Duration | `md.sys.motion.spring.fast.spatial.damping` | `0.9` |
| Other | `md.comp.button-group.standard.small.container.height` | Length | — | `40dp` |
| Other | `md.comp.button-group.standard.small.between-space` | Length | `md.sys.measurement.space150` | `12dp` |

**Button group standard - Size - Medium** · `md.comp.button-group.standard.medium` · 5 tokens

For medium standard button groups.

| Group | Token | Type | Reference chain | Resolved value |
| --- | --- | --- | --- | --- |
| Pressed | `md.comp.button-group.standard.medium.pressed.item.width.motion.spring.stiffness` | Duration | `md.sys.motion.spring.fast.spatial.stiffness` | `1400` |
| Pressed | `md.comp.button-group.standard.medium.pressed.item.width.multiplier` | Length | — | `15%` |
| Pressed | `md.comp.button-group.standard.medium.pressed.item.width.motion.spring.dampening` | Duration | `md.sys.motion.spring.fast.spatial.damping` | `0.9` |
| Other | `md.comp.button-group.standard.medium.container.height` | Length | — | `56dp` |
| Other | `md.comp.button-group.standard.medium.between-space` | Length | `md.sys.measurement.space100` | `8dp` |

**Button group standard - Size - Large** · `md.comp.button-group.standard.large` · 5 tokens

For large standard button groups.

| Group | Token | Type | Reference chain | Resolved value |
| --- | --- | --- | --- | --- |
| Pressed | `md.comp.button-group.standard.large.pressed.item.width.motion.spring.stiffness` | Duration | `md.sys.motion.spring.fast.spatial.stiffness` | `1400` |
| Pressed | `md.comp.button-group.standard.large.pressed.item.width.multiplier` | Length | — | `15%` |
| Pressed | `md.comp.button-group.standard.large.pressed.item.width.motion.spring.dampening` | Duration | `md.sys.motion.spring.fast.spatial.damping` | `0.9` |
| Other | `md.comp.button-group.standard.large.container.height` | Length | — | `96dp` |
| Other | `md.comp.button-group.standard.large.between-space` | Length | `md.sys.measurement.space100` | `8dp` |

**Button group standard - Size - Xlarge** · `md.comp.button-group.standard.xlarge` · 5 tokens

For XL standard button groups.

| Group | Token | Type | Reference chain | Resolved value |
| --- | --- | --- | --- | --- |
| Pressed | `md.comp.button-group.standard.xlarge.pressed.item.width.motion.spring.stiffness` | Duration | `md.sys.motion.spring.fast.spatial.stiffness` | `1400` |
| Pressed | `md.comp.button-group.standard.xlarge.pressed.item.width.multiplier` | Length | — | `15%` |
| Pressed | `md.comp.button-group.standard.xlarge.pressed.item.width.motion.spring.dampening` | Duration | `md.sys.motion.spring.fast.spatial.damping` | `0.9` |
| Other | `md.comp.button-group.standard.xlarge.container.height` | Length | — | `136dp` |
| Other | `md.comp.button-group.standard.xlarge.between-space` | Length | `md.sys.measurement.space100` | `8dp` |

**Button group connected - Size - Xsmall** · `md.comp.button-group.connected.xsmall` · 6 tokens

For XS connected button groups.

| Group | Token | Type | Reference chain | Resolved value |
| --- | --- | --- | --- | --- |
| All tokens | `md.comp.button-group.connected.xsmall.container.height` | Length | — | `32dp` |
| All tokens | `md.comp.button-group.connected.xsmall.between-space` | Length | `md.sys.measurement.space25` | `2dp` |
| All tokens | `md.comp.button-group.connected.xsmall.container.shape` | Shape | `md.sys.shape.corner.full` | `Circular (fully rounded)` |
| All tokens | `md.comp.button-group.connected.xsmall.inner-corner.corner-size` | Shape | `md.sys.shape.corner-value.small` | `8dp` |
| All tokens | `md.comp.button-group.connected.xsmall.pressed.inner-corner.corner-size` | Shape | `md.sys.shape.corner-value.extra-small` | `4dp` |
| All tokens | `md.comp.button-group.connected.xsmall.selected.inner-corner.corner-size` | Length | — | `50%` |

**Button group connected - Size - Small** · `md.comp.button-group.connected.small` · 6 tokens

For small connected button groups.

| Group | Token | Type | Reference chain | Resolved value |
| --- | --- | --- | --- | --- |
| All tokens | `md.comp.button-group.connected.small.container.height` | Length | — | `40dp` |
| All tokens | `md.comp.button-group.connected.small.between-space` | Length | `md.sys.measurement.space25` | `2dp` |
| All tokens | `md.comp.button-group.connected.small.container.shape` | Shape | `md.sys.shape.corner.full` | `Circular (fully rounded)` |
| All tokens | `md.comp.button-group.connected.small.inner-corner.corner-size` | Shape | `md.sys.shape.corner-value.small` | `8dp` |
| All tokens | `md.comp.button-group.connected.small.pressed.inner-corner.corner-size` | Shape | `md.sys.shape.corner-value.extra-small` | `4dp` |
| All tokens | `md.comp.button-group.connected.small.selected.inner-corner.corner-size` | Length | — | `50%` |

**Button group connected - Size - Medium** · `md.comp.button-group.connected.medium` · 6 tokens

For medium connected button groups.

| Group | Token | Type | Reference chain | Resolved value |
| --- | --- | --- | --- | --- |
| All tokens | `md.comp.button-group.connected.medium.container.height` | Length | — | `56dp` |
| All tokens | `md.comp.button-group.connected.medium.between-space` | Length | `md.sys.measurement.space25` | `2dp` |
| All tokens | `md.comp.button-group.connected.medium.container.shape` | Shape | `md.sys.shape.corner.full` | `Circular (fully rounded)` |
| All tokens | `md.comp.button-group.connected.medium.inner-corner.corner-size` | Shape | `md.sys.shape.corner-value.small` | `8dp` |
| All tokens | `md.comp.button-group.connected.medium.pressed.inner-corner.corner-size` | Shape | `md.sys.shape.corner-value.extra-small` | `4dp` |
| All tokens | `md.comp.button-group.connected.medium.selected.inner-corner.corner-size` | Length | — | `50%` |

**Button group connected - Size - Large** · `md.comp.button-group.connected.large` · 6 tokens

For large connected button groups.

| Group | Token | Type | Reference chain | Resolved value |
| --- | --- | --- | --- | --- |
| All tokens | `md.comp.button-group.connected.large.container.height` | Length | — | `96dp` |
| All tokens | `md.comp.button-group.connected.large.between-space` | Length | `md.sys.measurement.space25` | `2dp` |
| All tokens | `md.comp.button-group.connected.large.container.shape` | Shape | `md.sys.shape.corner.full` | `Circular (fully rounded)` |
| All tokens | `md.comp.button-group.connected.large.inner-corner.corner-size` | Shape | `md.sys.shape.corner-value.large` | `16dp` |
| All tokens | `md.comp.button-group.connected.large.pressed.inner-corner.corner-size` | Shape | `md.sys.shape.corner-value.medium` | `12dp` |
| All tokens | `md.comp.button-group.connected.large.selected.inner-corner.corner-size` | Length | — | `50%` |

**Button group connected - Size - Xlarge** · `md.comp.button-group.connected.xlarge` · 6 tokens

For XL connected button groups.

| Group | Token | Type | Reference chain | Resolved value |
| --- | --- | --- | --- | --- |
| All tokens | `md.comp.button-group.connected.xlarge.container.height` | Length | — | `136dp` |
| All tokens | `md.comp.button-group.connected.xlarge.between-space` | Length | `md.sys.measurement.space25` | `2dp` |
| All tokens | `md.comp.button-group.connected.xlarge.container.shape` | Shape | `md.sys.shape.corner.full` | `Circular (fully rounded)` |
| All tokens | `md.comp.button-group.connected.xlarge.inner-corner.corner-size` | Shape | `md.sys.shape.corner-value.large-increased` | `20dp` |
| All tokens | `md.comp.button-group.connected.xlarge.pressed.inner-corner.corner-size` | Shape | `md.sys.shape.corner-value.large` | `16dp` |
| All tokens | `md.comp.button-group.connected.xlarge.selected.inner-corner.corner-size` | Length | — | `50%` |
:::

## Anatomy

Button groups are invisible containers that add padding between buttons and modify button shape. They don’t contain any buttons by default.

![The container outlined on both variants of button groups.](/assets/7a640e39-ma6nc084-anatomy.Bs0sUJAo.webp)

1. Container

### Common layouts

Mix and match buttons and icon buttons for different scenarios.

![4 common layouts of button groups.](/assets/ea10ca29-ma6ncj54-common-layouts.BkRJvOGq.webp)

1. Label buttons
2. Label buttons and icon buttons
3. Extra small icon buttons
4. Large icon buttons

### Color

Button groups have no color properties. They can use the default button or toggle button color styles, like filled, tonal, and outlined. Avoid using standard icon buttons or text buttons, as they have no container treatment.

![The container outlined on both variants of button groups.](/assets/dc050ff9-mliwoj5d-05.BghS3_G1.webp)

1. Filled
2. Tonal
3. Outlined
4. Elevated

## Selection & activation

**Standard button groups** add interaction between adjacent buttons when a button is selected or activated.<br><br>This interaction changes the width, shape, and padding of the selected or activated button, which adjusts the width of buttons directly next to it.

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fm3%2Fimages%2Fmack7ok2-GM3_Expressive_Button%20Group_Selection%20activation_Standard_3P_AI_v01.mp4?alt=media" aria-label="A selected button in a standard group bounces against its adjacent button, changing their widths."></video>

A selected button changes shape, and briefly changes the width of itself and adjacent buttons

**Connected button groups** don’t add any interaction between buttons when selected or activated. 

They only affect the shape of the button being selected or activated.

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fm3%2Fimages%2Fmack8xlo-GM3_Button-group_Specs_Selection-%26-activation_Connected_IA_v01.mp4?alt=media" aria-label="A selected button in a connected button group only changes its own shape."></video>

A selected button changes shape without affecting adjacent buttons

## States

### Standard button group

When a button is pressed, standard button groups modify the width and shape of that button and adjacent buttons.

![5 states of a standard button group.](/assets/fae8ebcb-mobjzmlh-07-key01-3p.BSyZXL_F.webp)

1. Enabled
2. Disabled
3. Hovered
4. Focused
5. Pressed

When a toggle button is selected in a standard button group, its shape should change between square and round. The color should change according to the [button specs](../buttons/specs.md).

<br>

![5 states of a standard button group with toggle buttons.](/assets/b3327646-mhsvti2a-08-3p.C4EqhYzf.webp)

1. Enabled
2. Disabled
3. Hovered
4. Focused
5. Pressed

### Connected button group

Connected button groups have different shape changes than standard button groups. Selecting a button does not affect adjacent buttons.

![5 states of a segmented button group.](/assets/2d19d767-mhsvu5c7-09-3p.BNstxL2q.webp)

Connected button group unselected states:

1. Enabled
2. Disabled
3. Hovered
4. Focused
5. Pressed

![4 states of a segmented button group with toggle buttons.](/assets/96e6b438-mhsvuqev-10-3p.C-6HLINl.webp)

Connected button group selected states:

1. Enabled
2. Hovered
3. Focused
4. Pressed

## Measurements

### Standard button group

Standard groups apply padding between all buttons. The amount of padding changes based on button size to ensure a minimum accessible target size of 48dp. More details on padding: [Button specs](../buttons/specs.md), [icon button specs](../icon-buttons/specs.md)

![Standard button group padding measurements.](/assets/c6e79ead-ma6nhwkj-padding.ZhXFHR70.webp)

Standard button group inner padding:

1. XS: 18dp
2. S: 12dp
3. M: 8dp
4. L: 8dp
5. XL: 8dp

### Connected button group

For all connected button groups, use 2dp padding. This provides visual consistency at scale.

![Connected button group padding and corner radius measurements.](/assets/ad02c437-ma6nj8kr-connected-padding.BdNCH7JO.webp)

Round connected button group inner padding is 2dp at every size. The outer shape is fully round, and the inner shape remains square with the following corner sizes:

1. XS: 4dp
2. S: 8dp
3. M: 8dp
4. L: 16dp
5. XL: 20dp

<br>

![Connected button group padding and corner radius measurements for square buttons.](/assets/46cadf81-ma6njl4y-connected.Dr0B2TuQ.webp)

Square connected button group inner padding is 2dp at every size. The outer shape has the following corner sizes:

1. XS: 4dp
2. S: 8dp
3. M: 8dp
4. L: 16dp
5. XL: 20dp

### Minimum widths

Extra small and small connected button groups have 48dp target areas and a minimum width of 48dp.

![48x48dp accessible target areas on the XS and S connected button groups.](/assets/7d8decd0-ma6nk25f-mind-width.B1sqQ1jq.webp)

1. Extra small
2. Small

## Density

Button groups adapt to density of the buttons inside. [More on density](../../foundations/layout/grids-spacing/density.md)

![Connected button groups at 0, -1, -2, and -3 density.](/assets/d8879d03-ma6nkg98-density.CnTSAqeO.webp)

Button groups adapt to the height of the buttons inside, including when density is applied