FilledSplitButton
Common
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.
Filled split button is the high-emphasis version of split button. It should be used for emphasizing important or final actions.
Last updated:
Installation
dependencies {
implementation("androidx.compose.material3:material3:1.4.0-alpha01")
}
Overloads
@ExperimentalMaterial3ExpressiveApi
@Composable
fun FilledSplitButton(
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 [FilledSplitButton]. |
trailingContent | the content to be placed inside the trailing button. A container is provided internally to ensure the standard design and style of a [FilledSplitButton]. 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 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
FilledSplitButtonSample
@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Composable
@Preview
fun FilledSplitButtonSample() {
var checked by remember { mutableStateOf(false) }
FilledSplitButton(
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"
)
}
)
}