Skip to Content
Dashflow Logo

Badge Component

A comprehensive guide to using the Badge component with examples, props, and best practices.

Overview

The Badge component is a small status indicator that displays short pieces of information. It's commonly used to show status, categories, counts, or labels in user interfaces.

Basic Usage

import { Badge } from '@dashflowx/core'


export default function BadgeExample() {
  return (
    <Badge 
      type="span"
      textContent="New"
      variant="default"
      size="md"
    />
  )
}

Preview:

New

Variants

Default Badge

The primary badge style with blue background.

<Badge 
  type="span"
  textContent="Default"
  variant="default"
  size="md"
/>

Preview:

Default

Secondary Badge

A subtle badge with gray background.

<Badge 
  type="span"
  textContent="Secondary"
  variant="secondary"
  size="md"
/>

Preview:

Secondary

Outline Badge

A badge with border and transparent background.

<Badge 
  type="span"
  textContent="Outline"
  variant="outline"
  size="md"
/>

Preview:

Outline

Destructive Badge

A badge for errors or dangerous actions.

<Badge 
  type="span"
  textContent="Error"
  variant="destructive"
  size="md"
/>

Preview:

Error

Sizes

Small Badge

<Badge 
  type="span"
  textContent="Small"
  variant="default"
  size="sm"
/>

Preview:

Small

Medium Badge (Default)

<Badge 
  type="span"
  textContent="Medium"
  variant="default"
  size="md"
/>

Preview:

Medium

Large Badge

<Badge 
  type="span"
  textContent="Large"
  variant="default"
  size="lg"
/>

Preview:

Large

Props

PropTypeDefaultDescription
typeany-The HTML element type or React component
textContentstring | JSX.Element-The text content of the badge
variant'outline' | 'secondary' | 'default' | 'destructive''outline'The visual style variant of the badge
size'sm' | 'md' | 'lg''md'The size of the badge
iconJSX.Element-Optional icon to display in the badge
library'react' | 'next''react'The library type for routing
pathstring-The path for navigation (when used as link)
classNamestring-Additional CSS classes for the badge container
iconClassNamestring-Additional CSS classes for the icon
textClassNamestring-Additional CSS classes for the text content

Examples

Badge with Icon

import { CheckIcon } from '@heroicons/react/24/outline'


<Badge 
  type="span"
  textContent="Verified"
  variant="default"
  size="md"
  icon={<CheckIcon className="w-3 h-3" />}
/>

Preview:

✓Verified
<Badge 
  type="a"
  textContent="View Details"
  variant="outline"
  size="md"
  library="next"
  path="/details"
/>

Preview:

View Details

Badge with Custom Styling

<Badge 
  type="span"
  textContent="Custom"
  variant="secondary"
  size="md"
  className="bg-purple-100 text-purple-800"
  textClassName="font-bold"
/>

Preview:

Custom

Status Badges

<div className="flex gap-2">
  <Badge type="span" textContent="Active" variant="default" size="md" />
  <Badge type="span" textContent="Pending" variant="secondary" size="md" />
  <Badge type="span" textContent="Inactive" variant="outline" size="md" />
  <Badge type="span" textContent="Error" variant="destructive" size="md" />
</div>

Preview:

ActivePendingInactiveError

Common Use Cases

Status Indicators

<div className="space-y-2">
  <div className="flex items-center gap-2">
    <span>User Status:</span>
    <Badge type="span" textContent="Online" variant="default" size="md" />
  </div>
  <div className="flex items-center gap-2">
    <span>Order Status:</span>
    <Badge type="span" textContent="Shipped" variant="secondary" size="md" />
  </div>
</div>

Category Tags

<div className="flex flex-wrap gap-2">
  <Badge type="span" textContent="React" variant="outline" size="md" />
  <Badge type="span" textContent="TypeScript" variant="outline" size="md" />
  <Badge type="span" textContent="Next.js" variant="outline" size="md" />
</div>

Notification Counts

<div className="flex items-center gap-2">
  <span>Notifications</span>
  <Badge type="span" textContent="5" variant="destructive" size="md" />
</div>

Interactive Badges

<Badge 
  type="button"
  textContent="Click me"
  variant="default"
  size="md"
  onClick={() => console.log('Badge clicked')}
/>

Accessibility

The Badge component includes proper accessibility features:

  • Semantic HTML: Uses appropriate HTML elements based on the type prop
  • Screen readers: Properly announces badge content
  • Keyboard navigation: Supports keyboard interaction when used as buttons or links
  • Color contrast: Ensures sufficient contrast for all variants

Best Practices

1. Appropriate Variant Selection

Choose variants that match the content and context.

// ✅ Good - Appropriate variants for different states
<Badge type="span" textContent="Success" variant="default" size="md" />
<Badge type="span" textContent="Warning" variant="secondary" size="md" />
<Badge type="span" textContent="Error" variant="destructive" size="md" />

2. Consistent Usage

Use badges consistently throughout your application.

// ✅ Good - Consistent badge usage for status
{users.map(user => (
  <div key={user.id}>
    <span>{user.name}</span>
    <Badge 
      type="span" 
      textContent={user.status} 
      variant={user.status === 'active' ? 'default' : 'secondary'}
      size="md"
    />
  </div>
))}

3. Meaningful Content

Use clear, concise text that conveys the intended meaning.

// ❌ Bad - Unclear meaning
<Badge type="span" textContent="X" variant="default" size="md" />


// ✅ Good - Clear meaning
<Badge type="span" textContent="Premium" variant="default" size="md" />

4. Appropriate Sizing

Keep badge content short and concise.

// ❌ Bad - Too long
<Badge type="span" textContent="This is a very long badge text that should be avoided" variant="default" size="md" />


// ✅ Good - Concise
<Badge type="span" textContent="New" variant="default" size="md" />

Customization

Custom Variants

You can create custom badge styles using CSS classes:

<Badge 
  type="span"
  textContent="Custom"
  variant="outline"
  size="md"
  className="bg-gradient-to-r from-purple-500 to-pink-500 text-white border-0"
/>

Icon Integration

Use icons to enhance badge meaning:

import { StarIcon } from '@heroicons/react/24/solid'


<Badge 
  type="span"
  textContent="Featured"
  variant="default"
  size="md"
  icon={<StarIcon className="w-3 h-3" />}
/>
  • Tag: Similar to badge but typically used for categorization
  • Chip: Interactive badge-like component for selection
  • Label: Text label component
  • Status: Specialized status indicator component

API Reference

For the complete API reference and advanced usage patterns, see the Badge API documentation.

Edit this page on GitHub
previousAvatar