Badge

A Badge is a small visual indicator used to convey status, count, or emphasis. It often appears as a dot or number attached to another element such as an icon, button, or avatar.

Use Badges to highlight new activity, show the number of items (e.g., unread messages, cart items), or indicate status (e.g., online/offline, priority level). They are best kept simple and concise to avoid overwhelming the interface.

Common Alternative Names:
Pill, Tag, Label Indicator, Status Dot

---

Numeric

Displays a number to indicate a count, such as unread messages, cart items, or pending tasks. Useful when the exact quantity matters to the user.

Preview

Code

const Row(
  spacing: 16,
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Badges(
      label: '3',
      child: CircleAvatar(
        radius: 20,
        child: Icon(Icons.person, size: 24),
      ),
    ),
    Badges(
      label: '150',
      maxLength: 2,
      child: CircleAvatar(
        radius: 20,
        child: Icon(Icons.person, size: 24),
      ),
    ),
    Badges(
      label: '2490',
      maxLength: 3,
      child: CircleAvatar(
        radius: 20,
        child: Icon(Icons.person, size: 24),
      ),
    )
  ],
),

---

Dot

A minimal indicator, usually a small colored circle, signaling status or presence of new activity without specifying a number. Best for subtle alerts or real-time availability.

Preview

Code

const Badges(
  size: BadgeSize.small,
  child: CircleAvatar(
    radius: 20,
    child: Icon(Icons.person, size: 20),
  ),
),

---

Icon

Attached to an icon (e.g., bell, inbox, chat), the badge highlights new activity. Works well when paired with recognizable symbols to quickly draw attention.

Preview

Code

Badges(
  alignment: Alignment.bottomRight,
  badgeContent: Image.asset(
    'assets/company.png',
    width: 16,
  ),
  child: const Avatar(
    size: AvatarSize.lg,
    image: 'https://picsum.photos/200',
  ),
)

---

Properties

Property	Type	Description
label	String	Required. The text to display in the badge.
padding	EdgeInsetsGeometry?	Custom padding for the badge content. Default: horizontal: 8, vertical: 5
offset	Offset?	Position offset for the badge when used with a child widget.
backgroundColor	Color?	Custom background color. If not provided, uses the type’s default color.
textColor	Color?	Custom text color. If not provided, uses the type’s default color.
textStyle	TextStyle?	Custom text style.
alignment	AlignmentGeometry?	Alignment of the badge when used with a child widget.
child	Widget?	Optional child widget that the badge will be attached to.
icon	Widget?	Optional icon to display before the label text.
type	BadgeType	Type of badge (basic, success, warning, error, info). Default: basic
notificationBadgeSize	NotificationBadgeSize	Type of NotificationBadgeSize (small, medium, large). Default: medium
maxLength	int?	Maximum number of characters to display. Text will be truncated if longer.
overflowText	String	Text to append when label is truncated. Default: ’…’