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

Create your own Component Library

Material Components are meant to be used as is and they do not allow customizations. To build your own Jetpack Compose component library use Compose Unstyled