Toggle buttons in Jetpack Compose Glimmer

Applicable XR devices
This guidance helps you build experiences for these types of XR devices.
Learn about XR device types →
Display Glasses
Learn about XR device types →

In Jetpack Compose Glimmer, a ToggleButton is an interactive component that changes its appearance based on a checked state. Toggle buttons are optimized for display glasses to provide clear visual transitions in shape and color. These transitions indicate when an action or setting is active.

Use toggle buttons to expose actions that can be switched on or off. Unlike icon-only toggles, a toggle button primarily displays text content, though it supports optional icon slots for additional context.

For other use cases, there are also standard buttons and icon buttons.

Figure 1. An example of a toggle button in Jetpack Compose Glimmer used for the play and pause actions in a UI layout.

Anatomy

A toggle button consists of a container that morphs between states and a label with optional icons.

Part Description

Container

Animates between a circular shape (unchecked) and a rounded rectangle (checked).

Label

Typically a Text composable.

Icons (optional)

Leading or trailing slots that can vary based on state.

Sizes

Like standard buttons, toggle buttons support two size variants:

Size Minimum height Default usage

Medium

48.dp

Default interactive size.

Large

72.dp

Primary or high-emphasis toggles.

Toggle button defaults

By default, toggle buttons use ToggleButtonDefaults.animateShape. This creates a smooth transition between the following states:

The ToggleButtonColors class manages color resolution for the following states:

Animation

Toggle buttons use the following defaults for animation:

  • animateShape: Provides a Shape that interpolates corner sizes using a spring animation spec (stiffness = 600f).
  • colors: A factory function to customize the background and content colors for both states.
  • CheckedShape: A static RoundedCornerShape(20.dp) used for the checked state.
  • contentPadding: Inherits from ButtonDefaults.contentPadding.

Example: Toggle button

The following code creates a basic toggle button:

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

Example: Toggle button with leading icon

The following code creates a toggle button with a leading icon:

@Composable
fun ToggleButtonWithLeadingIconSample() {
    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)
    }
}