ToggleButton

Functions summary

Unit
@Composable
ToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier,
    enabled: Boolean,
    colors: ToggleButtonColors,
    interactionSource: MutableInteractionSource?,
    shape: Shape,
    role: Role,
    content: @Composable BoxScope.() -> Unit
)

Wear Material ToggleButton that offers a single slot to take any content (text, icon or image).

Functions

ToggleButton

@Composable
fun ToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: ToggleButtonColors = ToggleButtonDefaults.toggleButtonColors(),
    interactionSource: MutableInteractionSource? = null,
    shape: Shape = CircleShape,
    role: Role = ToggleButtonDefaults.DefaultRole,
    content: @Composable BoxScope.() -> Unit
): Unit

Wear Material ToggleButton that offers a single slot to take any content (text, icon or image).

The ToggleButton defaults to size ToggleButtonDefaults.DefaultToggleButtonSize or ToggleButtonDefaults.SmallToggleButtonSize. Icon content should be of size ToggleButtonDefaults.DefaultIconSize or ToggleButtonDefaults.SmallIconSize respectively.

The recommended set of checked and unchecked ToggleButtonColors can be obtained from ToggleButtonDefaults.toggleButtonColors, which defaults to checked colors being a solid background of Colors.primary with content color of Colors.onPrimary and unchecked colors being a solid background of Colors.surface with content color of Colors.onSurface.

ToggleButtons can be enabled or disabled. A disabled toggle button will not respond to click events.

Example of a ToggleButton with an icon:

import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.wear.compose.material.Icon
import androidx.wear.compose.material.ToggleButton
import androidx.wear.compose.material.ToggleButtonDefaults

var checked by remember { mutableStateOf(true) }
ToggleButton(checked = checked, onCheckedChange = { checked = it }, enabled = true) {
    Icon(
        painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
        contentDescription = "airplane",
        modifier =
            Modifier.size(ToggleButtonDefaults.DefaultIconSize)
                .wrapContentSize(align = Alignment.Center),
    )
}

For more information, see the Buttons guide.

Parameters
checked: Boolean

Boolean flag indicating whether this toggle button is currently checked.
onCheckedChange: (Boolean) -> Unit

Callback to be invoked when this toggle button is clicked.
modifier: Modifier = Modifier

Modifier to be applied to the toggle button.
enabled: Boolean = true

Controls the enabled state of the toggle button. When false, this toggle button will not be clickable.
colors: ToggleButtonColors = ToggleButtonDefaults.toggleButtonColors()

ToggleButtonColors that will be used to resolve the background and content color for this toggle button. See ToggleButtonDefaults.toggleButtonColors.
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.
shape: Shape = CircleShape

Defines the shape for this toggle button. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme.
role: Role = ToggleButtonDefaults.DefaultRole

Role semantics that accessibility services can use to provide more context to users.
content: @Composable BoxScope.() -> Unit

The icon, image or text to be drawn inside the toggle button.