Accessibility

Overview

A Badge is a small visual indicator used to display status, count, or updates.

It helps draw attention to changes, notifications, or dynamic values in a compact way.

Badges can appear as dots (for status) or count indicators (for quantities).

Variants: Dot · Count

Colors: Brand · Neutral · Danger

Status: Stable

Owner: Design System Team

When to Use / When Not to Use

Use when:

• Indicating status or updates (new, active, error).
• Showing counts or alerts on icons, avatars, or tabs.
• Providing lightweight emphasis for notifications or secondary information.

Avoid when:

• You need descriptive information — use Tag or Chip instead.
• The information is critical — use Alert or Toast.
• The count is dynamic but large (e.g., 1k+ items) — summarize instead.