TonalSplitButton

Component in Material 3 Compose

A [SplitButton] let user define a button group consisting of 2 buttons. The leading button performs a primary action, and the trailing button performs a secondary action that is contextually related to the primary action.

Tonal split button is the medium-emphasis version of split buttons. It's a middle ground between [FilledSplitButton] and [OutlinedSplitButton]

Last updated: 2024-10-14 12:17

Installation

dependencies {
   implementation("androidx.compose.material3:material3:1.4.0-alpha01")
}

Overloads

@ExperimentalMaterial3ExpressiveApi
@Composable
fun TonalSplitButton(
    onLeadingButtonClick: () -> Unit,
    onTrailingButtonClick: () -> Unit,
    leadingContent: @Composable RowScope.() -> Unit,
    trailingContent: @Composable RowScope.() -> Unit,
    checked: Boolean,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    innerCornerSize: CornerSize = SplitButtonDefaults.InnerCornerSize,
    spacing: Dp = SplitButtonDefaults.Spacing
)

Parameters

name	description
onLeadingButtonClick	called when the leading button is clicked
onTrailingButtonClick	called when the trailing button is clicked
leadingContent	the content to be placed inside the leading button. A container will be provided internally to offer the standard design and style for a [TonalSplitButton].
trailingContent	the content to be placed inside the trailing button. A container is provided internally to ensure the standard design and style of a [TonalSplitButton]. The container corner radius morphs to full when the [checked] state changes to true.
checked	indicates if the trailing button is toggled. This can be used to indicate a new state that's a result of [onTrailingButtonClick]. For example, a drop down menu or pop up.
modifier	the [Modifier] to be applied to this split button.
enabled	controls the enabled state of the split button. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.
innerCornerSize	The size for leading button's end corners and trailing button's start corners
spacing	The spacing between the leading and trailing buttons

Code Example

TonalSplitButtonSample

@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Composable
@Preview
fun TonalSplitButtonSample() {
    var checked by remember { mutableStateOf(false) }

    TonalSplitButton(
        onLeadingButtonClick = {},
        checked = checked,
        onTrailingButtonClick = { checked = !checked },
        leadingContent = {
            Icon(
                Icons.Filled.Edit,
                modifier = Modifier.size(SplitButtonDefaults.LeadingIconSize),
                contentDescription = "Localized description"
            )
            Spacer(Modifier.size(ButtonDefaults.IconSpacing))
            Text("My Button")
        },
        trailingContent = {
            val rotation: Float by
                animateFloatAsState(
                    targetValue = if (checked) 180f else 0f,
                    label = "Trailing Icon Rotation"
                )
            Icon(
                Icons.Filled.KeyboardArrowDown,
                modifier =
                    Modifier.size(SplitButtonDefaults.TrailingIconSize).graphicsLayer {
                        this.rotationZ = rotation
                    },
                contentDescription = "Localized description"
            )
        }
    )
}