New Compose Multiplatform components arrived on Composables UICheck it out →

← Component in Material Compose

BadgedBox

Common

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.

Last updated:

Installation

dependencies {
   implementation("androidx.compose.material:material:1.7.0-beta04")
}

Overloads

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

Parameters

namedescription
badgethe badge to be displayed - typically a [Badge]
modifieroptional [Modifier] for this item
contentthe anchor to which this badge will be positioned

Code Example

BottomNavigationItemWithBadge

@Composable
@Sampled
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 = {}
        )
    }
}