Skip to content
Nerdfishui
Esc
↑↓navigate↵open⌘Jpreview
On this page

Badge

Displays a badge or a component that looks like a badge.

'use client'

import { Badge } from '@nerdfish/react/badge'

export default function BadgeExample() {
	return (
		<div className="flex items-center gap-4">
			<Badge>Badge</Badge>
			<Badge variant="muted">Muted</Badge>
			<Badge variant="outline">Outline</Badge>
			<Badge variant="destructive">Destructive</Badge>
			<Badge variant="success">Success</Badge>
			<Badge variant="warning">Warning</Badge>
			<Badge variant="info">Info</Badge>
		</div>
	)
}

With Icon

'use client'

import { Badge } from '@nerdfish/react/badge'
import { Activity, Mail, Tag } from 'lucide-react'

export default function BadgeWithIconExample() {
	return (
		<div className="flex flex-col items-center gap-6">
			<div className="flex items-center gap-4">
				<Badge variant="default" appearance="ghost">
					<Tag /> Ghost
				</Badge>
				<Badge variant="default">
					<Mail /> Solid
				</Badge>
				<Badge variant="default" appearance="muted">
					<Activity /> muted
				</Badge>
				<Badge variant="default" appearance="outline">
					<Tag /> outline
				</Badge>
			</div>
			<div className="flex items-center gap-4">
				<Badge variant="muted" appearance="ghost">
					<Tag /> Ghost
				</Badge>
				<Badge variant="muted">
					<Mail /> Solid
				</Badge>
				<Badge variant="muted" appearance="muted">
					<Activity /> muted
				</Badge>
				<Badge variant="muted" appearance="outline">
					<Tag /> outline
				</Badge>
			</div>

			<div className="flex items-center gap-4">
				<Badge variant="success" appearance="ghost">
					<Tag /> Ghost
				</Badge>
				<Badge variant="success">
					<Mail /> Solid
				</Badge>
				<Badge variant="success" appearance="muted">
					<Activity /> muted
				</Badge>
				<Badge variant="success" appearance="outline">
					<Tag /> outline
				</Badge>
			</div>
			<div className="flex items-center gap-4">
				<Badge variant="info" appearance="ghost">
					<Tag /> Ghost
				</Badge>
				<Badge variant="info">
					<Mail /> Solid
				</Badge>
				<Badge variant="info" appearance="muted">
					<Activity /> muted
				</Badge>
				<Badge variant="info" appearance="outline">
					<Tag /> outline
				</Badge>
			</div>
			<div className="flex items-center gap-4">
				<Badge variant="warning" appearance="ghost">
					<Tag /> Ghost
				</Badge>
				<Badge variant="warning">
					<Mail /> Solid
				</Badge>
				<Badge variant="warning" appearance="muted">
					<Activity /> muted
				</Badge>
				<Badge variant="warning" appearance="outline">
					<Tag /> outline
				</Badge>
			</div>
			<div className="flex items-center gap-4">
				<Badge variant="destructive" appearance="ghost">
					<Tag /> Ghost
				</Badge>
				<Badge variant="destructive">
					<Mail /> Solid
				</Badge>
				<Badge variant="destructive" appearance="muted">
					<Activity /> muted
				</Badge>
				<Badge variant="destructive" appearance="outline">
					<Tag /> outline
				</Badge>
			</div>
		</div>
	)
}

Size

'use client'

import { Badge } from '@nerdfish/react/badge'

export default function BadgeSizeExample() {
	return (
		<div className="flex flex-col items-center justify-center gap-6">
			<div className="flex items-center gap-4">
				<Badge variant="default" size="xs">
					Xsmall
				</Badge>
				<Badge variant="default" size="sm">
					Small
				</Badge>
				<Badge variant="default">Medium</Badge>
				<Badge variant="default" size="lg">
					Large
				</Badge>
			</div>
			<div className="flex items-center gap-4">
				<Badge variant="default" shape="circle" size="xs">
					5
				</Badge>
				<Badge variant="default" shape="circle" size="sm">
					5
				</Badge>
				<Badge variant="default" shape="circle">
					5
				</Badge>
				<Badge variant="default" shape="circle" size="lg">
					5
				</Badge>
			</div>
		</div>
	)
}

With Dot

'use client'

import { Badge, BadgeDot } from '@nerdfish/react/badge'

export default function BadgeWithDotExample() {
	return (
		<div className="flex flex-col items-center gap-6">
			<div className="flex items-center gap-4">
				<Badge appearance="ghost">
					<BadgeDot /> Ghost
				</Badge>
				<Badge>
					<BadgeDot /> Default
				</Badge>
				<Badge appearance="muted">
					<BadgeDot /> Muted
				</Badge>
				<Badge appearance="outline">
					<BadgeDot /> Outline
				</Badge>
			</div>
			<div className="flex items-center gap-4">
				<Badge variant="success" appearance="ghost">
					<BadgeDot /> Ghost
				</Badge>
				<Badge variant="success">
					<BadgeDot /> Default
				</Badge>
				<Badge variant="success" appearance="muted">
					<BadgeDot /> Muted
				</Badge>
				<Badge variant="success" appearance="outline">
					<BadgeDot /> Outline
				</Badge>
			</div>
			<div className="flex items-center gap-4">
				<Badge variant="info" appearance="ghost">
					<BadgeDot /> Ghost
				</Badge>
				<Badge variant="info">
					<BadgeDot /> Default
				</Badge>
				<Badge variant="info" appearance="muted">
					<BadgeDot /> Muted
				</Badge>
				<Badge variant="info" appearance="outline">
					<BadgeDot /> Outline
				</Badge>
			</div>
			<div className="flex items-center gap-4">
				<Badge variant="warning" appearance="ghost">
					<BadgeDot /> Ghost
				</Badge>
				<Badge variant="warning">
					<BadgeDot /> Default
				</Badge>
				<Badge variant="warning" appearance="muted">
					<BadgeDot /> Muted
				</Badge>
				<Badge variant="warning" appearance="outline">
					<BadgeDot /> Outline
				</Badge>
			</div>
			<div className="flex items-center gap-4">
				<Badge variant="destructive" appearance="ghost">
					<BadgeDot /> Ghost
				</Badge>
				<Badge variant="destructive">
					<BadgeDot /> Default
				</Badge>
				<Badge variant="destructive" appearance="muted">
					<BadgeDot /> Muted
				</Badge>
				<Badge variant="destructive" appearance="outline">
					<BadgeDot /> Outline
				</Badge>
			</div>
		</div>
	)
}

Remove Button

'use client'

import { Badge, BadgeButton } from '@nerdfish/react/badge'
import { XIcon } from 'lucide-react'

export default function BadgeRemoveButtonExample() {
	return (
		<div className="flex flex-col items-center gap-4">
			<div className="flex items-center gap-4">
				<Badge variant="muted" appearance="ghost">
					Ghost
					<BadgeButton>
						<XIcon />
					</BadgeButton>
				</Badge>
				<Badge variant="muted">
					Solid
					<BadgeButton>
						<XIcon />
					</BadgeButton>
				</Badge>
				<Badge variant="muted" appearance="muted">
					Light
					<BadgeButton>
						<XIcon />
					</BadgeButton>
				</Badge>
				<Badge variant="outline">
					Outline
					<BadgeButton>
						<XIcon />
					</BadgeButton>
				</Badge>
			</div>
			<div className="flex items-center gap-4">
				<Badge variant="default" appearance="ghost">
					Ghost
					<BadgeButton>
						<XIcon />
					</BadgeButton>
				</Badge>
				<Badge variant="default">
					Solid
					<BadgeButton>
						<XIcon />
					</BadgeButton>
				</Badge>
				<Badge variant="default" appearance="muted">
					muted
					<BadgeButton>
						<XIcon />
					</BadgeButton>
				</Badge>
				<Badge variant="default" appearance="outline">
					Outline
					<BadgeButton>
						<XIcon />
					</BadgeButton>
				</Badge>
			</div>
			<div className="flex items-center gap-4">
				<Badge variant="success" appearance="ghost">
					Ghost
					<BadgeButton>
						<XIcon />
					</BadgeButton>
				</Badge>
				<Badge variant="success">
					Solid
					<BadgeButton>
						<XIcon />
					</BadgeButton>
				</Badge>
				<Badge variant="success" appearance="muted">
					muted
					<BadgeButton>
						<XIcon />
					</BadgeButton>
				</Badge>
				<Badge variant="success" appearance="outline">
					Outline
					<BadgeButton>
						<XIcon />
					</BadgeButton>
				</Badge>
			</div>
			<div className="flex items-center gap-4">
				<Badge variant="info" appearance="ghost">
					Ghost
					<BadgeButton>
						<XIcon />
					</BadgeButton>
				</Badge>
				<Badge variant="info">
					Solid
					<BadgeButton>
						<XIcon />
					</BadgeButton>
				</Badge>
				<Badge variant="info" appearance="muted">
					muted
					<BadgeButton>
						<XIcon />
					</BadgeButton>
				</Badge>
				<Badge variant="info" appearance="outline">
					Outline
					<BadgeButton>
						<XIcon />
					</BadgeButton>
				</Badge>
			</div>
			<div className="flex items-center gap-4">
				<Badge variant="warning" appearance="ghost">
					Ghost
					<BadgeButton>
						<XIcon />
					</BadgeButton>
				</Badge>
				<Badge variant="warning">
					Solid
					<BadgeButton>
						<XIcon />
					</BadgeButton>
				</Badge>
				<Badge variant="warning" appearance="muted">
					muted
					<BadgeButton>
						<XIcon />
					</BadgeButton>
				</Badge>
				<Badge variant="warning" appearance="outline">
					Outline
					<BadgeButton>
						<XIcon />
					</BadgeButton>
				</Badge>
			</div>
			<div className="flex items-center gap-4">
				<Badge variant="destructive" appearance="ghost">
					Ghost
					<BadgeButton>
						<XIcon />
					</BadgeButton>
				</Badge>
				<Badge variant="destructive">
					Solid
					<BadgeButton>
						<XIcon />
					</BadgeButton>
				</Badge>
				<Badge variant="destructive" appearance="muted">
					muted
					<BadgeButton>
						<XIcon />
					</BadgeButton>
				</Badge>
				<Badge variant="destructive" appearance="outline">
					Outline
					<BadgeButton>
						<XIcon />
					</BadgeButton>
				</Badge>
			</div>
		</div>
	)
}

Disabled

'use client'

import { Badge } from '@nerdfish/react/badge'

export default function BadgeDisabledExample() {
	return (
		<div className="flex flex-col items-center gap-6">
			<div className="flex items-center gap-4">
				<Badge variant="default" appearance="ghost" disabled>
					Ghost
				</Badge>
				<Badge variant="default" disabled>
					Solid
				</Badge>
				<Badge variant="default" appearance="muted" disabled>
					muted
				</Badge>
				<Badge variant="default" appearance="outline" disabled>
					outline
				</Badge>
			</div>
			<div className="flex items-center gap-4">
				<Badge variant="muted" appearance="ghost" disabled>
					Ghost
				</Badge>
				<Badge variant="muted" disabled>
					Solid
				</Badge>
				<Badge variant="muted" appearance="muted" disabled>
					muted
				</Badge>
				<Badge variant="muted" appearance="outline" disabled>
					outline
				</Badge>
			</div>

			<div className="flex items-center gap-4">
				<Badge variant="success" appearance="ghost" disabled>
					Ghost
				</Badge>
				<Badge variant="success" disabled>
					Solid
				</Badge>
				<Badge variant="success" appearance="muted" disabled>
					muted
				</Badge>
				<Badge variant="success" appearance="outline" disabled>
					outline
				</Badge>
			</div>
			<div className="flex items-center gap-4">
				<Badge variant="info" appearance="ghost" disabled>
					Ghost
				</Badge>
				<Badge variant="info" disabled>
					Solid
				</Badge>
				<Badge variant="info" appearance="muted" disabled>
					muted
				</Badge>
				<Badge variant="info" appearance="outline" disabled>
					outline
				</Badge>
			</div>
			<div className="flex items-center gap-4">
				<Badge variant="warning" appearance="ghost" disabled>
					Ghost
				</Badge>
				<Badge variant="warning" disabled>
					Solid
				</Badge>
				<Badge variant="warning" appearance="muted" disabled>
					muted
				</Badge>
				<Badge variant="warning" appearance="outline" disabled>
					outline
				</Badge>
			</div>
			<div className="flex items-center gap-4">
				<Badge variant="destructive" appearance="ghost" disabled>
					Ghost
				</Badge>
				<Badge variant="destructive" disabled>
					Solid
				</Badge>
				<Badge variant="destructive" appearance="muted" disabled>
					muted
				</Badge>
				<Badge variant="destructive" appearance="outline" disabled>
					outline
				</Badge>
			</div>
		</div>
	)
}