Badge

Compact labels for displaying status, categories, or metadata with semantic colors and optional icons.

VerifiedActivePending

Installation

Usage

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

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

Examples

Sizes

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

With Icons

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

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

Colors

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

API Reference

Badge

Extends span element props.

Prop	Type	Default	Description
`size`	`'sm'`, `'md'`, `'lg'`	`'sm'`	Badge size
`color`	See colors below	`'primary'`	Color scheme
`prefixIcon`	`React.ReactNode`	-	Icon before the text
`suffixIcon`	`React.ReactNode`	-	Icon after the text
`className`	`string`	-	Additional CSS classes
`children`	`React.ReactNode`	-	Badge content

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

CLI

Manual

On this page