IconToggleButton

Composable Component

Wear Material IconToggleButton is a filled icon toggle button which switches between primary colors and tonal colors depending on checked value, and offers a single slot for icon or image.

Android
@Composable
public fun IconToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: IconToggleButtonColors = IconToggleButtonDefaults.colors(),
    interactionSource: MutableInteractionSource? = null,
    shapes: IconToggleButtonShapes = IconToggleButtonDefaults.shapes(),
    border: BorderStroke? = null,
    content: @Composable BoxScope.() -> Unit,
)

Parameters
checked Boolean flag indicating whether this toggle button is currently checked.
onCheckedChange Callback to be invoked when this toggle button is clicked.
modifier Modifier to be applied to the toggle button.
enabled Controls the enabled state of the toggle button. When false, this toggle button will not be clickable.
colors IconToggleButtonColors that will be used to resolve the container and content color for this toggle button.
interactionSource an optional hoisted MutableInteractionSource for observing and emitting Interactions for this button. You can use this to change the button's appearance or preview the button in different states. Note that if null is provided, interactions will still happen internally.
shapes Defines the shape for this toggle button. Defaults to a static shape based on IconToggleButtonDefaults.shape, but animated versions are available through IconToggleButtonDefaults.animatedShapes and IconToggleButtonDefaults.variantAnimatedShapes.
border Optional BorderStroke for the IconToggleButton.
content The content to be drawn inside the toggle button.

Code Examples

IconToggleButtonSample

@Composable
fun IconToggleButtonSample() {
    var firstChecked by remember { mutableStateOf(true) }
    var secondChecked by remember { mutableStateOf(false) }
    Row(
        modifier = Modifier.fillMaxSize(),
        horizontalArrangement = Arrangement.Center,
        verticalAlignment = Alignment.CenterVertically,
    ) {
        IconToggleButton(
            checked = firstChecked,
            onCheckedChange = { firstChecked = !firstChecked },
            shapes = IconToggleButtonDefaults.animatedShapes(),
        ) {
            if (firstChecked) {
                WifiOnIcon()
            } else {
                WifiOffIcon()
            }
        }
        Spacer(modifier = Modifier.width(5.dp))
        IconToggleButton(
            checked = secondChecked,
            onCheckedChange = { secondChecked = !secondChecked },
            shapes = IconToggleButtonDefaults.animatedShapes(),
        ) {
            if (secondChecked) {
                WifiOnIcon()
            } else {
                WifiOffIcon()
            }
        }
    }
}

IconToggleButtonVariantSample

@Composable
fun IconToggleButtonVariantSample() {
    var firstChecked by remember { mutableStateOf(true) }
    var secondChecked by remember { mutableStateOf(false) }
    Row(
        modifier = Modifier.fillMaxSize(),
        horizontalArrangement = Arrangement.Center,
        verticalAlignment = Alignment.CenterVertically,
    ) {
        IconToggleButton(
            checked = firstChecked,
            onCheckedChange = { firstChecked = !firstChecked },
            shapes = IconToggleButtonDefaults.variantAnimatedShapes(),
        ) {
            if (firstChecked) {
                WifiOnIcon()
            } else {
                WifiOffIcon()
            }
        }
        Spacer(modifier = Modifier.width(5.dp))
        IconToggleButton(
            checked = secondChecked,
            onCheckedChange = { secondChecked = !secondChecked },
            shapes = IconToggleButtonDefaults.variantAnimatedShapes(),
        ) {
            if (secondChecked) {
                WifiOnIcon()
            } else {
                WifiOffIcon()
            }
        }
    }
}