Github

Badge

PreviousNext

Same look of HeroUI's badge

BadgeNotifications
import { BellIcon } from "lucide-react";
import { Badge } from "@/components/ui/badge";
export function BadgeDemo() {	return (		<div className="flex items-center gap-3">			<Badge>Badge</Badge>			<Badge size="lg" variant="primary">				<BellIcon data-icon="inline-start" />				Notifications			</Badge>		</div>	);}

Installation

pnpm dlx shadcn@latest add @herocn/badge

Usage

import { Badge } from "@/components/ui/badge"
<Badge>Badge</Badge><Badge variant="success">Success</Badge><Badge size="sm">Small badge</Badge>

Examples

Variants

Use the variant prop to change the variant of the badge.

DefaultPrimarySuccessWarningDestructive
import { Badge } from "@/components/ui/badge";
export function BadgeVariants() {	return (		<div className="flex flex-wrap items-center gap-2">			<Badge>Default</Badge>			<Badge variant="primary">Primary</Badge>			<Badge variant="success">Success</Badge>			<Badge variant="warning">Warning</Badge>			<Badge variant="destructive">Destructive</Badge>		</div>	);}

Sizes

Use the size prop to change the size of the badge.

SmallDefaultLarge
import { Badge } from "@/components/ui/badge";
export function BadgeSizes() {	return (		<div className="flex flex-wrap items-center gap-2">			<Badge size="sm">Small</Badge>			<Badge>Default</Badge>			<Badge size="lg">Large</Badge>		</div>	);}

With Icon

You can render an icon inside the badge. Use data-icon="inline-start" to render the icon on the left and data-icon="inline-end" to render the icon on the right.

NotificationsNew
import { BellIcon, CheckCheckIcon } from "lucide-react";
import { Badge } from "@/components/ui/badge";
export function BadgeIcon() {	return (		<div className="flex flex-wrap items-center gap-2">			<Badge>				<BellIcon data-icon="inline-start" />				Notifications			</Badge>			<Badge variant="success">				<CheckCheckIcon data-icon="inline-end" />				New			</Badge>		</div>	);}

Custom Colors

You can customize the colors of a badge by adding custom classes such as bg-green-50 dark:bg-green-800 to the Badge component.

Custom greenCustom blueCustom amber
import { Badge } from "@/components/ui/badge";
export function BadgeColors() {	return (		<div className="flex flex-wrap items-center gap-2">			<Badge className="bg-green-50 text-green-900 dark:bg-green-800 dark:text-green-50">				Custom green			</Badge>			<Badge className="bg-blue-50 text-blue-900 dark:bg-blue-800 dark:text-blue-50">				Custom blue			</Badge>			<Badge className="bg-amber-50 text-amber-900 dark:bg-amber-800 dark:text-amber-50">				Custom amber			</Badge>		</div>	);}

RTL

جديدموثققيد الانتظارالإشعارات
"use client";
import {	BellIcon,	CheckCheckIcon,	StarIcon,	TriangleAlertIcon,} from "lucide-react";
import {	type Translations,	useTranslation,} from "@/components/language-selector";import { Badge } from "@/components/ui/badge";
const translations: Translations = {	en: {		dir: "ltr",		values: {			new: "New",			verified: "Verified",			pending: "Pending",			notifications: "Notifications",		},	},	ar: {		dir: "rtl",		values: {			new: "جديد",			verified: "موثق",			pending: "قيد الانتظار",			notifications: "الإشعارات",		},	},	he: {		dir: "rtl",		values: {			new: "חדש",			verified: "מאומת",			pending: "ממתין",			notifications: "התראות",		},	},};
export function BadgeRtl() {	const { dir, language, t } = useTranslation(translations, "ar");
	return (		<div			className="flex flex-wrap items-center gap-2"			lang={language}			dir={dir}		>			<Badge variant="primary">				<StarIcon data-icon="inline-start" />				{t.new}			</Badge>			<Badge variant="success">				<CheckCheckIcon data-icon="inline-start" />				{t.verified}			</Badge>			<Badge variant="warning">				<TriangleAlertIcon data-icon="inline-start" />				{t.pending}			</Badge>			<Badge>				<BellIcon data-icon="inline-start" />				{t.notifications}			</Badge>		</div>	);}

API Reference

Badge

The Badge component displays a badge or a component that looks like a badge.

PropTypeDefault