State of Compose 2023 results are in! Click here to learn more

← Back to Material 3 Compose

BadgedBox

Component
in
Material 3
. Since 1.0.0

Overview

Code Examples

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(https://developer.android.com/images/reference/androidx/compose/material3/badge.png)

A common use case is to display a badge with navigation bar items. For more information, see Navigation Bar(https://m3.material.io/components/navigation-bar/overview)

A simple icon with badge example looks like:

Overloads

BadgedBox

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

Parameters

NameDescription
badgethe badge to be displayed - typically a Badge
modifierthe Modifier to be applied to this BadgedBox
contentthe anchor to which this badge will be positione