Skip to content

Component

Badge

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

dev.formaui.components.badge

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

FormaBadgedBox(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+).

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.

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.