New Compose Multiplatform components arrived on Composables UICheck it out →

← Component in Material Compose

IconToggleButton

Common

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.

Last updated:

Installation

dependencies {
   implementation("androidx.compose.material:material:1.7.0-beta04")
}

Overloads

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

Parameters

namedescription
checkedwhether this IconToggleButton is currently checked
onCheckedChangecallback to be invoked when this icon is selected
modifieroptional [Modifier] for this IconToggleButton
enabledenabled whether or not this [IconToggleButton] will handle input events and appear enabled for semantics purposes
interactionSourcean 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.
contentthe content (icon) to be drawn inside the IconToggleButton. This is typically an [Icon].

Code Example

IconToggleButtonSample

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