FilledTonalToggleButton

Common/AllAndroid/JVM

Functions summary

Unit

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

FilledTonalToggleButton

Cmn

Artifact: androidx.compose.material3:material3

View Source

@Composable
fun FilledTonalToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    buttonSize: ToggleButtonSize = FilledTonalToggleButtonDefaults.size,
    enabled: Boolean = true,
    icon: (@Composable () -> Unit)? = null,
    shapes: ToggleButtonShapes = FilledTonalToggleButtonDefaults.shapesFor(buttonSize),
    colors: ToggleButtonColors = FilledTonalToggleButtonDefaults.colors(),
    elevation: ToggleButtonElevation? = FilledTonalToggleButtonDefaults.elevation(),
    border: BorderStroke? = null,
    contentPadding: PaddingValues = FilledTonalToggleButtonDefaults.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.

Filled tonal toggle buttons are medium-emphasis buttons that are an alternative middle ground between default ToggleButtons (filled) and OutlinedToggleButtons. They can be used in contexts where a lower-priority button requires slightly more emphasis than an outline would give. Tonal toggle buttons use the secondary color mapping.

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.FilledTonalToggleButton
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) }
FilledTonalToggleButton(checked = checked, onCheckedChange = { checked = it }) {
    Text("Tonal 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 = FilledTonalToggleButtonDefaults.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 = FilledTonalToggleButtonDefaults.shapesFor(buttonSize)	the ToggleButtonShapes used for this toggle button.
colors: ToggleButtonColors = FilledTonalToggleButtonDefaults.colors()	ToggleButtonColors used for this toggle button. See FilledTonalToggleButtonDefaults.colors.
elevation: ToggleButtonElevation? = FilledTonalToggleButtonDefaults.elevation()	ToggleButtonElevation used for this button. See FilledTonalToggleButtonDefaults.elevation.
border: BorderStroke? = null	the border to draw around the container.
contentPadding: PaddingValues = FilledTonalToggleButtonDefaults.contentPaddingFor(buttonSize, hasStartIcon = icon != null)	the spacing values to apply internally.
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.

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