IconToggleButton examples in XR Glimmer

A Jetpack Compose Glimmer icon toggle button that changes its appearance depending on the checked value, and offers a single slot for an icon or image.

IconToggleButtonSample

@Sampled
@Composable
fun IconToggleButtonSample() {
    var checked by remember { mutableStateOf(false) }
    IconToggleButton(checked = checked, onCheckedChange = { checked = it }) {
        Icon(
            imageVector = if (checked) FavoriteIcon else OutlinedFavoriteIcon,
            contentDescription = "Localized description",
        )
    }
}

CustomColorsIconToggleButtonSample

@Sampled
@Composable
fun CustomColorsIconToggleButtonSample() {
    var checked by remember { mutableStateOf(false) }
    val focusedBackgroundColor =
        IconToggleButtonDefaults.focusedBackgroundColor(baseColor = Color(0xFFE3FF6F))
    val checkedBackgroundColor =
        IconToggleButtonDefaults.checkedBackgroundColor(baseColor = Color(0xFF34E0A1))
    IconToggleButton(
        checked = checked,
        onCheckedChange = { checked = it },
        colors =
            IconToggleButtonDefaults.colors(
                focusedBackgroundColor = focusedBackgroundColor,
                checkedBackgroundColor = checkedBackgroundColor,
            ),
    ) {
        Icon(
            imageVector = if (checked) FavoriteIcon else OutlinedFavoriteIcon,
            contentDescription = "Localized description",
        )
    }
}