Badges

The Badges component is a versatile label component used to display small pieces of information, status indicators, or categories. It supports multiple color variants, styles, and can include icons for enhanced visual communication.

Overview

The Badges component is designed to provide compact, visually distinct labels with:

• Multiple color variants for different contexts
• Various styles (solid, transparent, outlined, glow)
• Optional left and right icons
• Rounded and pill-shaped options
• Responsive design with dark mode support

Basic Usage

import { Badges } from '@/components/atoms'

function MyComponent() {
  return (
    <Badges className='badges-primary'>
      Primary Badge
    </Badges>
  )
}

Props

Prop	Type	Default	Description
children	ReactNode	-	The content to display in the badge
label	string	-	Alternative to children for simple text content
className	string	''	Additional CSS classes
iconLeft	string	-	Icon name for the left side of the badge
iconRight	string	-	Icon name for the right side of the badge

Color Variants

The Badges component supports 8 different color variants:

Primary (Blue)

<Badges className='badges-primary'>Primary</Badges>

Secondary (Indigo)

<Badges className='badges-secondary'>Secondary</Badges>

Success (Emerald)

<Badges className='badges-success'>Success</Badges>

Info (Sky)

<Badges className='badges-info'>Info</Badges>

Warning (Amber)

<Badges className='badges-warning'>Warning</Badges>

Danger (Rose)

<Badges className='badges-danger'>Danger</Badges>

Dark (Slate)

<Badges className='badges-dark'>Dark</Badges>

Light (Gray)

<Badges className='badges-light'>Light</Badges>

Styles

Default Style

The default style has a solid background color with white text.

<Badges className='badges-primary'>Default primary badge</Badges>

Transparent Style

Add the transparent class for a light background with colored text.

<Badges className='badges-primary transparent'>Transparent primary badge</Badges>

Outlined Style

Add the outlined class for a bordered style with colored text.

<Badges className='badges-primary outlined'>Outlined primary badge</Badges>

Glow Style

Add the glow class for a drop shadow effect.

<Badges className='badges-primary glow'>Glow primary badge</Badges>

Shapes

Default Rounded

Default badges have slightly rounded corners.

<Badges className='badges-primary'>Default rounded</Badges>

Pill Shape

Add the rounded-full class for a pill-shaped badge.

<Badges className='badges-primary rounded-full'>Pill shaped</Badges>

Icons

Left Icon

Add an icon to the left side of the badge:

<Badges className='badges-primary' iconLeft='lucide:dot'>
  Badge with left icon
</Badges>

Right Icon

Add an icon to the right side of the badge:

<Badges className='badges-primary' iconRight='lucide:x'>
  Badge with right icon
</Badges>

Both Icons

Combine both left and right icons:

<Badges 
  className='badges-primary' 
  iconLeft='lucide:dot' 
  iconRight='lucide:x'
>
  Badge with both icons
</Badges>

Examples

Basic Badges

<Card>
  <h4>Badges Basic</h4>
  <div className='space-x-2 flex flex-wrap gap-2'>
    <Badges className='badges-primary'>Primary</Badges>
    <Badges className='badges-secondary'>Secondary</Badges>
    <Badges className='badges-success'>Success</Badges>
    <Badges className='badges-info'>Info</Badges>
    <Badges className='badges-warning'>Warning</Badges>
    <Badges className='badges-danger'>Danger</Badges>
    <Badges className='badges-dark'>Dark</Badges>
    <Badges className='badges-light'>Light</Badges>
  </div>
</Card>

Rounded Badges

<Card>
  <h4>Badges Rounded</h4>
  <div className='space-x-2 flex flex-wrap gap-2'>
    <Badges className='badges-primary rounded-full'>Primary</Badges>
    <Badges className='badges-secondary rounded-full'>Secondary</Badges>
    <Badges className='badges-success rounded-full'>Success</Badges>
    <Badges className='badges-info rounded-full'>Info</Badges>
    <Badges className='badges-warning rounded-full'>Warning</Badges>
    <Badges className='badges-danger rounded-full'>Danger</Badges>
    <Badges className='badges-dark rounded-full'>Dark</Badges>
    <Badges className='badges-light rounded-full'>Light</Badges>
  </div>
</Card>

Soft Badges

<Card>
  <h4>Soft Badges</h4>
  <div className='space-x-2 flex flex-wrap gap-2'>
    <Badges className='badges-primary transparent'>Primary</Badges>
    <Badges className='badges-secondary transparent'>Secondary</Badges>
    <Badges className='badges-success transparent'>Success</Badges>
    <Badges className='badges-info transparent'>Info</Badges>
    <Badges className='badges-warning transparent'>Warning</Badges>
    <Badges className='badges-danger transparent'>Danger</Badges>
    <Badges className='badges-dark transparent'>Dark</Badges>
    <Badges className='badges-light transparent'>Light</Badges>
  </div>
</Card>

Soft Badges Outlined

<Card>
  <h4>Soft Badges Outlined</h4>
  <div className='space-x-2 flex flex-wrap gap-2'>
    <Badges className='badges-primary outlined rounded-full'>Primary</Badges>
    <Badges className='badges-secondary outlined rounded-full'>Secondary</Badges>
    <Badges className='badges-success outlined rounded-full'>Success</Badges>
    <Badges className='badges-info outlined rounded-full'>Info</Badges>
    <Badges className='badges-warning outlined rounded-full'>Warning</Badges>
    <Badges className='badges-danger outlined rounded-full'>Danger</Badges>
    <Badges className='badges-dark outlined rounded-full'>Dark</Badges>
    <Badges className='badges-light outlined rounded-full'>Light</Badges>
  </div>
</Card>

Glow Badges

<Card>
  <h4>Glow Badges</h4>
  <div className='space-x-2 flex flex-wrap gap-2'>
    <Badges className='badges-primary glow'>Primary</Badges>
    <Badges className='badges-secondary glow'>Secondary</Badges>
    <Badges className='badges-success glow'>Success</Badges>
    <Badges className='badges-info glow'>Info</Badges>
    <Badges className='badges-warning glow'>Warning</Badges>
    <Badges className='badges-danger glow'>Danger</Badges>
    <Badges className='badges-dark glow'>Dark</Badges>
    <Badges className='badges-light glow'>Light</Badges>
  </div>
</Card>

Glow Badges Rounded

<Card>
  <h4>Glow Badges Rounded</h4>
  <div className='space-x-2 flex flex-wrap gap-2'>
    <Badges className='badges-primary glow rounded-full'>Primary</Badges>
    <Badges className='badges-secondary glow rounded-full'>Secondary</Badges>
    <Badges className='badges-success glow rounded-full'>Success</Badges>
    <Badges className='badges-info glow rounded-full'>Info</Badges>
    <Badges className='badges-warning glow rounded-full'>Warning</Badges>
    <Badges className='badges-danger glow rounded-full'>Danger</Badges>
    <Badges className='badges-dark glow rounded-full'>Dark</Badges>
    <Badges className='badges-light glow rounded-full'>Light</Badges>
  </div>
</Card>

Soft Badges with Dot

<Card>
  <h4>Soft Badges with Dot</h4>
  <div className='space-x-2 flex flex-wrap gap-2'>
    <Badges className='badges-primary transparent' iconLeft={'lucide:dot'}>
      Primary
    </Badges>
    <Badges className='badges-secondary transparent' iconLeft={'lucide:dot'}>
      Secondary
    </Badges>
    <Badges className='badges-success transparent' iconLeft={'lucide:dot'}>
      Success
    </Badges>
    <Badges className='badges-info transparent' iconLeft={'lucide:dot'}>
      Info
    </Badges>
    <Badges className='badges-warning transparent' iconLeft={'lucide:dot'}>
      Warning
    </Badges>
    <Badges className='badges-danger transparent' iconLeft={'lucide:dot'}>
      Danger
    </Badges>
    <Badges className='badges-dark transparent' iconLeft={'lucide:dot'}>
      Dark
    </Badges>
    <Badges className='badges-light transparent' iconLeft={'lucide:dot'}>
      Light
    </Badges>
  </div>
</Card>

Soft Badges Outlined with Dot

<Card>
  <h4>Soft Badges Outlined with Dot</h4>
  <div className='space-x-2 flex flex-wrap gap-2'>
    <Badges className='badges-primary outlined rounded-full' iconLeft={'lucide:dot'}>
      Primary
    </Badges>
    <Badges className='badges-secondary outlined rounded-full' iconLeft={'lucide:dot'}>
      Secondary
    </Badges>
    <Badges className='badges-success outlined rounded-full' iconLeft={'lucide:dot'}>
      Success
    </Badges>
    <Badges className='badges-info outlined rounded-full' iconLeft={'lucide:dot'}>
      Info
    </Badges>
    <Badges className='badges-warning outlined rounded-full' iconLeft={'lucide:dot'}>
      Warning
    </Badges>
    <Badges className='badges-danger outlined rounded-full' iconLeft={'lucide:dot'}>
      Danger
    </Badges>
    <Badges className='badges-dark outlined rounded-full' iconLeft={'lucide:dot'}>
      Dark
    </Badges>
    <Badges className='badges-light outlined rounded-full' iconLeft={'lucide:dot'}>
      Light
    </Badges>
  </div>
</Card>

CSS Classes Reference

Base Classes

• .badges - Base badge class with padding, rounded corners, and transitions

Color Variants

• .badges-primary - Blue color scheme
• .badges-secondary - Indigo color scheme
• .badges-success - Emerald color scheme
• .badges-info - Sky color scheme
• .badges-warning - Amber color scheme
• .badges-danger - Rose color scheme
• .badges-dark - Slate color scheme
• .badges-light - Gray color scheme

Style Modifiers

• .transparent - Light background with colored text
• .outlined - Bordered style with colored text
• .glow - Drop shadow effect
• .rounded-full - Pill-shaped badge

Styling

The Badges component uses Tailwind CSS classes and includes:

• Responsive Design: Works on all screen sizes
• Dark Mode Support: Automatic dark mode variants
• Smooth Transitions: 150ms transition duration
• Flexible Layout: Flexbox layout with proper spacing
• Icon Support: Integrated with NavIcon component
• Small Text: Uses text-xs for compact appearance

Accessibility

The Badges component includes accessibility features:

• Semantic HTML structure
• Proper color contrast ratios
• Icon accessibility (when using NavIcon)
• Screen reader friendly text content

Best Practices

1. Choose appropriate colors for the context:

   • Success: Green for positive status
   • Warning: Yellow/Amber for cautions
   • Danger: Red for errors or critical status
   • Info: Blue for informational labels

2. Use icons thoughtfully to enhance meaning

3. Keep text concise - badges work best with short labels

4. Consider using transparent or outlined styles for subtle indicators

5. Use glow effects sparingly for emphasis

6. Group related badges with consistent styling

Common Use Cases

• Status indicators: Online/Offline, Active/Inactive
• Categories: Tags, Labels, Types
• Counters: Notifications, Items, Numbers
• Priority levels: High, Medium, Low
• User roles: Admin, User, Moderator

Related Components

• NavIcon - Used for displaying icons in badges
• Card - Often used as a container for badge examples
• Button - For interactive badge-like elements