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

Content updated: