Badge
A small label component with four theme variants, an optional dot mode, and support for custom background color and corner radius.
Badge renders a small pill-shaped label with 11sp semibold text. When content is omitted, it renders as a minimal 6 dp filled dot — useful as a notification indicator. The roundedSize parameter controls corner radius, and backgroundColor overrides the variant's default fill color.
Basic usage
Variants
Secondary
Destructive
Outline
Notification badge
Omit content to render a 6 dp dot. Pair it with Material3's BadgedBox to overlay it on another component.
Custom background and shape
Override the fill color with backgroundColor and adjust corner rounding with roundedSize. Both work independently of the variant.
API reference
Badge
| Parameter | Type | Default | Description |
|---|---|---|---|
modifier | Modifier | Modifier | Applied to the badge container. |
variant | BadgeVariant | BadgeVariant.Default | Determines background, text, and border colors when backgroundColor is not set. |
backgroundColor | Color? | null | Explicit fill color. Overrides the variant's default background when non-null. |
roundedSize | Dp | MaterialTheme.radius.full | Corner radius of the badge shape. |
contentDescription | String? | null | Accessibility label for screen readers. Set this for notification counts or the content-less dot badge, which otherwise carry no meaning to TalkBack/VoiceOver. |
content | (@Composable () -> Unit)? | null | Badge label. When null, renders as a 6 dp filled dot with no padding. |
BadgeVariant
| Value | Description |
|---|---|
Default | Primary background with primary-foreground text. |
Secondary | Secondary background with secondary-foreground text. |
Destructive | Destructive background with destructive-foreground text. |
Outline | Transparent background with a 1 dp border and foreground text. |