Badge

<Badge
  id="custom-badge-badge"
  variant="default"
  className=""
  style={{ borderRadius: "4px", transition: "background-color 0.2s, color 0.2s" }}
>
  Badge
</Badge>

Introduction

The Badge component provides a simple way to highlight and categorize content within your application. Use it for displaying statuses, counts, tags, or any other concise metadata.

Installation

npx axionjs-ui add badge

File Structure

Here’s the file structure for the Badge component:

Variants

Default

Secondary

Destructive

Outline

Examples

Status Indicators

Different Sizes

With Counters

Custom Colors

Tags & Categories

Props

The Badge component comes with the following customizable props:

Customization

The Badge component can be customized further by:

// In your badge.tsx file
const badgeVariants = cva(
  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default:
          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
        secondary:
          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive:
          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
        outline: "text-foreground",
        // Add new variants
        success: "border-transparent bg-green-500 text-white shadow hover:bg-green-600",
        warning: "border-transparent bg-yellow-500 text-black shadow hover:bg-yellow-600",
        info: "border-transparent bg-blue-500 text-white shadow hover:bg-blue-600",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
);

Use Cases

The Badge component is perfect for:

• Status Indicators: Highlight statuses like “Active,” “Inactive,” or “Pending.”
• Tags & Categories: Label content, filters, or metadata for easy identification.
• Counters: Display notification counts or other numerical values.
• Labels: Add contextual information to UI elements.
• Feature Flags: Indicate new, beta, or deprecated features.

Accessibility

The Badge component follows these accessibility best practices:

• Color Contrast: All variants maintain proper color contrast ratios for readability.
• Screen Reader Support: Uses meaningful content that provides context to assistive technologies.
• Keyboard Navigation: Fully navigable when used with interactive elements.
• Focus Indicators: Includes visible focus rings when the badge is interactive.

Features

The Badge component provides the following features:

• Multiple Variants: Choose from default, secondary, destructive, and outline styles to match your design needs.
• Flexible Styling: Easily customize with additional classes or inline styles.
• Status Indicators: Combine with colored dots for status representation.
• Counters: Display numerical values alongside labels.
• Responsive: Works well at any screen size.
• Accessibility: Built with screen readers and keyboard navigation in mind.

Conclusion

The Badge component is a versatile, accessible, and lightweight solution for adding visual indicators to your application. Its flexibility through variants and customization options makes it adaptable to a wide range of use cases while maintaining a consistent design language across your Next.js application.