Skip to content
🤔 Documentation issue? Report or edit


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.

A common use case is to display a badge with bottom navigation items. For more information, see Bottom Navigation

A simple icon with badge example looks like:

fun BadgeBoxDemo() {
    BottomNavigation {
            icon = {
                BadgedBox(badge = { Badge { Text("8") } }) {
                        contentDescription = "Favorite"

            selected = false,
            onClick = {})

See also:

Last update: February 9, 2022