Badge
Badge components for displaying status indicators with labels like Pending, Applied, Approved, Warning, and Declined.
Installation
The Badge component is part of the design system. Import it from the UI package.
import { Badge } from "@/components/ui/badge"Usage
Use Badge with a status (pending, applied, approved, warning, declined) and optional size and variant. Copy the example below to get started.
Statuses
Badges support five status types with specific labels: Pending (neutral), Applied (primary), Approved (success), Warning, and Declined (error).
Sizes
Badges come in four sizes: small (24px), medium (26px), large (28px), and extra-large (32px).
Variants
Badges support three variants: filled-bold (solid colors), filled-light (lighter backgrounds), and outline (transparent with border).
Examples
Copy any example below to use in your project. Each shows a common pattern (statuses, sizes, icon-only, custom labels).
All Variants
Filled Bold
Solid background with white text
Filled Light
Light background with colored text
Outline
Transparent with colored border
Icon Only
Use iconOnly for status indicators without text.
Custom Labels
Override the default label with the label prop.
API Reference
The Badge component displays a status indicator with optional label and icon. It supports five statuses, four sizes, and three variants.
| Prop | Type | Default |
|---|---|---|
| status | "pending" | "applied" | "approved" | "warning" | "declined" | "pending" |
| size | "sm" | "md" | "lg" | "xl" | "md" |
| variant | "filled-bold" | "filled-light" | "outline" | "filled-bold" |
| label | string | — |
| icon | React.ReactNode | — |
| iconOnly | boolean | — |
Badge also accepts all standard HTMLDivElement attributes.
interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
/**
* Badge status/variant
* @default "pending"
*/
status?: "pending" | "applied" | "approved" | "warning" | "declined"
/**
* Badge size
* @default "md"
*/
size?: "sm" | "md" | "lg" | "xl"
/**
* Badge variant/style
* @default "filled-bold"
*/
variant?: "filled-bold" | "filled-light" | "outline"
/**
* Badge label text. If not provided, uses default label based on status.
*/
label?: string
/**
* Optional icon to display. If provided, shows icon-only badge.
*/
icon?: React.ReactNode
/**
* Whether to show as icon-only badge
*/
iconOnly?: boolean
}