---
title: "SegmentedButton"
description: "Segmented buttons help people select options, switch views, or sort elements."
type: "component"
---

<div class='type'>Composable Component</div>



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

<a id='references'></a>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
@Composable
fun MultiChoiceSegmentedButtonRowScope.SegmentedButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    shape: Shape,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: SegmentedButtonColors = SegmentedButtonDefaults.colors(),
    border: BorderStroke =
        SegmentedButtonDefaults.borderStroke(colors.borderColor(enabled, checked)),
    contentPadding: PaddingValues = SegmentedButtonDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    icon: @Composable () -> Unit = { SegmentedButtonDefaults.Icon(checked) },
    label: @Composable () -> Unit,
)
```


#### Parameters

| | |
| --- | --- |
| checked | whether this button is checked or not |
| onCheckedChange | callback to be invoked when the button is clicked. therefore the change of checked state in requested. |
| shape | the shape for this button |
| modifier | the `Modifier` to be applied to this button |
| enabled | controls the enabled state of this button. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services. |
| colors | `SegmentedButtonColors` that will be used to resolve the colors used for this |
| border | the border for this button, see `SegmentedButtonColors` Button in different states |
| contentPadding | the spacing values to apply internally between the container and the   * content |
| interactionSource | an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this button. You can use this to change the button's appearance or preview the button in different states. Note that if `null` is provided, interactions will still happen internally. |
| icon | the icon slot for this button, you can pass null in unchecked, in which case the content will displace to show the checked icon, or pass different icon lambdas for unchecked and checked in which case the icons will crossfade. |
| label | content to be rendered inside this button |




<div class='sourceset sourceset-common'>Common</div>


```kotlin
@Composable
fun SingleChoiceSegmentedButtonRowScope.SegmentedButton(
    selected: Boolean,
    onClick: () -> Unit,
    shape: Shape,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: SegmentedButtonColors = SegmentedButtonDefaults.colors(),
    border: BorderStroke =
        SegmentedButtonDefaults.borderStroke(colors.borderColor(enabled, selected)),
    contentPadding: PaddingValues = SegmentedButtonDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    icon: @Composable () -> Unit = { SegmentedButtonDefaults.Icon(selected) },
    label: @Composable () -> Unit,
)
```


#### Parameters

| | |
| --- | --- |
| selected | whether this button is selected or not |
| onClick | callback to be invoked when the button is clicked. therefore the change of checked state in requested. |
| shape | the shape for this button |
| modifier | the `Modifier` to be applied to this button |
| enabled | controls the enabled state of this button. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services. |
| colors | `SegmentedButtonColors` that will be used to resolve the colors used for this |
| border | the border for this button, see `SegmentedButtonColors` Button in different states |
| contentPadding | the spacing values to apply internally between the container and the content |
| interactionSource | an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this button. You can use this to change the button's appearance or preview the button in different states. Note that if `null` is provided, interactions will still happen internally. |
| icon | the icon slot for this button, you can pass null in unchecked, in which case the content will displace to show the checked icon, or pass different icon lambdas for unchecked and checked in which case the icons will crossfade. |
| label | content to be rendered inside this button |




<div class='sourceset sourceset-common'>Common</div>


> **Deprecated** kept for binary compatibility

```kotlin
@Composable
fun MultiChoiceSegmentedButtonRowScope.SegmentedButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    shape: Shape,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: SegmentedButtonColors = SegmentedButtonDefaults.colors(),
    border: BorderStroke =
        SegmentedButtonDefaults.borderStroke(colors.borderColor(enabled, checked)),
    interactionSource: MutableInteractionSource? = null,
    icon: @Composable () -> Unit = { SegmentedButtonDefaults.Icon(checked) },
    label: @Composable () -> Unit,
)
```


<div class='sourceset sourceset-common'>Common</div>


> **Deprecated** kept for binary compatibility

```kotlin
@Composable
fun SingleChoiceSegmentedButtonRowScope.SegmentedButton(
    selected: Boolean,
    onClick: () -> Unit,
    shape: Shape,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: SegmentedButtonColors = SegmentedButtonDefaults.colors(),
    border: BorderStroke =
        SegmentedButtonDefaults.borderStroke(colors.borderColor(enabled, selected)),
    interactionSource: MutableInteractionSource? = null,
    icon: @Composable () -> Unit = { SegmentedButtonDefaults.Icon(selected) },
    label: @Composable () -> Unit,
)
```




## Code Examples
### SegmentedButtonMultiSelectSample
```kotlin
@Composable
@Preview
fun SegmentedButtonMultiSelectSample() {
    val checkedList = remember { mutableStateListOf<Int>() }
    val options = listOf("Favorites", "Trending", "Saved")
    val icons =
        listOf(
            Icons.Filled.StarBorder,
            Icons.AutoMirrored.Filled.TrendingUp,
            Icons.Filled.BookmarkBorder,
        )
    MultiChoiceSegmentedButtonRow {
        options.forEachIndexed { index, label ->
            SegmentedButton(
                shape = SegmentedButtonDefaults.itemShape(index = index, count = options.size),
                icon = {
                    SegmentedButtonDefaults.Icon(active = index in checkedList) {
                        Icon(
                            imageVector = icons[index],
                            contentDescription = null,
                            modifier = Modifier.size(SegmentedButtonDefaults.IconSize),
                        )
                    }
                },
                onCheckedChange = {
                    if (index in checkedList) {
                        checkedList.remove(index)
                    } else {
                        checkedList.add(index)
                    }
                },
                checked = index in checkedList,
            ) {
                Text(label)
            }
        }
    }
}
```
### SegmentedButtonSingleSelectSample
```kotlin
@Composable
@Preview
fun SegmentedButtonSingleSelectSample() {
    var selectedIndex by remember { mutableStateOf(0) }
    val options = listOf("Day", "Month", "Week")
    SingleChoiceSegmentedButtonRow {
        options.forEachIndexed { index, label ->
            SegmentedButton(
                shape = SegmentedButtonDefaults.itemShape(index = index, count = options.size),
                onClick = { selectedIndex = index },
                selected = index == selectedIndex,
            ) {
                Text(label)
            }
        }
    }
}
```