Components

Badge

Small status or label. Use it to tag categories, statuses, or other short information.

example.tsx

Badge

Import

tsx

import { AppBadge } from "@/components/primitives/AppBadge"

Variants

Use the variant prop to change the visual style.

DefaultSecondaryOutlineDestructive

Variant	When to use
default	Default style. Primary or highlighted content.
secondary	Lower emphasis. For supporting information.
outline	Minimal style. No background color, just border.
destructive	For destructive actions or errors. Renders in red.

With icon

Place a lucide icon before the label. Icons inherit the badge text color automatically.

VerifiedPendingFailedFeatured

Status

Use an outline badge with a colored dot and custom className to communicate system state.

ActivePendingInactiveError

As link

Use asChild to render the badge as an anchor tag for clickable tags.

New Design Open Source

Removable

Add a close button inside the badge for removable filter tags.

ReactTypeScriptTailwind

With spinner

Embed an AppSpinner inside a badge to communicate an in-progress state such as deleting or generating.

DeletingGenerating

Notification count

Position a badge absolutely over a trigger element using -top-2 -right-4 and rounded-full.

Notifications4

Messages12

API Reference

AppBadge extends all native <span> HTML attributes.

Prop	Type	Default	Description
variant	"default" \| "secondary" \| "outline" \| "destructive"	"default"	Visual style of the badge.
className	string	—	Additional Tailwind classes merged via cn(). Prefer the wrapper pattern for reusable overrides.

Source

src/components/primitives/AppBadge.tsx

"use client"

import { Badge, badgeVariants } from "@/components/ui/badge"
import type { VariantProps } from "class-variance-authority"

type AppBadgeProps = React.ComponentProps<typeof Badge> &
  VariantProps<typeof badgeVariants>

function AppBadge(props: AppBadgeProps) {
  return <Badge {...props} />
}

export { AppBadge, type AppBadgeProps }