Jetpack Compose BadgeBox in Material Compose

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 in the upper right corner of bottom navigation items. For more information, see Bottom Navigation(https://material.io/components/bottom-navigation#behavior)

A simple icon with badge example looks like:

Overloads

BadgeBox

@ExperimentalMaterialApi
@Composable
fun BadgeBox(
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.error,
    contentColor: Color = contentColorFor(backgroundColor),
    badgeContent: @Composable (RowScope.() -> Unit)? = null,
    content: @Composable BoxScope.() -> Unit,
)

Parameters

Name	Description
`modifier`	optional Modifier for this item
`backgroundColor`	the background color for the badge
`contentColor`	the color of label text rendered in the badge
`badgeContent`	optional content to be rendered inside the badge
`content`	the anchor to which this badge will be positione