Compose Component

ToggleButton

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

ToggleButtonSample

@Sampled
@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) }
}

ToggleButtonWithLeadingIconSample

@Sampled
@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)
    }
}

ToggleButtonWithTrailingIconSample

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

LargeToggleButtonSample

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

CustomColorsToggleButtonSample

@Sampled
@Composable
fun CustomColorsToggleButtonSample() {
    var checked by remember { mutableStateOf(false) }
    val text = if (checked) "Toggle on" else "Toggle off"
    val focusedBackgroundColor =
        ToggleButtonDefaults.focusedBackgroundColor(baseColor = Color(0xFFE3FF6F))
    val checkedBackgroundColor =
        ToggleButtonDefaults.checkedBackgroundColor(baseColor = Color(0xFF34E0A1))
    ToggleButton(
        checked = checked,
        onCheckedChange = { checked = it },
        colors =
            ToggleButtonDefaults.colors(
                focusedBackgroundColor = focusedBackgroundColor,
                checkedBackgroundColor = checkedBackgroundColor,
            ),
    ) {
        Text(text)
    }
}
Jetpack Compose beyond MaterialFree components, screens and templates for apps that don’t look like Google’s. Copy them into your app, or let your coding agent add them.Browse for free

Content updated: