IconToggleButton

Functions summary

Unit
@Composable
IconToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier,
    shape: Shape,
    colors: IconToggleButtonColors,
    border: BorderStroke?,
    enabled: Boolean,
    contentPadding: PaddingValues,
    interactionSource: MutableInteractionSource?,
    content: @Composable () -> Unit
)

A Jetpack Compose Glimmer icon toggle button that changes its appearance depending on the checked value, and offers a single slot for an icon or image.

Functions

IconToggleButton

@Composable
fun IconToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    shape: Shape = IconToggleButtonDefaults.animateShape(checked),
    colors: IconToggleButtonColors = IconToggleButtonDefaults.colors(),
    border: BorderStroke? = SurfaceDefaults.border(),
    enabled: Boolean = true,
    contentPadding: PaddingValues = IconToggleButtonDefaults.contentPadding,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit
): Unit

A Jetpack Compose Glimmer icon toggle button that changes its appearance depending on the checked value, and offers a single slot for an icon or image. By default, the button transitions its shape and color between states. It is also recommended to vary the content to visually indicate the checked state.

Icon toggle buttons are used when a compact button is required.

The content should typically be an Icon. If using a custom icon, note that the typical size for the internal icon is 32 x 32 dp. The container has an overall minimum size of 48 x 48 dp.

import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.xr.glimmer.Icon
import androidx.xr.glimmer.IconToggleButton

var checked by remember { mutableStateOf(false) }
IconToggleButton(checked = checked, onCheckedChange = { checked = it }) {
    Icon(
        imageVector = if (checked) FavoriteIcon else OutlinedFavoriteIcon,
        contentDescription = "Localized description",
    )
}
Parameters
checked: Boolean

a boolean flag indicating whether this icon toggle button is currently checked.
onCheckedChange: (Boolean) -> Unit

a callback to be invoked when this button is clicked, receiving the inverted checked value.
modifier: Modifier = Modifier

the Modifier to be applied to this icon toggle button.
shape: Shape = IconToggleButtonDefaults.animateShape(checked)

the Shape of this icon toggle button. It is recommended to change the shape depending on the checked state. IconToggleButtonDefaults provides both animated and non-animated versions, see IconToggleButtonDefaults.animateShape and IconToggleButtonDefaults.shape for more details.
colors: IconToggleButtonColors = IconToggleButtonDefaults.colors()

the IconToggleButtonColors providing color variants for all icon toggle button states.
border: BorderStroke? = SurfaceDefaults.border()

the border to draw around this icon toggle button.
enabled: Boolean = true

controls the enabled state of this icon toggle button. When false, this button will not respond to user input.
contentPadding: PaddingValues = IconToggleButtonDefaults.contentPadding

the spacing values to apply internally between the container and the content.
interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions for this button. You can use this to change the icon toggle button's appearance or preview it in different states. Note that if null is provided, interactions will still happen internally.
content: @Composable () -> Unit

the content of this icon toggle button, typically an Icon.