Badge

Small status indicators and labels for categorizing or highlighting content. Badges are perfect for displaying compact information like status, categories, counts, or labels. They provide quick visual cues that help users understand content at a glance.

Features

Multiple Variants: Different colors for various meanings and contexts
Compact Design: Space-efficient indicators that don't overwhelm content
Semantic Colors: Meaningful color associations (green for success, red for errors, etc.)
Flexible Content: Support for text, numbers, or short phrases
Consistent Styling: Uniform appearance across different use cases

When to Use

Status Indicators: Active/inactive, published/draft, online/offline
Categories: Tags, labels, content classification
Counts: Notification counts, item quantities, unread messages
Priority Levels: High/medium/low, urgent/normal
Completion States: Progress indicators, task status

Design Guidelines

Keep text concise (1-3 words maximum)
Use consistent color meanings across your application
Consider accessibility when choosing colors
Don't overuse badges - they lose impact when everywhere
Pair with meaningful icons when appropriate

Import

import { Badge } from 'endui'

Usage

Basic Badge

The simplest badge with default styling, suitable for general labeling and categorization.

<Badge>Default</Badge>

Badge Variants

Each variant conveys different meanings through color. Use consistently across your application to build user understanding.

<Badge variant="default">Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Error</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>

API Reference

Badge Props

Prop	Type	Default	Description
`variant`	`'default' \| 'secondary' \| 'destructive' \| 'outline' \| 'success' \| 'warning'`	`'default'`	Badge color scheme
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	Badge content

Examples

Status Badges

Use different variants to clearly communicate various states and conditions to users.

<div className="flex space-x-2">
  <Badge variant="success">Active</Badge>
  <Badge variant="warning">Pending</Badge>
  <Badge variant="destructive">Inactive</Badge>
  <Badge variant="secondary">Draft</Badge>
</div>

Notification Badge

Display counts and numbers to indicate quantity or priority level.

<div className="flex items-center space-x-2">
  <span>Notifications</span>
  <Badge variant="destructive">3</Badge>
</div>

Table Status Column

Integrate badges into tables to make status information scannable and visually clear.

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>User</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Role</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>John Doe</TableCell>
      <TableCell>
        <Badge variant="success">Active</Badge>
      </TableCell>
      <TableCell>Admin</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Jane Smith</TableCell>
      <TableCell>
        <Badge variant="warning">Pending</Badge>
      </TableCell>
      <TableCell>User</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Bob Johnson</TableCell>
      <TableCell>
        <Badge variant="destructive">Suspended</Badge>
      </TableCell>
      <TableCell>Editor</TableCell>
    </TableRow>
  </TableBody>
</Table>

Product Categories

Use badges to tag and categorize content, making it easier for users to filter and find relevant items.

<Card>
  <CardHeader>
    <CardTitle>Wireless Headphones</CardTitle>
    <div className="flex space-x-2 mt-2">
      <Badge variant="outline">Electronics</Badge>
      <Badge variant="outline">Audio</Badge>
      <Badge variant="outline">Bluetooth</Badge>
    </div>
  </CardHeader>
  <CardContent>
    <p>Premium noise-cancelling headphones with 30-hour battery life.</p>
    <div className="flex justify-between items-center mt-4">
      <span className="text-2xl font-bold">$299</span>
      <Badge variant="success">In Stock</Badge>
    </div>
  </CardContent>
</Card>

Priority Indicators

Show urgency levels and priorities to help users focus on what's most important.

<div className="space-y-4">
  <div className="flex justify-between items-center p-3 border rounded">
    <div>
      <h4 className="font-medium">Fix critical security vulnerability</h4>
      <p className="text-sm text-gray-600">Update authentication system</p>
    </div>
    <Badge variant="destructive">Critical</Badge>
  </div>
  
  <div className="flex justify-between items-center p-3 border rounded">
    <div>
      <h4 className="font-medium">Update user documentation</h4>
      <p className="text-sm text-gray-600">Add new feature guides</p>
    </div>
    <Badge variant="warning">High</Badge>
  </div>
  
  <div className="flex justify-between items-center p-3 border rounded">
    <div>
      <h4 className="font-medium">Optimize image loading</h4>
      <p className="text-sm text-gray-600">Improve page load times</p>
    </div>
    <Badge variant="secondary">Low</Badge>
  </div>
</div>

Navigation with Counts

Add context to navigation items by showing counts or status information.

<nav className="space-y-2">
  <div className="flex items-center justify-between p-2 hover:bg-gray-100 rounded">
    <div className="flex items-center space-x-3">
      <Inbox className="h-4 w-4" />
      <span>Inbox</span>
    </div>
    <Badge variant="default">12</Badge>
  </div>
  
  <div className="flex items-center justify-between p-2 hover:bg-gray-100 rounded">
    <div className="flex items-center space-x-3">
      <Star className="h-4 w-4" />
      <span>Starred</span>
    </div>
    <Badge variant="outline">3</Badge>
  </div>
  
  <div className="flex items-center justify-between p-2 hover:bg-gray-100 rounded">
    <div className="flex items-center space-x-3">
      <AlertCircle className="h-4 w-4" />
      <span>Urgent</span>
    </div>
    <Badge variant="destructive">2</Badge>
  </div>
</nav>

Feature Flags and Versions

Indicate feature availability, version numbers, or experimental features.

<Card>
  <CardHeader>
    <div className="flex justify-between items-start">
      <div>
        <CardTitle>Advanced Analytics</CardTitle>
        <CardDescription>Detailed insights and reporting</CardDescription>
      </div>
      <Badge variant="warning">Beta</Badge>
    </div>
  </CardHeader>
  <CardContent>
    <p>Get comprehensive analytics with custom dashboards and exports.</p>
    <div className="flex space-x-2 mt-4">
      <Badge variant="outline">v2.1</Badge>
      <Badge variant="success">New</Badge>
    </div>
  </CardContent>
</Card>

User Roles and Permissions

Display user roles, subscription tiers, or permission levels clearly.

<div className="space-y-3">
  <div className="flex items-center justify-between p-4 border rounded">
    <div className="flex items-center space-x-3">
      <div className="h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-medium">
        JD
      </div>
      <div>
        <p className="font-medium">John Doe</p>
        <p className="text-sm text-gray-600">john@company.com</p>
      </div>
    </div>
    <div className="flex space-x-2">
      <Badge variant="default">Admin</Badge>
      <Badge variant="success">Pro</Badge>
    </div>
  </div>
  
  <div className="flex items-center justify-between p-4 border rounded">
    <div className="flex items-center space-x-3">
      <div className="h-10 w-10 rounded-full bg-green-500 flex items-center justify-center text-white font-medium">
        JS
      </div>
      <div>
        <p className="font-medium">Jane Smith</p>
        <p className="text-sm text-gray-600">jane@company.com</p>
      </div>
    </div>
    <div className="flex space-x-2">
      <Badge variant="secondary">Editor</Badge>
      <Badge variant="outline">Free</Badge>
    </div>
  </div>
</div>

Interactive Badges

Make badges interactive for filtering, selection, or actions.

const [selectedTags, setSelectedTags] = useState<string[]>([])
 
const toggleTag = (tag: string) => {
  setSelectedTags(prev => 
    prev.includes(tag) 
      ? prev.filter(t => t !== tag)
      : [...prev, tag]
  )
}
 
<div className="space-y-4">
  <h3 className="font-medium">Filter by tags:</h3>
  <div className="flex flex-wrap gap-2">
    {['React', 'TypeScript', 'Design', 'Tutorial', 'Advanced'].map(tag => (
      <button
        key={tag}
        onClick={() => toggleTag(tag)}
        className="transition-opacity hover:opacity-80"
      >
        <Badge 
          variant={selectedTags.includes(tag) ? 'default' : 'outline'}
        >
          {tag}
        </Badge>
      </button>
    ))}
  </div>
  
  {selectedTags.length > 0 && (
    <div className="flex items-center space-x-2">
      <span className="text-sm text-gray-600">Active filters:</span>
      {selectedTags.map(tag => (
        <Badge key={tag} variant="success">
          {tag}
          <button 
            onClick={() => toggleTag(tag)}
            className="ml-1 hover:text-red-600"
          >
            ×
          </button>
        </Badge>
      ))}
    </div>
  )}
</div>

Accessibility Considerations

Color and Meaning

Don't rely solely on color to convey meaning
Provide text labels or icons alongside color coding
Ensure sufficient color contrast for all variants

Screen Readers

Badge content should be meaningful when read aloud
Consider adding aria-label for icon-only badges
Use semantic HTML when badges represent interactive elements

// Good: Descriptive content
<Badge variant="success">Payment Complete</Badge>
 
// Consider aria-label for brevity with context
<Badge variant="destructive" aria-label="3 unread error notifications">
  3
</Badge>

Best Practices

Consistent Color Meaning - Use the same variant for the same meaning across your app
Concise Content - Keep badge text short and scannable
Appropriate Sizing - Don't make badges larger than necessary
Logical Grouping - Group related badges together visually
Performance - Avoid excessive badge animations or transitions
Mobile Friendly - Ensure badges remain readable on smaller screens

Alerts Button