Wrong ripple in material3 NavigationBar in Jetpack Composee

Issue

When I use Material3 NavigationBar in Jetpack Compose I get wrong rectangular ripple effect like this:

Material3 library version: 1.0.0-alpha06 Code:

NavigationBar(modifier = Modifier.navigationBarsPadding()) {
                NavigationBarItem(
                    selected = ...,
                    onClick = {
                        navController.navigate(ScreenComponents(context).mainScreen) {
                            launchSingleTop = true
                        }
                    },
                    icon = {
                        ...
                    },
                    alwaysShowLabel = false,
                    label = {
                        Text(text = ..., color = MaterialTheme.colorScheme.onSurface)
                    }
                )
                // ...

Solution

It is not a bug. It follows the material guidelines.

Answered By - Gabriele Mariotti