Badge

Small status or count label with semantic color variants.

Installation

pnpm dlx shadcn@latest add https://rdf.dev.360online.com/r/badge.json

Installs to @/components/ui/badge.

Manual installation

Install the dependencies:

pnpm add @base-ui/react@^1.8.0 class-variance-authority@^0.7.1

Copy the source into your project:

components/ui/badge.tsx

import { mergeProps } from '@base-ui/react/merge-props'
import { useRender } from '@base-ui/react/use-render'
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'

const badgeVariants = cva(
	'group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!',
	{
		variants: {
			variant: {
				default: 'bg-muted text-foreground [a]:hover:bg-muted/80',
				secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
				destructive: 'bg-destructive-subtle text-destructive-subtle-foreground [a]:hover:bg-destructive-subtle/60',
				info: 'bg-info-subtle text-info-subtle-foreground [a]:hover:bg-info-subtle/60',
				success: 'bg-success-subtle text-success-subtle-foreground [a]:hover:bg-success-subtle/60',
				warning: 'bg-warning-subtle text-warning-subtle-foreground [a]:hover:bg-warning-subtle/60',
				outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
				ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
				link: 'text-primary underline underline-offset-4',
			},
		},
		defaultVariants: {
			variant: 'default',
		},
	},
)

function Badge({
	className,
	variant = 'default',
	render,
	...props
}: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>) {
	return useRender({
		defaultTagName: 'span',
		props: mergeProps<'span'>(
			{
				className: cn(badgeVariants({ variant }), className),
			},
			props,
		),
		render,
		state: {
			slot: 'badge',
			variant,
		},
	})
}

export { Badge, badgeVariants }

A versatile badge component for displaying short status descriptors, labels, or counts. Built with class-variance-authority for flexible styling and variants, it provides a consistent way to show metadata or status.

Features

Nine visual variants: default, secondary, destructive, info, success, warning, outline, ghost, link
Single compact size (20px high, pill shaped)
Icon support with data-icon="inline-start" / data-icon="inline-end" (icons are sized to 12px automatically)
Polymorphic rendering with the render prop (e.g. render as a link, with hover styles)
Exposes data-slot="badge" and data-variant for styling hooks
Focus ring and aria-invalid styling

Usage

import { Badge } from '@/components/ui/badge'
import { BadgeCheck } from 'lucide-react'

// Basic usage
export function StatusBadge() {
  return <Badge>Draft</Badge>
}

// With variants
export function VariantBadges() {
  return (
    <div className="flex gap-2">
      <Badge variant="default">Draft</Badge>
      <Badge variant="secondary">Submitted</Badge>
      <Badge variant="destructive">Rejected</Badge>
      <Badge variant="info">In review</Badge>
      <Badge variant="success">Approved</Badge>
      <Badge variant="warning">Awaiting documents</Badge>
      <Badge variant="outline">Archived</Badge>
      <Badge variant="ghost">Public record</Badge>
    </div>
  )
}

// With icon
export function SignedBadge() {
  return (
    <Badge variant="success">
      <BadgeCheck data-icon="inline-start" />
      Signed with BankID
    </Badge>
  )
}

// As link
export function CaseLink() {
  return (
    <Badge render={<a href="/cases/2026-04812" />} variant="link">
      2026-04812
    </Badge>
  )
}

Examples

Default

All Variants

Each variant with the kind of label it suits.

import { Badge } from '@/components/ui/badge'

const VARIANTS = [
  { variant: 'default', label: 'Draft' },
  { variant: 'secondary', label: 'Submitted' },
  { variant: 'destructive', label: 'Rejected' },
  { variant: 'info', label: 'In review' },
  { variant: 'success', label: 'Approved' },
  { variant: 'warning', label: 'Awaiting documents' },
  { variant: 'outline', label: 'Archived' },
  { variant: 'ghost', label: 'Public record' },
  { variant: 'link', label: '2026-04812' },
] as const

export function BadgeAllVariants() {
  return (
    <div className="grid grid-cols-2 gap-x-8 gap-y-5 sm:grid-cols-3">
      {VARIANTS.map(({ variant, label }) => (
        <div key={variant} className="flex flex-col items-center gap-2">
          <Badge variant={variant}>{label}</Badge>
          <span className="text-xs text-muted-foreground">{variant}</span>
        </div>
      ))}
    </div>
  )
}

Case Status

Status badges in a case list: info for a case in progress, warning for one waiting on the applicant, success for an approval and destructive for a rejection. Each status also has an icon and text, so it never relies on colour alone.

<Badge variant="warning">
  <TriangleAlertIcon data-icon="inline-start" />
  Awaiting documents
</Badge>

import { BadgeCheckIcon, CircleXIcon, ClockIcon, InboxIcon, TriangleAlertIcon } from 'lucide-react'
import { Badge } from '@/components/ui/badge'

const CASES = [
  {
    id: '2026-04812',
    title: 'Extension of detached house, Storgatan 14',
    status: (
      <Badge variant="outline">
        <InboxIcon data-icon="inline-start" />
        Received
      </Badge>
    ),
  },
  {
    id: '2026-04655',
    title: 'Parking permit for residents, zone C',
    status: (
      <Badge variant="info">
        <ClockIcon data-icon="inline-start" />
        In review
      </Badge>
    ),
  },
  {
    id: '2026-04390',
    title: 'Environmental permit, Norrby workshop',
    status: (
      <Badge variant="warning">
        <TriangleAlertIcon data-icon="inline-start" />
        Awaiting documents
      </Badge>
    ),
  },
  {
    id: '2026-03117',
    title: 'Public records request, council minutes',
    status: (
      <Badge variant="success">
        <BadgeCheckIcon data-icon="inline-start" />
        Approved
      </Badge>
    ),
  },
  {
    id: '2026-02984',
    title: 'Sign permit, Hamngatan 3',
    status: (
      <Badge variant="destructive">
        <CircleXIcon data-icon="inline-start" />
        Rejected
      </Badge>
    ),
  },
]

export function BadgeCaseStatus() {
  return (
    <ul className="flex w-full max-w-md flex-col divide-y rounded-lg border">
      {CASES.map((item) => (
        <li key={item.id} className="flex items-center justify-between gap-4 px-4 py-3">
          <div className="flex min-w-0 flex-col">
            <span className="truncate text-sm font-medium">{item.title}</span>
            <span className="text-xs text-muted-foreground tabular-nums">{item.id}</span>
          </div>
          {item.status}
        </li>
      ))}
    </ul>
  )
}

With Icons

Mark icons with data-icon so the badge tightens its padding on that side.

import { ArrowUpRightIcon, BadgeCheckIcon, Loader2Icon, TriangleAlertIcon } from 'lucide-react'
import { Badge } from '@/components/ui/badge'

export function BadgeWithIcons() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Badge variant="success">
        <BadgeCheckIcon data-icon="inline-start" />
        Signed with BankID
      </Badge>
      <Badge variant="destructive">
        <TriangleAlertIcon data-icon="inline-start" />
        Payment overdue
      </Badge>
      <Badge variant="outline">
        <Loader2Icon data-icon="inline-start" className="animate-spin" />
        Syncing with archive
      </Badge>
      <Badge variant="outline">
        Open in e-archive
        <ArrowUpRightIcon data-icon="inline-end" />
      </Badge>
    </div>
  )
}

Counts

Use min-w-5 px-1 tabular-nums for numeric counters, here in a case inbox navigation.

import { FolderOpenIcon, InboxIcon, MailIcon, TriangleAlertIcon } from 'lucide-react'
import { Badge } from '@/components/ui/badge'

const INBOX = [
  { label: 'My cases', icon: FolderOpenIcon, count: '8', variant: 'default' },
  { label: 'Messages', icon: MailIcon, count: '3', variant: 'default' },
  { label: 'Overdue', icon: TriangleAlertIcon, count: '12', variant: 'destructive' },
  { label: 'Unassigned', icon: InboxIcon, count: '99+', variant: 'outline' },
] as const

export function BadgeCounts() {
  return (
    <nav aria-label="Case inbox" className="w-full max-w-60">
      <ul className="flex flex-col gap-0.5">
        {INBOX.map(({ label, icon: Icon, count, variant }) => (
          <li key={label}>
            <a
              href={`#${label.toLowerCase().replace(' ', '-')}`}
              className="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-muted"
            >
              <Icon aria-hidden="true" className="size-4 text-muted-foreground" />
              <span className="flex-1">{label}</span>
              <Badge variant={variant} className="min-w-5 px-1 tabular-nums">
                {count}
              </Badge>
            </a>
          </li>
        ))}
      </ul>
    </nav>
  )
}

As Link

With the render prop, the badge renders as another element, such as a button that removes a filter. Variants include hover styles for anchors.

import { XIcon } from 'lucide-react'
import { Badge } from '@/components/ui/badge'

export function BadgeAsLink() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <p className="text-sm text-muted-foreground">Showing 24 cases filtered by</p>
      <div className="flex flex-wrap gap-2">
        {['Building permits', 'Unit: Norr', 'Received in 2026'].map((filter) => (
          <Badge key={filter} render={<button type="button" aria-label={`Remove filter ${filter}`} />} variant="outline">
            {filter}
            <XIcon data-icon="inline-end" />
          </Badge>
        ))}
        <Badge render={<button type="button" />} variant="link">
          Clear all
        </Badge>
      </div>
    </div>
  )
}

Props

variant - Visual style variant ('default' | 'secondary' | 'destructive' | 'info' | 'success' | 'warning' | 'outline' | 'ghost' | 'link', default 'default')
render - The element to render instead of a span, e.g. render={<a href="…" />}
className - Additional CSS classes
All HTML span attributes

badgeVariants is also exported for applying badge styles to other elements.

Variants

default - Muted background with foreground text
secondary - Muted, lower emphasis style
destructive - Soft tinted style for errors or failures
info - Soft primary tint for neutral progress, such as a case in review
success - Soft green tint for completed or approved states
warning - Soft amber tint for states that need attention, such as missing documents
outline - Bordered style with transparent background
ghost - No background until hovered
link - Underlined text link style

Accessibility

Renders a span by default, so it does not add semantics
Status is also carried by the text, and ideally an icon, never by colour alone: info, success, warning and destructive add tone, the label says what it means
The status variants keep at least 4.5:1 text contrast on their tint in light and dark mode, in both themes
When rendering as a link with render, the badge keeps the anchor semantics and focus ring

Best Practices

Content Guidelines:
- Keep text concise
- Use clear language
- Consider localization
Visual Design:
- Use destructive only for errors
- Use success, warning and info for status, and keep one meaning per variant across an app
- Prefer secondary or outline for neutral metadata
Icon Usage:
- Use relevant icons
- Mark them with data-icon for correct spacing

Button
Label