# BadgedBox

Common/AllAndroid/JVM

## Functions summary

|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material3/BadgedBox.composable#BadgedBox(kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function1)( badge: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/BoxScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/BoxScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Material Design badge box. | Cmn |

## Functions

### BadgedBox

Cmn Artifact: [androidx.compose.material3:material3](https://developer.android.com/jetpack/androidx/releases/compose-material3) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/Badge.kt+function:BadgedBox)

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

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)

Simple icons with badge examples look like:

```kotlin
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Star
import androidx.compose.material3.Badge
import androidx.compose.material3.BadgedBox
import androidx.compose.material3.Icon
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics

NavigationBar {
    NavigationBarItem(
        icon = {
            BadgedBox(
                badge = {
                    Badge(
                        modifier =
                            Modifier.semantics { contentDescription = "New notification" }
                    )
                }
            ) {
                Icon(Icons.Filled.Star, contentDescription = "Favorite")
            }
        },
        selected = false,
        onClick = {},
    )
    NavigationBarItem(
        icon = {
            BadgedBox(
                badge = {
                    Badge {
                        val badgeNumber = "8"
                        Text(
                            badgeNumber,
                            modifier =
                                Modifier.semantics {
                                    contentDescription = "$badgeNumber new notifications"
                                },
                        )
                    }
                }
            ) {
                Icon(Icons.Filled.Star, contentDescription = "Favorite")
            }
        },
        selected = false,
        onClick = {},
    )
    NavigationBarItem(
        icon = {
            BadgedBox(
                badge = {
                    Badge {
                        val badgeNumber = "999+"
                        Text(
                            badgeNumber,
                            modifier =
                                Modifier.semantics {
                                    contentDescription = "$badgeNumber new notifications"
                                },
                        )
                    }
                }
            ) {
                Icon(Icons.Filled.Star, contentDescription = "Favorite")
            }
        },
        selected = false,
        onClick = {},
    )
}
```

| Parameters |
|---|---|
| `badge: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/BoxScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | the badge to be displayed - typically a `https://developer.android.com/reference/kotlin/androidx/compose/material3/Badge.composable#Badge(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)` |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to be applied to this BadgedBox |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/BoxScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | the anchor to which this badge will be positioned |