Skip to main content

Badge

🌓Dark Mode Compatible

A compact component for displaying status labels, notification counts, tags, and metadata.

Overview​

The Badge component provides a small visual indicator for statuses, counts, categories, or other metadata. It is designed to be unobtrusive and semantically meaningful through color-coded variants.

Live demoInteractive

Use Badge when you need:

  • Status indicators (active, pending, danger, warning)
  • Notification counts (unread messages, alerts, updates)
  • Category tags (topics or labels)
  • Version labels (beta, new, v2.0)
  • Inline metadata alongside text

Avoid using Badge for actions or long text content.

Anatomy​

The Badge component consists of the container, optional dot, and content:

┌─────────────────────────┐
│ ● Content               │
│   │   │                 │
│   │   └─ Text content   │
│   └─ Dot indicator      │
│      (optional)         │
└─────────────────────────┘

Parts:

  • Container: wraps the badge (default span, customizable via as)
  • Dot indicator: optional visual indicator for emphasis
  • Content: text or children content

Usage​

import { Badge } from '@grasdouble/lufa_design-system';

export function BadgeExamples() {
  return (
    <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
      <Badge>New</Badge>
      <Badge variant="success">Active</Badge>
      <Badge variant="danger">Danger</Badge>
      <Badge variant="warning">Pending</Badge>
      <Badge variant="info">Beta</Badge>
      <Badge size="sm">Small</Badge>
      <Badge size="md">Medium</Badge>
      <Badge size="lg">Large</Badge>
      <Badge dot variant="danger">
        3 notifications
      </Badge>
      <Badge as="label" htmlFor="input-id">
        Label Badge
      </Badge>
    </div>
  );
}

Props​

PropTypeDefaultDescription
variant'default' | 'success' | 'danger' | 'warning' | 'info''default'Semantic variant defining color scheme and meaning
size'sm' | 'md' | 'lg''md'Size of the badge affecting padding and font size
dotbooleanfalseShows notification dot indicator before content
childrenReact.ReactNoderequiredContent to display inside the badge (text, numbers, etc.)
classNamestringundefinedAdditional CSS classes to apply
asElementType'span'HTML element type to render (span, div, label)

Accessibility​

  • Always include text content; color alone does not convey meaning.
  • The dot indicator is decorative and hidden from screen readers.
  • Use as="label" with htmlFor when the badge labels a form control.
import { Badge } from '@grasdouble/lufa_design-system';

export function AccessibleBadges() {
  return (
    <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
      <Badge variant="success">Active</Badge>
      <Badge dot variant="warning">
        2 pending
      </Badge>
      <Badge as="label" htmlFor="email" variant="info">
        Email Address
      </Badge>
    </div>
  );
}

Theming & Tokens​

Badge uses design-system tokens for background, text color, spacing, and typography. Variants map to semantic color tokens and sizes map to spacing and font-size tokens. Update tokens in your theme to adjust appearance consistently.

Do / Don’t​

Do
  • Keep badge text short and descriptive.
  • Use semantic variants consistently across the product.
  • Use dot to emphasize notifications or alerts.
  • Provide surrounding context when a badge appears inline.
Don't
  • Don't use badges for actions; use Button instead.
  • Don't rely only on color to convey meaning.
  • Don't use long, multi-line text inside a badge.
  • Don't overuse the dot indicator.
  • Text - For displaying text content alongside badges
  • Button - For actionable elements
  • Icon - For icon indicators