Badge

Compact labels for highlighting status, counts, or categories with various styles.

Badge Types

Status Badges

Primary Secondary Available Pending Sold New

Outline Badges

Premium Verified Expiring Urgent

Badge Sizes

Small Default Large

Badge with Icons

Verified Attention Info

Badge with Dot

Online Away Offline

Count Badges

5 12 99+

Real Estate Use Cases

Property Status

Available Reserved Sold New Listing Featured

Property Features

Pool Garden Garage Balcony Elevator

Property Types

Apartment House Villa Penthouse Studio

Urgency Indicators

Last Day Price Reduced Open House

Implementation Guide

HTML Structure

<!-- Basic Badge -->
<span class="lyd-badge primary">Badge Text</span>

<!-- Badge with Icon -->
<span class="lyd-badge success">
    <svg class="lyd-badge-icon">...</svg>
    Verified
</span>

<!-- Badge with Dot -->
<span class="lyd-badge success">
    <span class="lyd-badge-dot"></span>
    Online
</span>

<!-- Count Badge -->
<span class="lyd-badge-count">5</span>

<!-- Outline Badge -->
<span class="lyd-badge outline primary">Premium</span>

<!-- Badge Group -->
<div class="lyd-badge-group">
    <span class="lyd-badge primary">Tag 1</span>
    <span class="lyd-badge primary">Tag 2</span>
</div>

React/Next.js Component

// components/Badge.tsx
import { ReactNode } from 'react';

interface BadgeProps {
  children: ReactNode;
  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
  size?: 'small' | 'medium' | 'large';
  outline?: boolean;
  icon?: ReactNode;
  dot?: boolean;
  className?: string;
}

export const Badge = ({
  children,
  variant = 'primary',
  size = 'medium',
  outline = false,
  icon,
  dot,
  className = ''
}: BadgeProps) => {
  const sizeClass = size === 'small' ? 'small' : size === 'large' ? 'large' : '';
  const outlineClass = outline ? 'outline' : '';
  
  return (
    <span className={`lyd-badge ${variant} ${sizeClass} ${outlineClass} ${className}`}>
      {dot && <span className="lyd-badge-dot" />}
      {icon && <span className="lyd-badge-icon">{icon}</span>}
      {children}
    </span>
  );
};

// Count Badge Component
interface CountBadgeProps {
  count: number;
  max?: number;
}

export const CountBadge = ({ count, max = 99 }: CountBadgeProps) => {
  const displayCount = count > max ? `${max}+` : count;
  
  return (
    <span className="lyd-badge-count">
      {displayCount}
    </span>
  );
};

// Usage
<Badge variant="success">Available</Badge>
<Badge variant="warning" icon={<Icon />}>Pending</Badge>
<Badge variant="info" dot>Online</Badge>
<CountBadge count={5} />

API Reference

Class Description
.lyd-badge Base badge class
.lyd-badge-icon Icon within badge
.lyd-badge-dot Status dot indicator
.lyd-badge-count Numeric count badge
.lyd-badge-group Container for multiple badges
.primary Primary color variant
.secondary Secondary color variant
.success Success/green variant
.warning Warning/yellow variant
.error Error/red variant
.info Info/blue variant
.outline Outline style variant
.small Small size variant
.large Large size variant

Accessibility & Best Practices

Accessibility Features

  • Use semantic HTML (span for decorative, button if clickable)
  • Ensure sufficient color contrast
  • Don't rely solely on color for meaning
  • Add aria-label for icon-only badges
  • Screen reader friendly text

Best Practices

  • Keep badge text concise
  • Use consistent colors for same meanings
  • Limit number of badges per item
  • Choose appropriate size for context
  • Group related badges together
  • Consider using tooltips for additional info