Component

Badge

A FormaUI badge — a small status marker for indicating unread counts or presence.

2 variantsThemed defaults

import dev.formaui.components.badge.FormaBadge

import dev.formaui.components.badge.FormaBadgedBox

dotnumeric

Preview

This toggle is site chrome only — the preview has its own light/dark switch inside.

LIVE PREVIEW

Live preview — ~37 MB development build

Usage

KOTLIN

123456FormaBadgedBox(badge = { FormaBadge(count = 5) }) {
    Text("Inbox")
}
FormaBadgedBox(badge = { FormaBadge() }) {
    Text("Updates")
}

FormaBadge

A small status marker: a dot badge when count is null, otherwise a numeric badge capped at maxCount with a trailing + (e.g. 99+).

ParameterTypeDefaultDescription

modifierTypeModifierDefaultModifierDescriptionThe Modifier applied to the badge.

countTypeInt?DefaultnullDescriptionThe number to display, or null for a dot badge.

maxCountTypeIntDefaultDefaultMaxCountDescriptionThe largest number shown verbatim; above it the badge shows "$maxCount+" (defaults to 99). Ignored for dot badges.

containerColorTypeColorDefaultMaterialTheme.colorScheme.errorDescriptionThe badge background color (defaults to the M3 error color).

contentColorTypeColorDefaultcontentColorFor(containerColor)DescriptionThe badge text color (defaults to the content color for containerColor).

FormaBadgedBox

Anchors a badge to the top-end corner of some content — the FormaUI wrapper over Material 3's BadgedBox.

ParameterTypeDefaultDescription

badgerequiredType@Composable BoxScope.() -> UnitDefaultrequiredDescriptionThe badge to draw at the content's top-end corner (typically a FormaBadge).

modifierTypeModifierDefaultModifierDescriptionThe Modifier applied to the box.

contentrequiredType@Composable BoxScope.() -> UnitDefaultrequiredDescriptionThe element the badge is anchored to.

Accessibility

The badge is decorative; put the meaningful description (including any count) on the annotated element's contentDescription (e.g. "Messages, 5 unread") — not on the badge — so screen readers announce it in context.

PreviousAvatar Next BarChart