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 = {},
        )
    }
}

Create your own Component Library

Material Components are meant to be used as is and they do not allow customizations. To build your own Jetpack Compose component library use Compose Unstyled