ToggleButton in Jetpack Compose

person_addFollowFollowingnotificationsAlerts

Tap: checked buttons turn square and filled

ToggleButton, FilledTonalToggleButton, ElevatedToggleButton and OutlinedToggleButton (new in 1.5.0, stable in beta02) hold an on/off state. When checked they change color and shape: round when off, squarer when on.

@Composable
fun FollowButton() {
    var following by rememberSaveable { mutableStateOf(false) }
    // Checked state changes both color and shape (round when off, square when on).
    ToggleButton(checked = following, onCheckedChange = { following = it }) {
        Text(if (following) "Following" else "Follow")
    }
}

When to use

• A state that sticks: follow, favorite, bold, mute.
• Use a connected button group to choose one option from several.
• Use a Switch for a setting that takes effect immediately in a list.

Accessibility

ToggleButton already reports its checked state. Make the label say what it does (“Follow” / “Following”), not “On” / “Off”.

Related: button groups · icon buttons

Want your agent to get this right every time? Install the skill. If this page helped,star the repo on GitHub.