Hello guys. I am trying to add badge on top of tab. Any idea how to achieve it with material3 Tab?

Try the

Badge

component https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#Badge(androidx.compose.ui.M[…]hics.Color,kotlin.Function1)

cool. this is what tab expect

@Composable
@ComposableInferredTarget
public fun Tab(
    selected: Boolean,
    onClick: () -> Unit,
    modifier: Modifier,
    enabled: Boolean,
    text: @Composable() (() -> Unit)?,
    icon: @Composable() (() -> Unit)?,
    selectedContentColor: Color,
    unselectedContentColor: Color,
    interactionSource: MutableInteractionSource
): Unit

not sure where to apply badge?

Wrap the tab in

BadgeBox

maybe 🤔 I've never done it, just guessing

no i did not…. yet

https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#Badge(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)

BadgedBox(
                badge = {
                    Badge {
                        val badgeNumber = "8"
                        Text(
                            badgeNumber,
                            modifier = Modifier.semantics {
                                contentDescription = "$badgeNumber new notifications"
                            }
                        )
                    }
                }) {
                Icon(
                    Icons.Filled.Star,
                    contentDescription = "Favorite"
                )
 }

Where Icon is, place Tab. So wrap Tab with BadgedBox and send in badge slot like above :)

this could work but badge position is not ok. still it needs some work.

Add Modifier.padding to badge. Otherwise recommend using navigationItem with default Google handling or custom badge. Its just a colored circle positioned in layered Box kind a :)