OutlinedSplitButton

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.

Outlined split buttons are medium-emphasis split buttons that are essentially [OutlinedSplitButton]s with a shadow. They contain actions that are important, but aren’t the primary action in an app.

Last updated: 2024-10-14 12:17

Installation

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

Overloads

@ExperimentalMaterial3ExpressiveApi
@Composable
fun OutlinedSplitButton(
    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 [OutlinedSplitButton].
trailingContent	the content to be placed inside the trailing button. A container is provided internally to ensure the standard design and style of a [OutlinedSplitButton]. 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

OutlinedSplitButtonSample

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

    OutlinedSplitButton(
        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"
            )
        }
    )
}