---
url: /components/segmented-buttons/overview.md
description: Segmented buttons help people select options, switch views, or sort elements.
---

# Segmented buttons

Segmented buttons help people select options, switch views, or sort elements.

**Overview** · [Specs](specs.md) · [Guidelines](guidelines.md) · [Accessibility](accessibility.md)

![Segmented buttons](/assets/92787107-mrol3xad-seg-buttons.B9iHXQni.webp)

::: info Note
Segmented buttons are no longer recommended in the Material 3 expressive update. For those who have updated, use the [connected button group](../button-groups/overview.md) instead, which has mostly the same functionality but with an updated visual design.
:::

* Segmented buttons can contain icons, label text, or both
* Two variants: single-select and multi-select
* Use for simple choices between two to five items (for more items or complex choices, use [chips](../chips/overview.md "Chips help people enter information, make selections, filter content, or trigger actions."))

![Two variants of segmented buttons.](/assets/49585d98-lw7qvais-1.DmF7yrXU.webp)

1. Single-select segmented button
2. Multi-select segmented button

## Availability & resources

| Type | Resource | Status |
| --- | --- | --- |
| Design | [Design Kit (Figma)](https://www.figma.com/community/file/1035203688168086460) | Available |
| Implementation | [Flutter](https://api.flutter.dev/flutter/material/SegmentedButton-class.html) | Available |
| Implementation | [Jetpack Compose](https://developer.android.com/develop/ui/compose/components/segmented-button) | Available |
| Implementation | [Android Views (MDC-Android)](https://github.com/material-components/material-components-android/blob/master/docs/components/Button.md#toggle-button) | Available |
| Implementation | Web | Unavailable |

## M3 Expressive update

**May 2025**

The segmented button is no longer recommended. Use the [connected button group](../button-groups/overview.md) instead. [More on M3 Expressive](https://m3.material.io/blog/building-with-m3-expressive)

## Differences from M2

* **Color:** New color mappings and compatibility with [dynamic color](../../styles/color/dynamic/choosing-a-source.md "Dynamic color takes a single color from a user's wallpaper or in-app content and creates an accessible color scheme assigned to elements in the UI.")
* **Icons:** Optional check icon to indicate selected [state](../../foundations/interaction/states/overview.md "States show the interaction status of a component or UI element.")
* **Layout:** Taller container height of 40dp
* **Name and variants:** Segmented buttons were previously known as toggle buttons. They now have two official variants: single-select and multi-select.
* **Shape:** Fully rounded corners
* **Typography: **Labels use sentence case instead of all caps

![Diagram indicating the fully rounded corner radius of a segmented button.](/assets/7f3fcfcc-lwhr0fyz-2.B_VnaYh1.webp)

Segmented buttons now have a container height of 40dp

![Segmented buttons with M2 color mappings, all caps text labels, boxy shape, and shorter height.](/assets/aeb1f1c5-l20oj7ju-example.QhWHV1db.webp)

M2: Segmented buttons had a small corner radius and label text in all caps

![Segmented buttons with M3 color mappings, sentence case text labels, fully round shape, and taller height.](/assets/b60677a6-lw7ruslm-4.BSWHrQeh.webp)

M3: Segmented buttons have fully rounded corners, sentence-case text, different height, and new color mappings