FilledIconToggleButton

Composable Component

Icon buttons help people take supplementary actions with a single tap. They’re used when a compact button is required, such as in a toolbar or image list.

Common

@Composable
fun FilledIconToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = IconButtonDefaults.filledShape,
    colors: IconToggleButtonColors = IconButtonDefaults.filledIconToggleButtonColors(),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit,
) =
    SurfaceIconToggleButton(
        checked = checked,
        onCheckedChange = onCheckedChange,
        modifier = modifier.semantics { role = Role.Checkbox },
        enabled = enabled,
        shape = shape,
        colors = colors,
        border = null,
        interactionSource = interactionSource,
        content = content,
    )

Parameters


checked	whether this icon button is toggled on or off
onCheckedChange	called when this icon button is clicked
modifier	the `Modifier` to be applied to this icon button
enabled	controls the enabled state of this icon button. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.
shape	defines the shape of this icon button's container
colors	`IconToggleButtonColors` that will be used to resolve the colors used for this icon button in different states. See `IconButtonDefaults.filledIconToggleButtonColors`.
interactionSource	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this icon button. You can use this to change the icon button's appearance or preview the icon button in different states. Note that if `null` is provided, interactions will still happen internally.
content	the content of this icon button, typically an `Icon`

Common

@ExperimentalMaterial3ExpressiveApi
@Composable
fun FilledIconToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    shapes: IconToggleButtonShapes,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: IconToggleButtonColors = IconButtonDefaults.filledIconToggleButtonColors(),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit,
) =
    SurfaceIconToggleButton(
        checked = checked,
        onCheckedChange = onCheckedChange,
        modifier = modifier.semantics { role = Role.Checkbox },
        enabled = enabled,
        shapes = shapes,
        colors = colors,
        border = null,
        interactionSource = interactionSource,
        content = content,
    )

Parameters


checked	whether this icon button is toggled on or off
onCheckedChange	called when this icon button is clicked
shapes	the `IconButtonShapes` that the icon button will morph between depending on the user's interaction with the icon button.
modifier	the `Modifier` to be applied to this icon button
enabled	controls the enabled state of this icon button. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.
colors	`IconToggleButtonColors` that will be used to resolve the colors used for this icon button in different states. See `IconButtonDefaults.filledIconToggleButtonColors`.
interactionSource	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this icon button. You can use this to change the icon button's appearance or preview the icon button in different states. Note that if `null` is provided, interactions will still happen internally.
content	the content of this icon button, typically an `Icon`

Code Examples

FilledIconToggleButtonSample

@Preview
@Composable
fun FilledIconToggleButtonSample() {
    var checked by remember { mutableStateOf(false) }
    FilledIconToggleButton(checked = checked, onCheckedChange = { checked = it }) {
        if (checked) {
            Icon(Icons.Filled.Lock, contentDescription = "Localized description")
        } else {
            Icon(Icons.Outlined.Lock, contentDescription = "Localized description")
        }
    }
}

FilledIconToggleButtonWithAnimatedShapeSample

@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Preview
@Composable
fun FilledIconToggleButtonWithAnimatedShapeSample() {
    var checked by remember { mutableStateOf(false) }
    FilledIconToggleButton(
        checked = checked,
        onCheckedChange = { checked = it },
        shapes = IconButtonDefaults.toggleableShapes(),
    ) {
        if (checked) {
            Icon(Icons.Filled.Lock, contentDescription = "Localized description")
        } else {
            Icon(Icons.Outlined.Lock, contentDescription = "Localized description")
        }
    }
}