ToggleButton

Functions summary

Unit

@Composable
ToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier,
    buttonSize: ToggleButtonSize,
    enabled: Boolean,
    icon: (@Composable () -> Unit)?,
    shapes: ToggleButtonShapes,
    colors: ToggleButtonColors,
    elevation: ToggleButtonElevation?,
    border: BorderStroke?,
    contentPadding: PaddingValues,
    interactionSource: MutableInteractionSource?,
    content: @Composable RowScope.() -> Unit
)

Material Design toggle button

Cmn

Functions

ToggleButton

Cmn

Artifact: androidx.compose.material3:material3

View Source

@Composable
fun ToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    buttonSize: ToggleButtonSize = ToggleButtonSize.Small,
    enabled: Boolean = true,
    icon: (@Composable () -> Unit)? = null,
    shapes: ToggleButtonShapes = ToggleButtonDefaults.shapesFor(buttonSize),
    colors: ToggleButtonColors = ToggleButtonDefaults.colors(),
    elevation: ToggleButtonElevation? = ToggleButtonDefaults.elevation(),
    border: BorderStroke? = null,
    contentPadding: PaddingValues = ToggleButtonDefaults.contentPaddingFor(buttonSize, hasStartIcon = icon != null),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable RowScope.() -> Unit
): Unit

Material Design toggle button

This overload accepts an explicit buttonSize and optional icon to automatically configure container size, shapes, content padding, icon sizes, icon spacing, and typography.

There are multiple button size variants - providing a different ToggleButtonSize will affect default values used inside this button, such as the corner shape and padding. Note that you can still provide a size modifier such as androidx.compose.foundation.layout.size to change the layout size of this button, buttonSize affects default values and values internal to the button.

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material.icons.outlined.Edit
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.material3.ToggleButton
import androidx.compose.material3.ToggleButtonSize
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable

var checked by rememberSaveable { mutableStateOf(false) }
ToggleButton(
    checked = checked,
    onCheckedChange = { checked = it },
    buttonSize = ToggleButtonSize.Small,
    icon = {
        Icon(
            if (checked) Icons.Filled.Edit else Icons.Outlined.Edit,
            contentDescription = "Localized description",
        )
    },
) {
    Text("Label")
}

Parameters
`checked: Boolean`	whether the toggle button is toggled on or off.
`onCheckedChange: (Boolean) -> Unit`	called when the toggle button is clicked.
`modifier: Modifier = Modifier`	the `Modifier` to be applied to the toggle button.
`buttonSize: ToggleButtonSize = ToggleButtonSize.Small`	the `ToggleButtonSize` of this toggle button, controlling its height, padding, and icon sizing.
`enabled: Boolean = true`	controls the enabled state of this toggle button. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.
`icon: (@Composable () -> Unit)? = null`	optional icon to be placed before the `content`.
`shapes: ToggleButtonShapes = ToggleButtonDefaults.shapesFor(buttonSize)`	the `ToggleButtonShapes` that the toggle button will morph between depending on the user's interaction with the toggle button.
`colors: ToggleButtonColors = ToggleButtonDefaults.colors()`	`ToggleButtonColors` that will be used to resolve the colors used for this toggle button in different states. See `ToggleButtonDefaults.colors`.
`elevation: ToggleButtonElevation? = ToggleButtonDefaults.elevation()`	`ToggleButtonElevation` used to resolve the elevation for this button in different states.
`border: BorderStroke? = null`	the border to draw around the container of this toggle button.
`contentPadding: PaddingValues = ToggleButtonDefaults.contentPaddingFor(buttonSize, hasStartIcon = icon != null)`	the spacing values to apply internally between the container and the content
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this toggle button.
`content: @Composable RowScope.() -> Unit`	The content displayed on the toggle button, expected to be text, icon or image.

See also
`Button`	for a static button that doesn't need to be toggled.
`IconToggleButton`	for a toggleable button where the content is specifically an `Icon`.