Badge

fun Badge(modifier: Modifier = Modifier, count: Int = 0, stroke: Boolean = false, colors: BadgeColors = BadgeDefaults.badgeColors(), dotDiameter: Dp = BadgeDefaults.DotDiameter, height: Dp = BadgeDefaults.Height)

A Badge component with COUI style.

A hint red dot mirroring COUIHintRedDot with its three forms:

  • count<= 0: a plain 6dp dot (POINT_ONLY_MODE).

  • count in 1..999: a 16dp-high capsule showing the number, widening with the digit count (16dp under 10, 20dp under 100, 26dp under 1000).

  • count>= 1000: a 20dp-wide capsule showing a three-dot ellipsis (COUI red_dot_more).

Count changes animate like the original: the capsule width eases over 517ms (COUIMoveEaseInterpolator) while the old and new numbers crossfade over 150ms.

Use BadgeBox to anchor a badge at the top end corner of an icon.

Parameters

modifier

The modifier to be applied to the Badge.

count

The number shown in the Badge; values <= 0 show a plain dot.

stroke

Whether to draw a white outline around the Badge (POINT_ONLY_MODE_STROKE / POINT_NUM_MODE_STROKE), for badges on colored surfaces.

colors

The BadgeColors of the Badge.

dotDiameter

The diameter of the plain dot form.

height

The height of the number capsule form.