Compose Component

ToggleButton

A Jetpack Compose Glimmer toggle button that changes its appearance depending on the checked value, used for exposing actions to a user.

ToggleButton

Source set: Android
@Composable
public fun ToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    buttonSize: ButtonSize = ButtonSize.Medium,
    leadingIcon: @Composable (() -> Unit)? = null,
    trailingIcon: @Composable (() -> Unit)? = null,
    shape: Shape = ToggleButtonDefaults.animateShape(checked),
    colors: ToggleButtonColors = ToggleButtonDefaults.colors(),
    border: BorderStroke? = SurfaceDefaults.border(),
    contentPadding: PaddingValues = ToggleButtonDefaults.contentPadding(buttonSize),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable RowScope.() -> Unit,
)

Parameters
checked a boolean flag indicating whether this toggle button is currently checked.
onCheckedChange A callback to be invoked when this toggle button is clicked, receiving the inverted checked value.
modifier the Modifier to be applied to this button.
enabled controls the enabled state of this button. When false, this button will not respond to user input.
buttonSize the size variant of this button, represented as a ButtonSize. Changing buttonSize will affect some default values used by this button, but the final resulting size of the button will still be calculated based on the content of the button and any provided size modifiers such as androidx.compose.foundation.layout.size. For example, setting a 100.dp size using a size modifier will result in the same layout size regardless of buttonSize, but the provided buttonSize will affect other properties such as padding values and the size of icons.
leadingIcon an optional leading icon to be placed before the content. This is typically an Icon.
trailingIcon an optional trailing icon to be placed after the content. This is typically an Icon.
shape the Shape of this toggle button. It is recommended to change the shape depending on the checked state. ToggleButtonDefaults provides both animated and non-animated versions, see ToggleButtonDefaults.animateShape and ToggleButtonDefaults.shape for more details.
colors the ToggleButtonColors that will be used to resolve the container and content colors based on the toggle button state.
border the border to draw around this button.
contentPadding the spacing values to apply internally between the container and the content.
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.
content the main content, typically Text, to display inside this button.

Last updated: