SegmentedButton

Functions summary

Unit
@Composable
MultiChoiceSegmentedButtonRowScope.SegmentedButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    shape: Shape,
    modifier: Modifier,
    enabled: Boolean,
    colors: SegmentedButtonColors,
    border: BorderStroke,
    contentPadding: PaddingValues,
    interactionSource: MutableInteractionSource?,
    icon: @Composable () -> Unit,
    label: @Composable () -> Unit
)

Material Design segmented Button
Cmn
Unit
@Composable
SingleChoiceSegmentedButtonRowScope.SegmentedButton(
    selected: Boolean,
    onClick: () -> Unit,
    shape: Shape,
    modifier: Modifier,
    enabled: Boolean,
    colors: SegmentedButtonColors,
    border: BorderStroke,
    contentPadding: PaddingValues,
    interactionSource: MutableInteractionSource?,
    icon: @Composable () -> Unit,
    label: @Composable () -> Unit
)

Material Design segmented button
Cmn

Functions

MultiChoiceSegmentedButtonRowScope.SegmentedButton

Cmn 
@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
): Unit

Material Design segmented Button

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

A default Toggleable Segmented Button. Also known as Outlined Segmented Button. See androidx.compose.foundation.selection.toggleable.

Toggleable segmented buttons should be used for cases where the selection is not mutually exclusive.

This should typically be used inside of a MultiChoiceSegmentedButtonRow

For a sample showing Segmented button with only checked icons see:

import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.TrendingUp
import androidx.compose.material.icons.filled.BookmarkBorder
import androidx.compose.material.icons.filled.StarBorder
import androidx.compose.material3.Icon
import androidx.compose.material3.MultiChoiceSegmentedButtonRow
import androidx.compose.material3.SegmentedButton
import androidx.compose.material3.SegmentedButtonDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier

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)
        }
    }
}
Parameters
checked: Boolean

whether this button is checked or not
onCheckedChange: (Boolean) -> Unit

callback to be invoked when the button is clicked. therefore the change of checked state in requested.
shape: Shape

the shape for this button
modifier: Modifier = Modifier

the Modifier to be applied to this button
enabled: Boolean = true

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 = SegmentedButtonDefaults.colors()

SegmentedButtonColors that will be used to resolve the colors used for this
border: BorderStroke = SegmentedButtonDefaults.borderStroke(colors.borderColor(enabled, checked))

the border for this button, see SegmentedButtonColors Button in different states
contentPadding: PaddingValues = SegmentedButtonDefaults.ContentPadding

the spacing values to apply internally between the container and the * content
interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions 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: @Composable () -> Unit = { SegmentedButtonDefaults.Icon(checked) }

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: @Composable () -> Unit

content to be rendered inside this button

SingleChoiceSegmentedButtonRowScope.SegmentedButton

Cmn 
@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
): Unit

Material Design segmented button

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

A default Toggleable Segmented Button. Also known as Outlined Segmented Button. See androidx.compose.foundation.selection.selectable.

Selectable segmented buttons should be used for cases where the selection is mutually exclusive, when only one button can be selected at a time.

This should typically be used inside of a SingleChoiceSegmentedButtonRow

For a sample showing Segmented button with only checked icons see:

import androidx.compose.foundation.layout.size
import androidx.compose.material3.SegmentedButton
import androidx.compose.material3.SegmentedButtonDefaults
import androidx.compose.material3.SingleChoiceSegmentedButtonRow
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

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)
        }
    }
}
Parameters
selected: Boolean

whether this button is selected or not
onClick: () -> Unit

callback to be invoked when the button is clicked. therefore the change of checked state in requested.
shape: Shape

the shape for this button
modifier: Modifier = Modifier

the Modifier to be applied to this button
enabled: Boolean = true

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 = SegmentedButtonDefaults.colors()

SegmentedButtonColors that will be used to resolve the colors used for this
border: BorderStroke = SegmentedButtonDefaults.borderStroke(colors.borderColor(enabled, selected))

the border for this button, see SegmentedButtonColors Button in different states
contentPadding: PaddingValues = SegmentedButtonDefaults.ContentPadding

the spacing values to apply internally between the container and the content
interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions 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: @Composable () -> Unit = { SegmentedButtonDefaults.Icon(selected) }

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: @Composable () -> Unit

content to be rendered inside this button