Badge
Displays a badge or a component that looks like a badge.
Badges combine a variant appearance (primary, secondary, or outline). Icons are optional and can be passed as children.
Primary badges are used when a status needs emphasis or immediate recognition. Use them in detail views, confirmation states, or when the badge should stand out as a focal element in the interface.
Secondary badges are best for dense UI contexts such as tables, lists, or dashboards where many statuses appear at once. They communicate state clearly without overwhelming the layout with strong color.
Outline badges are intended for low-emphasis or contextual use, such as inline references, filters, or selectable states. They provide clarity while maintaining a lightweight visual presence.
Default
Informational
Warning
Error
Success
AI
The ai status marks AI-generated or AI-suggested content, reusing the default, secondary, and outline variants. Pair it with the AI mark. See the AI Toolkit for when and how to use the AI expression.
Installation
npx shadcn@latest add @uipath/badgeUsage
import { Badge } from "@/components/ui/badge"
<Badge>Badge</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="outline">Outline</Badge>
// Success status (default variant)
<Badge status="success">Completed</Badge>
// Warning status with secondary variant
<Badge status="warning" variant="secondary">Could not run</Badge>
// Error status with outline variant
<Badge status="error" variant="outline">Doc missing</Badge>
// With icons (consumer-provided)
<Badge status="info"><Info /> Ready</Badge>
// AI status — pair with the AI mark
<Badge status="ai"><AiMark /> Picked for you</Badge>