Material 3 Badges in Jetpack Compose

Get started with Material 3 badges in Jetpack Compose to create user-friendly interfaces for displaying status or numeric values.

Explore Badge Styles

Learn to implement two Material 3 badge types for displaying status or counts.

1. Small badge
2. Large badge container
3. Large badge label

Basic Badge

Simple badge over an icon.

@Composable
fun BadgeExample() {
    // Creates a simple badge over an icon
    BadgedBox(
        badge = { Badge() } // *Required: Defines the badge appearance
    ) {
        Icon(
            imageVector = Icons.Filled.Mail, // *Required: Displays the button icon
            contentDescription = "Email" // *Required: Describes the icon for accessibility
        )
    }
}
  

Use a Basic Badge when you want to show a simple status indicator.

Examples:

• Show unread notifications on an app icon
• Indicate new messages in a chat app
• Highlight new content in a news feed

---

Detailed Badge

Badge with dynamic value and interaction.

@Composable
fun BadgeInteractiveExample() {
    // Creates a badge with a dynamic count
    var itemCount by remember { mutableStateOf(0) } // Tracks badge count
    Column(
        verticalArrangement = Arrangement.spacedBy(16.dp) // *Required: Arranges content with spacing
    ) {
        BadgedBox(
            badge = {
                if (itemCount > 0) {
                    Badge(
                        containerColor = Color.Red, // Sets badge background color
                        contentColor = Color.White // Sets badge text color
                    ) {
                        Text("$itemCount") // Displays the count
                    }
                }
            } // *Required: Defines the badge appearance
        ) {
            Icon(
                imageVector = Icons.Filled.ShoppingCart, // *Required: Displays the button icon
                contentDescription = "Shopping cart" // *Required: Describes the icon for accessibility
            )
        }
        Button(onClick = { itemCount++ }) {
            Text("Add item") // Displays button label
        }
    }
}
  

Use a Detailed Badge when you want to display a dynamic count or status.

Examples:

• Show cart quantity in a shopping app
• Indicate task status in a to-do app
• Display unread message count in a messaging app

---

Badge Properties

Understand the key properties used in the badge examples.

Property	Usage
badge*	Required: Defines the badge appearance, typically using the Badge composable
content*	Required: Defines the content the badge overlaps, typically an Icon or Column
containerColor	Sets the badge’s background color (e.g., red in Detailed Badge)
contentColor	Sets the badge’s text or content color (e.g., white in Detailed Badge)
contentDescription*	Required: Describes the icon for accessibility