BadgedBox

Composable Component

A BadgeBox is used to decorate content with a badge that can contain dynamic information, such as the presence of a new notification or a number of pending requests. Badges can be icon only or contain short text.

Common

@Composable
fun BadgedBox(
    badge: @Composable BoxScope.() -> Unit,
    modifier: Modifier = Modifier,
    content: @Composable BoxScope.() -> Unit,
)

Parameters


badge	the badge to be displayed - typically a `Badge`
modifier	optional `Modifier` for this item
content	the anchor to which this badge will be positioned

Code Examples

BottomNavigationItemWithBadge

@Composable
fun BottomNavigationItemWithBadge() {
    BottomNavigation {
        BottomNavigationItem(
            icon = {
                BadgedBox(
                    badge = {
                        Badge {
                            val badgeNumber = "8"
                            Text(
                                badgeNumber,
                                modifier =
                                    Modifier.semantics {
                                        contentDescription = "$badgeNumber new notifications"
                                    },
                            )
                        }
                    }
                ) {
                    Icon(Icons.Filled.Favorite, contentDescription = "Favorite")
                }
            },
            selected = false,
            onClick = {},
        )
    }
}