Components
Badge

Badge

The Badge component is used to display status, notifications, or counts, offering a clear visual indicator to highlight important information at a glance. It is ideal for drawing attention to key updates or statuses within the interface.

Badge

Additional Examples

Secondary

Secondary

Outline

Outline

Destructive

Destructive

As Next/Link

You can use the badgeVariants helper to create a next/link that looks like a badge.

import { badgeVariants } from "@/components/ui/badge"
<Link className={badgeVariants({ variant: "outline" })}>Badge</Link>
Link Badge

Configurable Props

<Badge>

Prop

Type

Default/ Options

Description

variant

enum

"default" | "secondary" | "destructive" | "outline"

Determines the state of the Badge component.

AvatarBreadcrumb