BadgedBox

Functions summary

Unit

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

Material Design badge box.

Cmn

Functions

BadgedBox

Cmn

Artifact: androidx.compose.material3:material3

View Source

Added in 1.0.0

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

Material Design badge box.

A badge represents dynamic information such as a number of pending requests in a navigation bar.

Badges can be icon only or contain short text.

Badge
image

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

Simple icons with badge examples look like:

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Star
import androidx.compose.material3.Badge
import androidx.compose.material3.BadgedBox
import androidx.compose.material3.Icon
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics

NavigationBar {
    NavigationBarItem(
        icon = {
            BadgedBox(
                badge = {
                    Badge(
                        modifier =
                            Modifier.semantics { contentDescription = "New notification" }
                    )
                }
            ) {
                Icon(Icons.Filled.Star, contentDescription = "Favorite")
            }
        },
        selected = false,
        onClick = {},
    )
    NavigationBarItem(
        icon = {
            BadgedBox(
                badge = {
                    Badge {
                        val badgeNumber = "8"
                        Text(
                            badgeNumber,
                            modifier =
                                Modifier.semantics {
                                    contentDescription = "$badgeNumber new notifications"
                                },
                        )
                    }
                }
            ) {
                Icon(Icons.Filled.Star, contentDescription = "Favorite")
            }
        },
        selected = false,
        onClick = {},
    )
    NavigationBarItem(
        icon = {
            BadgedBox(
                badge = {
                    Badge {
                        val badgeNumber = "999+"
                        Text(
                            badgeNumber,
                            modifier =
                                Modifier.semantics {
                                    contentDescription = "$badgeNumber new notifications"
                                },
                        )
                    }
                }
            ) {
                Icon(Icons.Filled.Star, contentDescription = "Favorite")
            }
        },
        selected = false,
        onClick = {},
    )
}

Parameters
`badge: @Composable BoxScope.() -> Unit`	the badge to be displayed - typically a `Badge`
`modifier: Modifier = Modifier`	the `Modifier` to be applied to this BadgedBox
`content: @Composable BoxScope.() -> Unit`	the anchor to which this badge will be positioned