Components · Feedback
Badge
BetaA short status label, such as Paid or Overdue.
- Source
components/ui/badge.tsx - shadcn/ui Badge
- Figma: not linked yet (Q13)
PaidDue in 3 daysOverdueUSD
When to use
- To show the status of an item in a list or table: an invoice is Paid, a client is Active, a check-in was missed.
- To label a category or plan: Premium, Online coaching.
When not to use
- For messages: use an Alert or a Toast.
- For counts on navigation: use the sidebar's count, not a badge.
- For actions: badges are not clickable. Use a button or a link.
Anatomy
Paid
- 1. Container: pill shape, fill from the variant
- 2. Icon (optional), 12px
- 3. Label: one or two words
Variants
NewPremiumDraftOverdue
ActiveCheck-in missedOnline coaching AI suggested
| Variant | Use for |
|---|---|
default | New or highlighted items |
secondary | Plans and tiers; Electric Green in SuperCoach |
outline | Neutral labels: Draft, Archived |
destructive | Problems that need action: Overdue, Failed |
success | Done and healthy: Paid, Active, Completed |
warning | Needs attention soon: Due in 3 days, Check-in missed |
info | Neutral facts: currency, coaching type |
ai | Content suggested or generated by AI |
success, warning, info and ai are SuperCoach extensions to shadcn/ui (SPEC §6). They use the subtle background with the status text color, because white on the solid success and warning fills fails contrast (QUESTIONS Q2). ai has no subtle token, so it is an outline in the AI color.
States
Badges are static: no hover, focus or disabled state. When a badge is inside a link (asChild), the link gets the focus ring.
Usage guidelines
PaidOverdue
- One badge per item in a list is usually enough. Two at most.
- Use the same word for the same status across the product.
Content guidelines
- One or two words, sentence case, no punctuation.
- Statuses describe the state, not an instruction: "Overdue", not "Pay now".
- Keep Arabic statuses as short as English: "مدفوعة", "متأخرة".
Accessibility
- A badge is plain text, read in place: "Invoice 1042, SAR 450, Overdue".
- Icons inside badges are decorative (
aria-hidden); the text says it. - All variants pass 4.5:1 in both themes; see the contrast matrix.
RTL
The icon sits before the label, so it moves to the right. Badges don't mirror otherwise.
Tokens used
Read from components/ui/badge.tsx at build time, so this list changes when the component does. Opacity modifiers such as /90 are shadcn hover and focus tints on top of the token.
| Token | Utilities | SuperCoach | Coach |
|---|---|---|---|
| --accent | bg-accent | brand-50 | orange-50 |
| --accent-foreground | text-accent-foreground | brand-700 | orange-700 |
| --ai | border-ai | violet-ai-500 | violet-ai-500 |
| --ai-foreground | text-ai-foreground | violet-ai-700 | violet-ai-700 |
| --border | border-border | neutral-200 | neutral-200 |
| --destructive | border-destructive ring-destructive/20 bg-destructive bg-destructive/90 | red-600 | red-600 |
| --destructive-foreground | text-destructive-foreground | white | white |
| --foreground | text-foreground | neutral-950 | neutral-950 |
| --info | text-info | blue-700 | blue-700 |
| --info-subtle | bg-info-subtle | blue-50 | blue-50 |
| --primary | bg-primary bg-primary/90 text-primary | brand-600 | orange-500 |
| --primary-foreground | text-primary-foreground | white | white |
| --ring | border-ring ring-ring/50 | brand-600 | orange-500 |
| --secondary | bg-secondary bg-secondary/90 | lime-300 | neutral-100 |
| --secondary-foreground | text-secondary-foreground | neutral-950 | neutral-800 |
| --success-subtle | bg-success-subtle | green-50 | green-50 |
| --success-text | text-success-text | green-700 | green-700 |
| --warning-subtle | bg-warning-subtle | amber-50 | amber-50 |
| --warning-text | text-warning-text | amber-800 | amber-800 |
- Radius
rounded-full - Type
font-medium - Type
text-xs
Props
<Badge>
Also takes every prop of <span>
| Prop | Type | Default |
|---|---|---|
| variant | "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | "success" | "warning" | "info" | "ai" | "default" |
| asChild? | boolean | false |
Replaces in coach-admin
From the read-only audit of coach-admin: 75 style values, 88 uses.
Classes and selectors
.filter-toggle-button-badge10.logo-badge7.sidebar .nav-link .sidebar-todos-count-badge7.badge7.finance-section__deleted-badge5.recommended-badge4.single-record-badge3.vd-bank-status-chip3.sps-badge--missing2.scpay-badge--ready2&.todo-card__priority-badge--high2&.todo-card__priority-badge--low2
SCSS variables in these styles
$warning-bg-color→ nearest amber-50 (no semantic token)$light-success-colornot a color: spacing, size or layout$warning-text-color→--warning-text$success-text-color→--success-text$success-text-strong→ nearest lime-800 (no semantic token)$danger-border-color→ nearest red-300 (no semantic token)$success-surface-bg→ nearest green-50 (no semantic token)$todo-high-badge-bg→ nearest red-100 (no semantic token)$todo-high-badge-fg→ nearest red-600 (no semantic token)$todo-low-badge-bg→ nearest green-100 (no semantic token)$todo-low-badge-fg→ nearest green-600 (no semantic token)$todo-med-badge-bg→ nearest amber-100 (no semantic token)