Bothsrc/components/badge.tsx

Badge

Subtle colored pills for status, tags, and counts.

Default

DefaultActiveBlockedPending

All colors

Every color name the component takes. They collapse onto the system status register (success → green, warning → amber, error → red, info → blue, else neutral), so several names render as the same color.

redorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrosezinc

BrandBadge

A ring-outline pill that rides ON the brand-yellow band (the billing plan card + learner license). Not a status Badge: a filled system tint would fight the yellow. Shared so the two surfaces can't drift.

Paid in fullProvisional

Used on

Console: /console (every page)/console/business-reporting/btw-hours /console/business-reporting/enrollment /console/business-reporting/fleet-size /console/business-reporting/payroll /console/catalog/console/catalog/contracts/[id]/console/certificates /console/curriculum /console/financials /console/financials/balances /console/financials/earned /console/financials/refunds /console/financials/sales /console/financials/transactions /console/financials/waived-fees /console/fleet/console/fleet/[id]/console/locations/console/locations/[id]/console/locations/franchises/[id]/console/people/console/people/[id]/console/reporting /console/reporting/certificate-upload /console/reporting/dps-report /console/reporting/student-records /console/scheduling /console/scheduling/queue
Portal: /(student) (every page)/dashboard /dashboard/billing /dashboard/course /dashboard/documents /dashboard/lessons /dashboard/refer