is it possible to have unbounded ripple for a square shape? I've tried adding following, but it makes ripple round. I want a rectangular ripple.

Modifier.toggleable(
    interactionSource = remember { MutableInteractionSource() },
    indication = rememberRipple(bounded = false, radius = 48.dp),
    // ...
)

If you make your ripple unbounded then it will just start from the center of your clickable component, and “run out” of its bounds. The ripple animation is inherently round with a radius of 48.dp in your case. You would need to provide your own custom Ripple implementation to make it animate not a round shape but a square one. If you set your Composable to render with a Square shape AND you set the ripple to be bounded, then you should see a Ripple that is running from the point the user touched the component and only runs to the square bounds of your component.

I'm scratching my head, how to make it square + unbounded. I would like to avoid having padding inside my component, so I can do better alignment between components. Will look at custom ripple, thanks.