We just launched Compose Examples featuring over 150+ components! Check it out →

Badge

Common

Component in Material 3 Compose

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

Last updated:

Installation

dependencies {
   implementation("androidx.compose.material3:material3:1.4.0-alpha02")
}

Overloads

@Composable
fun Badge(
    modifier: Modifier = Modifier,
    containerColor: Color = BadgeDefaults.containerColor,
    contentColor: Color = contentColorFor(containerColor),
    content: @Composable (RowScope.() -> Unit)? = null,
)

Parameters

namedescription
modifierthe [Modifier] to be applied to this badge
containerColorthe color used for the background of this badge
contentColorthe 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.
contentoptional content to be rendered inside this badge
by @alexstyl