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 = ToggleButtonDefaults.size,
    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

Toggle button is a filled toggleable button that switches between primary and tonal colors depending on checked's value. It also morphs between the three shapes provided in shapes depending on the state of the interaction with the toggle button as long as the three shapes provided are CornerBasedShapes. If a shape in shapes isn't a CornerBasedShape, then toggle button will toggle between the ToggleButtonShapes according to user interaction.

Filled toggle button
image

This uses a ToggleButtonSize 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, ToggleButtonSize affects default values and values internal to the button.

ToggleButton with text content sample:

import androidx.compose.material3.Text
import androidx.compose.material3.ToggleButton
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable

var checked by rememberSaveable { mutableStateOf(false) }
ToggleButton(checked = checked, onCheckedChange = { checked = it }) { Text("Button") }

ToggleButton with icon and text sample:

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.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable

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

ToggleButton uses the small button design as default. For a ToggleButton that uses the design for extra small:

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.ExtraSmall,
    icon = {
        Icon(
            if (checked) Icons.Filled.Edit else Icons.Outlined.Edit,
            contentDescription = "Localized description",
        )
    },
) {
    Text("Label")
}

For a ToggleButton that uses the design for medium:

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.Medium,
    icon = {
        Icon(
            if (checked) Icons.Filled.Edit else Icons.Outlined.Edit,
            contentDescription = "Localized description",
        )
    },
) {
    Text("Label")
}

For a ToggleButton that uses the design for large:

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.Large,
    icon = {
        Icon(
            if (checked) Icons.Filled.Edit else Icons.Outlined.Edit,
            contentDescription = "Localized description",
        )
    },
) {
    Text("Label")
}

For a ToggleButton that uses the design for extra large:

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.ExtraLarge,
    icon = {
        Icon(
            if (checked) Icons.Filled.Edit else Icons.Outlined.Edit,
            contentDescription = "Localized description",
        )
    },
) {
    Text("Label")
}

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 = ToggleButtonDefaults.size`	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. This controls the size of the shadow below the button. Additionally, when the container color is `ColorScheme.surface`, this controls the amount of primary color applied as an overlay. See `ToggleButtonDefaults.elevation`.
`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. You can use this to change the toggle button's appearance or preview the toggle button in different states. Note that if `null` is provided, interactions will still happen internally.
`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`.