{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

BadgeKt

public final class BadgeKt


Summary

Public methods

static final void
@Composable
Badge(
    @NonNull Modifier modifier,
    @NonNull Color containerColor,
    @NonNull Color contentColor,
    @Composable @ExtensionFunctionType Function1<@NonNull RowScopeUnit> content
)

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

static final void
@Composable
BadgedBox(
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull BoxScopeUnit> badge,
    @NonNull Modifier modifier,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull BoxScopeUnit> content
)

Material Design badge box.

Public methods

Badge

@Composable
public static final void Badge(
    @NonNull Modifier modifier,
    @NonNull Color containerColor,
    @NonNull Color contentColor,
    @Composable @ExtensionFunctionType Function1<@NonNull RowScopeUnit> content
)

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

See BadgedBox for a top level layout that will properly place the badge relative to content such as text or an icon.

Parameters
@NonNull Modifier modifier

the Modifier to be applied to this badge

@NonNull Color containerColor

the color used for the background of this badge

@NonNull Color contentColor

the preferred color for content inside this badge. Defaults to either the matching content color for containerColor, or to the current LocalContentColor if containerColor is not a color from the theme.

@Composable @ExtensionFunctionType Function1<@NonNull RowScopeUnit> content

optional content to be rendered inside this badge

BadgedBox

@Composable
public static final void BadgedBox(
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull BoxScopeUnit> badge,
    @NonNull Modifier modifier,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull BoxScopeUnit> content
)

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

A simple icon with badge example looks 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 {
                        val badgeNumber = "8"
                        Text(
                            badgeNumber,
                            modifier = Modifier.semantics {
                                contentDescription = "$badgeNumber new notifications"
                            }
                        )
                    }
                }) {
                Icon(
                    Icons.Filled.Star,
                    contentDescription = "Favorite"
                )
            }
        },
        selected = false,
        onClick = {}
    )
}
Parameters
@Composable @ExtensionFunctionType @NonNull Function1<@NonNull BoxScopeUnit> badge

the badge to be displayed - typically a Badge

@NonNull Modifier modifier

the Modifier to be applied to this BadgedBox

@Composable @ExtensionFunctionType @NonNull Function1<@NonNull BoxScopeUnit> content

the anchor to which this badge will be positioned