OutlinedToggleButton

Functions summary

Unit

@Composable
OutlinedToggleButton(
    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

OutlinedToggleButton

Cmn

Artifact: androidx.compose.material3:material3

View Source

@Composable
fun OutlinedToggleButton(
    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 = OutlinedToggleButtonDefaults.colors(),
    elevation: ToggleButtonElevation? = null,
    border: BorderStroke? = OutlinedToggleButtonDefaults.border(enabled, checked),
    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.
`enabled: Boolean = true`	controls the enabled state of this toggle button.
`icon: (@Composable () -> Unit)? = null`	optional icon to be placed before the `content`.
`shapes: ToggleButtonShapes = ToggleButtonDefaults.shapesFor(buttonSize)`	the `ToggleButtonShapes` used for this toggle button.
`colors: ToggleButtonColors = OutlinedToggleButtonDefaults.colors()`	`ToggleButtonColors` used for this toggle button. See `OutlinedToggleButtonDefaults.colors`.
`elevation: ToggleButtonElevation? = null`	`ToggleButtonElevation` used for this button.
`border: BorderStroke? = OutlinedToggleButtonDefaults.border(enabled, checked)`	the border to draw around the container. See `OutlinedToggleButtonDefaults.border`.
`contentPadding: PaddingValues = ToggleButtonDefaults.contentPaddingFor(buttonSize, hasStartIcon = icon != null)`	the spacing values to apply internally.
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource`.
`content: @Composable RowScope.() -> Unit`	The content displayed on the toggle button.