Compose Multiplatform Material3/androidx.compose.material3/SegmentedButton

SegmentedButton

@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)

Material 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 Modifier.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:

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

interactionSource

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

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

Samples

androidx.compose.material3.samples.SegmentedButtonMultiSelectSample
@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)

Material 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 Modifier.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:

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

interactionSource

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

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

Samples

androidx.compose.material3.samples.SegmentedButtonSingleSelectSample