Badge

React Badge components are used to display small labels, counts, status indicators, or metadata with semantic colors and optional icons. They are commonly used for notifications, categories, tags, and metadata across interfaces.

This Badge component is built with React and styled using Tailwind CSS, giving developers control over size, color, and icon placement.

Installation

Usage

Import the component and pass the required props.

import { Badge } from "@/components/badge";

export default () => <Badge color="primary">New</Badge>;

Examples

Sizes

Use different sizes to match the surrounding UI.

<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>
<Badge size="lg">Large</Badge>

With Icons

Add icons before or after the badge text.

import { CheckIcon, XIcon } from "lucide-react";

<Badge prefixIcon={<CheckIcon />}>Verified</Badge>
<Badge suffixIcon={<XIcon />}>Remove</Badge>
<Badge prefixIcon={<CheckIcon />} suffixIcon={<XIcon />}>Both</Badge>

Colors

Use color variants to convey meaning or status.

<Badge color="primary">Primary</Badge>
<Badge color="success">Success</Badge>
<Badge color="warning">Warning</Badge>
// ...and more

API Reference

Badge

Extends span element props.

Color Options

'gray', 'primary', 'error', 'warning', 'success', 'cyan', 'sky', 'blue', 'violet', 'purple', 'pink', 'rose', 'orange'

Notes

• Icons are automatically sized to 12px (0.75rem) via the [&>svg]:size-3 class
• Padding adjusts automatically based on the presence of prefix/suffix icons
• All standard span HTML attributes are supported