ToggleButton

Functions summary

Unit
@Composable
ToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier,
    enabled: Boolean,
    buttonSize: ButtonSize,
    leadingIcon: (@Composable () -> Unit)?,
    trailingIcon: (@Composable () -> Unit)?,
    shape: Shape,
    colors: ToggleButtonColors,
    border: BorderStroke?,
    contentPadding: PaddingValues,
    interactionSource: MutableInteractionSource?,
    content: @Composable RowScope.() -> Unit
)

A Jetpack Compose Glimmer toggle button that changes its appearance depending on the checked value, used for exposing actions to a user.

Functions

ToggleButton

@Composable
fun ToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    buttonSize: ButtonSize = ButtonSize.Medium,
    leadingIcon: (@Composable () -> Unit)? = null,
    trailingIcon: (@Composable () -> Unit)? = null,
    shape: Shape = ToggleButtonDefaults.animateShape(checked),
    colors: ToggleButtonColors = ToggleButtonDefaults.colors(),
    border: BorderStroke? = SurfaceDefaults.border(),
    contentPadding: PaddingValues = ToggleButtonDefaults.contentPadding(buttonSize),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable RowScope.() -> Unit
): Unit

A Jetpack Compose Glimmer toggle button that changes its appearance depending on the checked value, used for exposing actions to a user. By default, the button transitions its shape and color between states. Unlike IconToggleButton, its primary content is text.

import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.xr.glimmer.Text
import androidx.xr.glimmer.ToggleButton

var checked by remember { mutableStateOf(false) }
val text = if (checked) "Toggle on" else "Toggle off"
ToggleButton(checked = checked, onCheckedChange = { checked = it }) { Text(text) }

A ToggleButton can have optional leadingIcon and trailingIcon slots, which are used to provide more context about the action. It is also recommended to vary the icons to visually indicate the checked state.

import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.xr.glimmer.Icon
import androidx.xr.glimmer.Text
import androidx.xr.glimmer.ToggleButton

var checked by remember { mutableStateOf(false) }
val text = if (checked) "Toggle on" else "Toggle off"
ToggleButton(
    checked = checked,
    leadingIcon = {
        Icon(if (checked) FavoriteIcon else OutlinedFavoriteIcon, "Localized description")
    },
    onCheckedChange = { checked = it },
) {
    Text(text)
}
 
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.xr.glimmer.Icon
import androidx.xr.glimmer.Text
import androidx.xr.glimmer.ToggleButton

var checked by remember { mutableStateOf(false) }
val text = if (checked) "Toggle on" else "Toggle off"
ToggleButton(
    checked = checked,
    trailingIcon = {
        Icon(if (checked) FavoriteIcon else OutlinedFavoriteIcon, "Localized description")
    },
    onCheckedChange = { checked = it },
) {
    Text(text)
}

There are multiple button size variants. Providing a different ButtonSize will affect the default values used inside this button, such as the minimum height. 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.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.xr.glimmer.ButtonSize
import androidx.xr.glimmer.Text
import androidx.xr.glimmer.ToggleButton

var checked by remember { mutableStateOf(false) }
val text = if (checked) "Toggle on" else "Toggle off"
ToggleButton(
    checked = checked,
    buttonSize = ButtonSize.Large,
    onCheckedChange = { checked = it },
) {
    Text(text)
}
Parameters
checked: Boolean

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

A callback to be invoked when this toggle button is clicked, receiving the inverted checked value.
modifier: Modifier = Modifier

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

controls the enabled state of this button. When false, this button will not respond to user input.
buttonSize: ButtonSize = ButtonSize.Medium

the size variant of this button, represented as a ButtonSize. Changing buttonSize will affect some default values used by this button, but the final resulting size of the button will still be calculated based on the content of the button and any provided size modifiers such as androidx.compose.foundation.layout.size. For example, setting a 100.dp size using a size modifier will result in the same layout size regardless of buttonSize, but the provided buttonSize will affect other properties such as padding values and the size of icons.
leadingIcon: (@Composable () -> Unit)? = null

an optional leading icon to be placed before the content. This is typically an Icon.
trailingIcon: (@Composable () -> Unit)? = null

an optional trailing icon to be placed after the content. This is typically an Icon.
shape: Shape = ToggleButtonDefaults.animateShape(checked)

the Shape of this toggle button. It is recommended to change the shape depending on the checked state. ToggleButtonDefaults provides both animated and non-animated versions, see ToggleButtonDefaults.animateShape and ToggleButtonDefaults.shape for more details.
colors: ToggleButtonColors = ToggleButtonDefaults.colors()

the ToggleButtonColors that will be used to resolve the container and content colors based on the toggle button state.
border: BorderStroke? = SurfaceDefaults.border()

the border to draw around this button.
contentPadding: PaddingValues = ToggleButtonDefaults.contentPadding(buttonSize)

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 button. You can use this to change the button's appearance or preview the button in different states. Note that if null is provided, interactions will still happen internally.
content: @Composable RowScope.() -> Unit

the main content, typically Text, to display inside this button.