A Badge component is a small UI indicator used to display brief information, like a status or count, usually attached to an icon or button.

Usage

Badge used to to show a count of unread messages, notifications, or items.
Badge represent the status of an item, such as "online," "offline," or "away.”
To indicate progress or recent activity, like comment counts or file updates.

Anatomy

The Badge component consists of a container that holds a digit text inside it.

Variant

Badge variants include Dot and Count

With Count

25

With Dot

Active

Avatar

Button