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