IconToggleButton

Composable Component

An IconButton with two states, for icons that can be toggled 'on' and 'off', such as a bookmark icon, or a navigation icon that opens a drawer.

Common

@Composable
fun IconToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit,
)

Parameters


checked	whether this IconToggleButton is currently checked
onCheckedChange	callback to be invoked when this icon is selected
modifier	optional `Modifier` for this IconToggleButton
enabled	enabled whether or not this `IconToggleButton` will handle input events and appear enabled for semantics purposes
interactionSource	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this IconButton. You can use this to change the IconButton's appearance or preview the IconButton in different states. Note that if `null` is provided, interactions will still happen internally.
content	the content (icon) to be drawn inside the IconToggleButton. This is typically an `Icon`.

Code Examples

IconToggleButtonSample

@Composable
fun IconToggleButtonSample() {
    var checked by remember { mutableStateOf(false) }
    IconToggleButton(checked = checked, onCheckedChange = { checked = it }) {
        val tint by animateColorAsState(if (checked) Color(0xFFEC407A) else Color(0xFFB0BEC5))
        Icon(Icons.Filled.Favorite, contentDescription = "Localized description", tint = tint)
    }
}