Badge
UI ComponentsA small visual indicator used to display status, counts, or labels. Often appears as a small circle or rounded rectangle attached to other elements.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Badge coming soon.
How It Works in Apps/Websites
Badges communicate metadata at a glance - notification counts, status indicators, or categorical labels. They're typically positioned at the corner of icons or next to text. Badges use color coding (red for alerts, green for success, etc.) and keep text minimal (numbers or short labels).
How AI Interprets This Term
When you say 'badge', AI expects: a small element (16-24px), circular for counts or pill-shaped for text, with bold/contrasting background color. Usually positioned top-right corner of parent element. Contains number (1, 99+) or short text (New, Pro).
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Add a red notification badge with count to a bell icon
Create a notification bell icon with: red circular badge (#ef4444), white text, positioned top-right overlapping icon edge. Show '3' for low counts, '99+' for high counts. Add subtle pulse animation for new notifications.
Show different badge styles: notification count (red circle), status (green dot), text badge (blue 'New' pill)
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
States
Usage Guidelines
When to Use
- •Notification counts
- •Status indicators (online, away)
- •New item indicators
- •Subscription tiers (Pro, Premium)
When NOT to Use
- •Long text content (use tag)
- •Interactive elements (use button)
- •Primary information
Related Terms
Avatar
A visual representation of a user or entity, typically displayed as a circular image, initials, or icon placeholder.
Chip
A compact element representing an input, attribute, or action, often with optional dismiss functionality. Used for tags, filters, or multi-select displays.