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 = OutlinedToggleButtonDefaults.size,
    enabled: Boolean = true,
    icon: (@Composable () -> Unit)? = null,
    shapes: ToggleButtonShapes = OutlinedToggleButtonDefaults.shapesFor(buttonSize),
    colors: ToggleButtonColors = OutlinedToggleButtonDefaults.colors(),
    elevation: ToggleButtonElevation? = null,
    border: BorderStroke? = OutlinedToggleButtonDefaults.border(enabled, checked),
    contentPadding: PaddingValues = OutlinedToggleButtonDefaults.contentPaddingFor(buttonSize, hasStartIcon = icon != null),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable RowScope.() -> Unit
): Unit

Material Design toggle button

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

Outlined toggle button
image

Outlined toggle buttons are medium-emphasis buttons. They contain actions that are important, but are not the primary action in an app. Outlined buttons pair well with ToggleButtons to indicate an alternative, secondary action.

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.

import androidx.compose.material3.OutlinedToggleButton
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) }
OutlinedToggleButton(checked = checked, onCheckedChange = { checked = it }) {
    Text("Outlined 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.
`buttonSize: ToggleButtonSize = OutlinedToggleButtonDefaults.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 = OutlinedToggleButtonDefaults.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 = OutlinedToggleButtonDefaults.contentPaddingFor(buttonSize, hasStartIcon = icon != null)`	the spacing values to apply internally.
`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.

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