BadgedBox

Functions summary

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

Material Design badge box.
Cmn

Functions

BadgedBox

Cmn 
@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