IconToggleButton

IconToggleButtonSample

@OptIn(ExperimentalMaterial3Api::class)
@Preview
@Composable
fun IconToggleButtonSample() {
    var checked by remember { mutableStateOf(false) }
    val description = "Localized description"
    // Icon button should have a tooltip associated with it for a11y.
    TooltipBox(
        positionProvider =
            TooltipDefaults.rememberTooltipPositionProvider(TooltipAnchorPosition.Above),
        tooltip = { PlainTooltip { Text(description) } },
        state = rememberTooltipState(),
    ) {
        IconToggleButton(checked = checked, onCheckedChange = { checked = it }) {
            if (checked) {
                Icon(Icons.Filled.Lock, contentDescription = description)
            } else {
                Icon(Icons.Outlined.Lock, contentDescription = description)
            }
        }
    }
}

IconToggleButtonWithAnimatedShapeSample

@OptIn(ExperimentalMaterial3ExpressiveApi::class, ExperimentalMaterial3Api::class)
@Preview
@Composable
fun IconToggleButtonWithAnimatedShapeSample() {
    var checked by remember { mutableStateOf(false) }
    val description = "Localized description"
    // Icon button should have a tooltip associated with it for a11y.
    TooltipBox(
        positionProvider =
            TooltipDefaults.rememberTooltipPositionProvider(TooltipAnchorPosition.Above),
        tooltip = { PlainTooltip { Text(description) } },
        state = rememberTooltipState(),
    ) {
        IconToggleButton(
            checked = checked,
            onCheckedChange = { checked = it },
            shapes = IconButtonDefaults.toggleableShapes(),
        ) {
            if (checked) {
                Icon(Icons.Filled.Lock, contentDescription = description)
            } else {
                Icon(Icons.Outlined.Lock, contentDescription = description)
            }
        }
    }
}