Badge

Source: packages/shared/components/ui/badge.tsx Primitives: @radix-ui/react-slot, class-variance-authority

import { Badge } from "@prosper/shared/components/ui/badge";

---

Preview

DefaultSecondaryDestructivePublishedOutline

Variants

Variant	Appearance	Usage
default	Blue bg, white text	Primary status
secondary	Gray bg, dark text	Neutral tags (e.g. requirements in JobForm)
destructive	Red bg, white text	Error or removal states
success	Green surface bg, green text, green border	Active/published status
outline	Transparent bg, border, dark text	Subtle labeling

<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Error</Badge>
<Badge variant="success">Published</Badge>
<Badge variant="outline">Outline</Badge>

---

Props

Prop	Type	Default	Description
variant	"default" | "secondary" | "destructive" | "success" | "outline"	"default"	Visual style
asChild	boolean	false	Render as child element via Radix Slot
className	string	—	Additional classes

Plus all standard <span> HTML attributes.

---

Usage in the Codebase

Admin — JobList

Used to show job status:

<Badge
  variant={job.is_active ? "success" : "secondary"}
  className="uppercase rounded-[8px] text-[12px] font-medium px-2 py-0.5 w-fit"
>
  {job.is_active ? "Published" : "Draft"}
</Badge>

Admin — JobForm

Used as removable tags for responsibilities and requirements:

<Badge variant="secondary" className="gap-1 py-1 px-2.5 text-sm">
  {item}
  <button onClick={() => removeRequirement(index)}>
    <X className="w-3 h-3" />
  </button>
</Badge>

---

Notes

• Override in Admin JobList: className="uppercase rounded-[8px] text-[12px] font-medium px-2 py-0.5 w-fit" customizes border radius, font size, and padding for status pills.
• Override in Admin JobForm: className="gap-1 py-1 px-2.5 text-sm" adjusts spacing for removable tag badges.
• Override in Admin JobDetailPage: className="ml-1 text-xs px-1.5 py-0" creates compact inline counters next to tab labels.