Badge

Data Display

Status indicator with variant system, dot mode, positioning, and pulsing animation support

Badge

Small labels used to highlight statuses, metadata, or categories.

Use variants to represent semantic meaning or visual emphasis.

DefaultPrimarySecondarySuccessWarningErrorInfoOutlineGlass

Sizes

Adjust badge size to match the surrounding typography or component.

SmallMediumLarge

Shapes

Use pill, rounded, or square shapes to match your design language.

RoundedPillSquare

Status Dot

Add small status indicators with optional pulse animation.

OnlineAwayOfflineLive

With Icons

Display icons inside badges for richer visual context.

FeaturedVerifiedAlertPremium

Usage Guidelines

When to Use

  • Status indicators
  • Labels
  • Notification counts

Accessibility

  • Use aria-label for context when standalone
  • Live region for updates

Performance

  • CSS-only styling
  • Minimal DOM

Common Mistakes

  • Badge on badge
  • Using for interactive content

Frequently Asked Questions

Yes, Badge supports numeric content with max count display like '99+'.
Yes, Badge can pulse to draw attention to updates.

View on GitHub

See the full source code on GitHub

Related Components

View all
Accordion

Collapsible content sections with single/multiple expansion modes, animation, and keyboard navigation

Avatar

User avatar with image loading, fallback text generation, status indicators, and shape variants

AvatarGroup

Stacked avatar display with overflow handling, max count configuration, and hover expansion

Card

Container component with header, body, footer composition, variant system including glass morphism effects

Previous

AvatarGroup

Next

BottomNavigation