How to disable ripple effect IconButton when clicking in Jetpack Compose

Question

by default it enables ripple effect for it. How to disable this behavior?

IconButton(onClick = {}) {
}

Example code.

Answer 1

IconButton is nothing other than Box with Modifier.clickable with ripple with 24.dp and 48.dp min size.

You can set copy source code and set indication null as

@Composable
fun IconButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable () -> Unit
) {
    Box(
        modifier = modifier
            .minimumInteractiveComponentSize()
            .clickable(
                onClick = onClick,
                enabled = enabled,
                role = Role.Button,
                interactionSource = interactionSource,
                //  Set this to null to remove ripple on touch
                indication = rememberRipple(bounded = false, radius = RippleRadius)
            ),
        contentAlignment = Alignment.Center
    ) {
        val contentAlpha = if (enabled) LocalContentAlpha.current else ContentAlpha.disabled
        CompositionLocalProvider(LocalContentAlpha provides contentAlpha, content = content)
    }
}

// Default radius of an unbounded ripple in an IconButton
private val RippleRadius = 24.dp

Or you can use a Box with Modifier.clickable if you don't need other params