BadgedBox

Functions summary

Unit

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

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.

Cmn

Functions

BadgedBox

Cmn

Artifact: androidx.compose.material:material

View Source

Added in 1.1.0

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

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:

import androidx.compose.material.Badge
import androidx.compose.material.BadgedBox
import androidx.compose.material.BottomNavigation
import androidx.compose.material.BottomNavigationItem
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics

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

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