Creative Tim UICreative Tim UI

Shadcn Badge

PreviousNext

A small status descriptor for UI elements, typically used to display counts, notifications, or status indicators on buttons, avatars, and other components.

5
import { Bell } from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"

export function BadgeDemo() {
  return (
    <div className="relative inline-flex">
      <Button variant="secondary" size="icon">
        <Bell className="h-4 w-4" />
      </Button>
      <Badge className="absolute -top-2 -right-2 flex size-5 items-center justify-center rounded-full p-0 text-xs">
        5
      </Badge>
    </div>
  )
}

Installation

pnpm dlx @creative-tim/ui@latest add badge

Usage

import { Badge } from "@/components/ui/badge"
<Badge>New</Badge>

Examples

Badge Colors

Badge components with different color schemes (primary, secondary, info, success, warning, error) to visually distinguish between different types of notifications and status indicators.

5
5
5
5
5
5
import { Bell } from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"

export function BadgeColors() {
  return (
    <div className="flex w-full justify-center gap-8">
      <div className="relative inline-flex">
        <Button variant="secondary" size="icon">
          <Bell className="h-4 w-4" />
        </Button>
        <Badge className="absolute -top-2 -right-2 flex size-5 items-center justify-center rounded-full p-0 text-xs">
          5
        </Badge>
      </div>
      <div className="relative inline-flex">
        <Button variant="secondary" size="icon">
          <Bell className="h-4 w-4" />
        </Button>
        <Badge
          variant="secondary"
          className="absolute -top-2 -right-2 flex size-5 items-center justify-center rounded-full p-0 text-xs"
        >
          5
        </Badge>
      </div>
      <div className="relative inline-flex">
        <Button variant="secondary" size="icon">
          <Bell className="h-4 w-4" />
        </Button>
        <Badge className="absolute -top-2 -right-2 flex size-5 items-center justify-center rounded-full border-blue-500 bg-blue-500 p-0 text-xs text-white">
          5
        </Badge>
      </div>
      <div className="relative inline-flex">
        <Button variant="secondary" size="icon">
          <Bell className="h-4 w-4" />
        </Button>
        <Badge className="absolute -top-2 -right-2 flex size-5 items-center justify-center rounded-full border-green-500 bg-green-500 p-0 text-xs text-white">
          5
        </Badge>
      </div>
      <div className="relative inline-flex">
        <Button variant="secondary" size="icon">
          <Bell className="h-4 w-4" />
        </Button>
        <Badge className="absolute -top-2 -right-2 flex size-5 items-center justify-center rounded-full border-yellow-500 bg-yellow-500 p-0 text-xs text-white">
          5
        </Badge>
      </div>
      <div className="relative inline-flex">
        <Button variant="secondary" size="icon">
          <Bell className="h-4 w-4" />
        </Button>
        <Badge
          variant="destructive"
          className="absolute -top-2 -right-2 flex size-5 items-center justify-center rounded-full p-0 text-xs"
        >
          5
        </Badge>
      </div>
    </div>
  )
}

Badge Dot

A minimal badge indicator displayed as a small dot, perfect for showing presence status or simple notifications without displaying a count.

import { Bell } from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"

export function BadgeDot() {
  return (
    <div className="relative inline-flex">
      <Button variant="secondary" size="icon">
        <Bell className="h-4 w-4" />
      </Button>
      <Badge className="absolute -top-1 -right-1 size-2 rounded-full p-0" />
    </div>
  )
}

Badge Placement

Badge components positioned at different corners (top-start, top-end, bottom-start, bottom-end) of the parent element, allowing flexible placement based on design requirements.

5
5
5
5
import { Bell } from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"

export function BadgePlacement() {
  return (
    <div className="flex w-full justify-center gap-8">
      <div className="relative inline-flex">
        <Button variant="secondary" size="icon">
          <Bell className="h-4 w-4" />
        </Button>
        <Badge className="absolute -top-2 -left-2 flex size-5 items-center justify-center rounded-full p-0 text-xs">
          5
        </Badge>
      </div>
      <div className="relative inline-flex">
        <Button variant="secondary" size="icon">
          <Bell className="h-4 w-4" />
        </Button>
        <Badge className="absolute -top-2 -right-2 flex size-5 items-center justify-center rounded-full p-0 text-xs">
          5
        </Badge>
      </div>
      <div className="relative inline-flex">
        <Button variant="secondary" size="icon">
          <Bell className="h-4 w-4" />
        </Button>
        <Badge className="absolute -bottom-2 -left-2 flex size-5 items-center justify-center rounded-full p-0 text-xs">
          5
        </Badge>
      </div>
      <div className="relative inline-flex">
        <Button variant="secondary" size="icon">
          <Bell className="h-4 w-4" />
        </Button>
        <Badge className="absolute -right-2 -bottom-2 flex size-5 items-center justify-center rounded-full p-0 text-xs">
          5
        </Badge>
      </div>
    </div>
  )
}

Badge Overlap

Badge components overlaying buttons and avatars with different overlap styles (square and circular), demonstrating how badges can be integrated with various UI elements.

5
5
import { Bell } from "lucide-react"

import { Avatar, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"

export function BadgeOverlap() {
  return (
    <div className="flex w-full items-center justify-center gap-8">
      <div className="relative inline-flex">
        <Button variant="secondary" size="icon" className="rounded-md">
          <Bell className="h-4 w-4" />
        </Button>
        <Badge className="absolute -top-1 -right-1 flex size-5 items-center justify-center rounded-full p-0 text-xs">
          5
        </Badge>
      </div>
      <div className="relative inline-flex">
        <Button variant="secondary" size="icon" className="rounded-md">
          <Bell className="h-4 w-4" />
        </Button>
        <Badge className="absolute -top-1 -right-1 size-2 rounded-full p-0" />
      </div>
      <div className="relative inline-flex">
        <Avatar>
          <AvatarImage
            src="https://images.unsplash.com/photo-1750223642533-1b74b17edae8?auto=format&fit=crop&q=80&w=400&h=400"
            alt="profile-picture"
          />
        </Avatar>
        <Badge className="absolute -right-1 -bottom-1 flex size-5 items-center justify-center rounded-full p-0 text-xs">
          5
        </Badge>
      </div>
      <div className="relative inline-flex">
        <Avatar>
          <AvatarImage
            src="https://images.unsplash.com/photo-1750223642533-1b74b17edae8?auto=format&fit=crop&q=80&w=400&h=400"
            alt="profile-picture"
          />
        </Avatar>
        <Badge className="absolute -right-1 -bottom-1 size-2 rounded-full p-0" />
      </div>
    </div>
  )
}

Badge With Border

A badge component with a border that contrasts with the background, providing better visibility and visual separation from the underlying element.

5
import { Bell } from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"

export function BadgeWithBorder() {
  return (
    <div className="relative inline-flex">
      <Button variant="secondary" size="icon">
        <Bell className="h-4 w-4" />
      </Button>
      <Badge className="border-background absolute -top-2 -right-2 flex size-5 items-center justify-center rounded-full border-2 p-0 text-xs">
        5
      </Badge>
    </div>
  )
}

Badge Custom Styles

A badge component with fully customized styling including custom colors, borders, shadows, and icons, demonstrating how to create unique badge designs for specific use cases.

import { Bell, Check } from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"

export function BadgeCustomStyles() {
  return (
    <div className="relative inline-flex">
      <Button variant="secondary" size="icon">
        <Bell className="h-4 w-4" />
      </Button>
      <Badge className="absolute -top-2 -right-2 flex size-5 items-center justify-center rounded-full border-2 border-white bg-black px-1 py-1 text-white shadow-lg shadow-black/25">
        <Check className="h-3 w-3" />
      </Badge>
    </div>
  )
}

Props

The badge component is built using class-variance-authority and accepts the following props:

Badge

PropTypeDefaultDescription
variant"default" | "secondary" | "destructive" | "outline""default"The visual style variant of the badge
classNamestring-Additional CSS classes to apply to the badge
childrenReactNode-The content to display inside the badge
asChildbooleanfalseWhen true, merges props with the child component

Best Practices

  • Use badges to display counts, notifications, or status indicators
  • Choose appropriate colors to match the message type (error, warning, success, info)
  • Keep badge text concise (typically numbers or short labels)
  • Position badges consistently within your design system
  • Use dot badges for simple presence indicators
  • Ensure sufficient contrast for accessibility
  • Consider using borders for better visibility on complex backgrounds
  • Use custom styles sparingly to maintain design consistency
  • Position badges at corners to avoid interfering with content
  • Update badge counts in real-time for dynamic content

The badge component provides a flexible and accessible way to display status indicators and notifications. It's ideal for notification counts, status badges, presence indicators, and any interface where small status descriptors are needed.