[ Web Proxy ]
URL:
Viewing: https://developer.android.com/develop/ui/compose/components/badges [Back]  [Original]
Badges  |  Jetpack Compose  |  Android Developers Skip to main content
Android Developers [Android Developers]
Essentials Design & Plan Develop Google Play Blog
Search:
Android Studio
Overview Tutorial Samples Docs Quick Guides
Android Developers [Android Developers]

Badges Stay organized with collections Save and categorize content based on your preferences.

Use a badge to display a small visual element to denote status or a numeric value on another composable. Here are a few common scenarios where you might use a badge:

Different examples of the badge component. [Different examples of the badge component.] Figure 1. Badge examples

API surface

Use the BadgedBox composable to implement badges in your application. It is ultimately a container. You control its appearance with these two main parameters:

Basic example

This code snippet shows a basic implementation of BadgedBox:

@Composable
fun BadgeExample() {
    BadgedBox(
        badge = {
            Badge()
        }
    ) {
        Icon(
            imageVector = Icons.Filled.Mail,
            contentDescription = "Email"
        )
    }
}

This example displays a badge that overlaps the provided Icon composable. Note the following in the code:

This is how it appears:

A simple badge that contains no content. [A simple badge that contains no content.] Figure 2. A minimal badge implementation. Important: You can pass any composable to the BadgedBox composable's content slot. You could therefore create a badge that displays on a Button, an Image, or any other composable.

Detailed example

The following snippet demonstrates how you can display values in the badge that respond to user actions.

@Composable
fun BadgeInteractiveExample() {
    var itemCount by remember { mutableIntStateOf(0) }

    Column(
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        BadgedBox(
            badge = {
                if (itemCount > 0) {
                    Badge(
                        containerColor = Color.Red,
                        contentColor = Color.White
                    ) {
                        Text("$itemCount")
                    }
                }
            }
        ) {
            Icon(
                imageVector = Icons.Filled.ShoppingCart,
                contentDescription = "Shopping cart",
            )
        }
        Button(onClick = { itemCount++ }) {
            Text("Add item")
        }
    }
}

This example implements a shopping cart icon with a badge that displays the number of items in the user's cart.

This implementation appears as follows:

A badge implementation that contains the number of items in a shopping cart. [A badge implementation that contains the number of items in a shopping cart.] Figure 3. A badge that displays the number of items in a shopping cart.

Additional resources

Content and code samples on this page are subject to the licenses described in the Content License. Java and OpenJDK are trademarks or registered trademarks of Oracle and/or its affiliates.

Last updated 2026-08-14 UTC.

[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2026-08-14 UTC."],[],[]]
Web Proxy Viewer  |  New URL  |  Original Page