SegmentedButtonDefaults - API Reference Item in Material 3 Compose

Common

object SegmentedButtonDefaults

Properties

Common

val baseShape: CornerBasedShape

The shape of the segmented button container, for correct behavior this should or the desired CornerBasedShape should be used with itemShape and passed to each segmented button.

Common

val BorderWidth: Dp

Default border width used in segmented button

Common

val IconSize = OutlinedSegmentedButtonTokens.IconSize

Icon size to use for icons used in SegmentedButton

Common

val ContentPadding =
    PaddingValues(
        start = 12.dp,
        top = ButtonDefaults.ContentPadding.calculateTopPadding(),
        end = 12.dp,
        bottom = ButtonDefaults.ContentPadding.calculateBottomPadding(),
    )

The default content padding used by Segmented Buttons

Functions

@Composable fun colors() = MaterialTheme.colorScheme.defaultSegmentedButtonColors

Creates a SegmentedButtonColors that represents the different colors used in a SegmentedButton in different states.

colors

@Composable
    fun colors(
        activeContainerColor: Color = Color.Unspecified,
        activeContentColor: Color = Color.Unspecified,
        activeBorderColor: Color = Color.Unspecified,
        inactiveContainerColor: Color = Color.Unspecified,
        inactiveContentColor: Color = Color.Unspecified,
        inactiveBorderColor: Color = Color.Unspecified,
        disabledActiveContainerColor: Color = Color.Unspecified,
        disabledActiveContentColor: Color = Color.Unspecified,
        disabledActiveBorderColor: Color = Color.Unspecified,
        disabledInactiveContainerColor: Color = Color.Unspecified,
        disabledInactiveContentColor: Color = Color.Unspecified,
        disabledInactiveBorderColor: Color = Color.Unspecified,
    ): SegmentedButtonColors

Creates a SegmentedButtonColors that represents the different colors used in a SegmentedButton in different states.

Parameters


activeContainerColor	the color used for the container when enabled and active
activeContentColor	the color used for the content when enabled and active
activeBorderColor	the color used for the border when enabled and active
inactiveContainerColor	the color used for the container when enabled and inactive
inactiveContentColor	the color used for the content when enabled and inactive
inactiveBorderColor	the color used for the border when enabled and active
disabledActiveContainerColor	the color used for the container when disabled and active
disabledActiveContentColor	the color used for the content when disabled and active
disabledActiveBorderColor	the color used for the border when disabled and active
disabledInactiveContainerColor	the color used for the container when disabled and inactive
disabledInactiveContentColor	the color used for the content when disabled and unchecked
disabledInactiveBorderColor	the color used for the border when disabled and inactive

itemShape

@Composable
    @ReadOnlyComposable
    fun itemShape(index: Int, count: Int, baseShape: CornerBasedShape = this.baseShape): Shape

A shape constructor that the button in index should have when there are count buttons in the container.

Parameters


index	the index for this button in the row
count	the count of buttons in this row
baseShape	the CornerBasedShape the base shape that should be used in buttons that are not in the start or the end.

ActiveIcon

@Composable
    fun ActiveIcon()

And icon to indicate the segmented button is checked or selected

Icon

@Composable
    fun Icon(
        active: Boolean,
        activeContent: @Composable () -> Unit = { ActiveIcon() },
        inactiveContent: (@Composable () -> Unit)? = null,
    )

The default implementation of icons for Segmented Buttons.

Parameters


active	whether the button is activated or not.
activeContent	usually a checkmark icon of `IconSize` dimensions.
inactiveContent	typically an icon of `IconSize`. It shows only when the button is not checked.

borderStroke

fun borderStroke(color: Color, width: Dp = BorderWidth): BorderStroke

Default factory for Segmented Button BorderStroke can be customized through width, and color. When using a width different than default make sure to also update MultiChoiceSegmentedButtonRow or SingleChoiceSegmentedButtonRow space param.