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

← Back to Material Compose

Badge

Component
in
Material
. Since 1.1.0

Overview

Code Examples

Badge is a component 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.

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

@param modifier optional Modifier for this item @param backgroundColor the background color for the badge @param contentColor the color of label text rendered in the badge @param content optional content to be rendered inside the badge

Overloads

Badge

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

Parameters

NameDescription
modifieroptional Modifier for this item
backgroundColorthe background color for the badge
contentColorthe color of label text rendered in the badge
contentoptional content to be rendered inside the badg