ToggleButton

Functions summary

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

TODO link to mio page when available.
Cmn

Functions

ToggleButton

Cmn 
@Composable
@ExperimentalMaterial3ExpressiveApi
fun ToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shapes: ToggleButtonShapes = ToggleButtonDefaults.shapesFor(ButtonDefaults.MinHeight),
    colors: ToggleButtonColors = ToggleButtonDefaults.toggleButtonColors(),
    elevation: ButtonElevation? = ButtonDefaults.buttonElevation(),
    border: BorderStroke? = null,
    contentPadding: PaddingValues = ButtonDefaults.contentPaddingFor(ButtonDefaults.MinHeight),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable RowScope.() -> Unit
): Unit

TODO link to mio page when available.

Toggle button is a 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 our CornerBasedShapes. If a shape in shapes isn't a CornerBasedShape, then toggle button will toggle between the ToggleButtonShapes according to user interaction.

TODO link to an image when available

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

import androidx.compose.material3.Text
import androidx.compose.material3.ToggleButton
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

var checked by remember { mutableStateOf(false) }
ToggleButton(checked = checked, onCheckedChange = { checked = it }) { Text("Button") }
 
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material.icons.outlined.Edit
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.ElevatedToggleButton
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.material3.ToggleButton
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier

var checked by remember { mutableStateOf(false) }
ElevatedToggleButton(checked = checked, onCheckedChange = { checked = it }) {
    Icon(
        if (checked) Icons.Filled.Edit else Icons.Outlined.Edit,
        contentDescription = "Localized description",
        modifier = Modifier.size(ButtonDefaults.IconSize),
    )
    Spacer(Modifier.size(ButtonDefaults.IconSpacing))
    Text("Edit")
}

For a ToggleButton that uses a round unchecked shape and morphs into a square checked shape:

ToggleButton uses the small button design as default. For a ToggleButton that uses the design for extra small, medium, large, or extra large buttons:

import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material.icons.outlined.Edit
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.material3.ToggleButton
import androidx.compose.material3.ToggleButtonDefaults
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier

var checked by remember { mutableStateOf(false) }
val size = ButtonDefaults.ExtraSmallContainerHeight
ToggleButton(
    checked = checked,
    onCheckedChange = { checked = it },
    modifier = Modifier.heightIn(size),
    shapes = ToggleButtonDefaults.shapesFor(size),
    contentPadding = ButtonDefaults.contentPaddingFor(size),
) {
    Icon(
        if (checked) Icons.Filled.Edit else Icons.Outlined.Edit,
        contentDescription = "Localized description",
        modifier = Modifier.size(ButtonDefaults.iconSizeFor(size)),
    )
    Spacer(Modifier.size(ButtonDefaults.iconSpacingFor(size)))
    Text("Label")
}
 
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material.icons.outlined.Edit
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.material3.ToggleButton
import androidx.compose.material3.ToggleButtonDefaults
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier

var checked by remember { mutableStateOf(false) }
val size = ButtonDefaults.MediumContainerHeight
ToggleButton(
    checked = checked,
    onCheckedChange = { checked = it },
    modifier = Modifier.heightIn(size),
    shapes = ToggleButtonDefaults.shapesFor(size),
    contentPadding = ButtonDefaults.contentPaddingFor(size),
) {
    Icon(
        if (checked) Icons.Filled.Edit else Icons.Outlined.Edit,
        contentDescription = "Localized description",
        modifier = Modifier.size(ButtonDefaults.iconSizeFor(size)),
    )
    Spacer(Modifier.size(ButtonDefaults.iconSpacingFor(size)))
    Text("Label", style = ButtonDefaults.textStyleFor(size))
}
 
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material.icons.outlined.Edit
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.material3.ToggleButton
import androidx.compose.material3.ToggleButtonDefaults
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier

var checked by remember { mutableStateOf(false) }
val size = ButtonDefaults.LargeContainerHeight
ToggleButton(
    checked = checked,
    onCheckedChange = { checked = it },
    modifier = Modifier.heightIn(size),
    shapes = ToggleButtonDefaults.shapesFor(size),
    contentPadding = ButtonDefaults.contentPaddingFor(size),
) {
    Icon(
        if (checked) Icons.Filled.Edit else Icons.Outlined.Edit,
        contentDescription = "Localized description",
        modifier = Modifier.size(ButtonDefaults.iconSizeFor(size)),
    )
    Spacer(Modifier.size(ButtonDefaults.iconSpacingFor(size)))
    Text("Label", style = ButtonDefaults.textStyleFor(size))
}
 
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material.icons.outlined.Edit
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.material3.ToggleButton
import androidx.compose.material3.ToggleButtonDefaults
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier

var checked by remember { mutableStateOf(false) }
val size = ButtonDefaults.ExtraLargeContainerHeight
ToggleButton(
    checked = checked,
    onCheckedChange = { checked = it },
    modifier = Modifier.heightIn(size),
    shapes = ToggleButtonDefaults.shapesFor(size),
    contentPadding = ButtonDefaults.contentPaddingFor(size),
) {
    Icon(
        if (checked) Icons.Filled.Edit else Icons.Outlined.Edit,
        contentDescription = "Localized description",
        modifier = Modifier.size(ButtonDefaults.iconSizeFor(size)),
    )
    Spacer(Modifier.size(ButtonDefaults.iconSpacingFor(size)))
    Text("Label", style = ButtonDefaults.textStyleFor(size))
}
 
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Text
import androidx.compose.material3.ToggleButton
import androidx.compose.material3.ToggleButtonDefaults
import androidx.compose.material3.ToggleButtonShapes
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

var checked by remember { mutableStateOf(false) }
val shapes =
    ToggleButtonShapes(
        shape = ToggleButtonDefaults.squareShape,
        pressedShape = ToggleButtonDefaults.pressedShape,
        checkedShape = ToggleButtonDefaults.roundShape,
    )
ToggleButton(checked = checked, onCheckedChange = { checked = it }, shapes = shapes) {
    Text("Button")
}
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.
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.
shapes: ToggleButtonShapes = ToggleButtonDefaults.shapesFor(ButtonDefaults.MinHeight)

the ToggleButtonShapes that the toggle button will morph between depending on the user's interaction with the toggle button.
colors: ToggleButtonColors = ToggleButtonDefaults.toggleButtonColors()

ToggleButtonColors that will be used to resolve the colors used for this toggle button in different states. See ToggleButtonDefaults.toggleButtonColors.
elevation: ButtonElevation? = ButtonDefaults.buttonElevation()

ButtonElevation used to resolve the elevation for this button in different states. This controls the size of the shadow below the button. See ButtonElevation.shadowElevation. Additionally, when the container color is ColorScheme.surface, this controls the amount of primary color applied as an overlay.
border: BorderStroke? = null

the border to draw around the container of this toggle button.
contentPadding: PaddingValues = ButtonDefaults.contentPaddingFor(ButtonDefaults.MinHeight)

the spacing values to apply internally between the container and the content
interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions 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.