Badge

Preview

About

A small badge for counters, status, or "new" indicators. Can be text or a simple dot.

• text: the badge's label (e.g. "3", "New"); isDot/KasyBadge.dot(...) renders just a colored dot
• tone: primary, neutral, success, warning, danger (default) — sets background and text color
• size: sm, md (default), lg
• backgroundColor / foregroundColor: override the tone's colors
• Always draws a thin ring in the surface color around it, to stand out over whatever is underneath

KasyBadged overlays a KasyBadge on top of any widget (e.g. avatar, icon): placement (topRight, topLeft, bottomRight, bottomLeft), overlap (manual offset), and isCircularAvatar/avatarDiameter to calculate the right fit on the avatar's curve.

Last updated on 08/23/2026