Badge
A read-only status reported by the system.
Installation
pnpm --filter your-app add "@commenda/pathfinder@workspace:*"Import @commenda/pathfinder/styles.css once after host CSS. Pathfinder ships compiled, prefixed Tailwind v4 CSS; the application needs no Tailwind scanning. Import from @commenda/pathfinder/badge. Interactive callbacks belong in a client component in Next.js App Router.
API reference
| Prop | Type | Behavior |
|---|---|---|
labelRequired | string | Required; conveys meaning independently of color |
tone | BadgeTone | neutral |
size | "sm"|"md" | sm: 20 high; md: 24 high |
indicatorConfig | ObjectView fields · 2 shapes | Optional; dot and status icon are mutually exclusive |
className | string | Additional classes for the component root. |
id | string | Stable HTML identifier for the component. |
indicatorConfigObject fields
Choose one of these 2 shapes. Do not combine fields excluded by the selected shape.
Option 1
| Field | Type | Requirement |
|---|---|---|
type | "dot" | Required |
Option 2
| Field | Type | Requirement |
|---|---|---|
type | "status" | Required |
status | View full type"failed" | "completed" | "to-do" | "scheduled" | "in-progress" | "in-review" | "canceled" | "blocking" | "blocked-by" | "needs-attention" | Required |
Root IDs, className, appropriate ARIA attributes, and typed refs are supported.
Usage rules
Badges never remove a value, navigate, or trigger actions. Use Tag for user-chosen values and Button/link for interactions. Static badges do not create live regions.
The application maps domain statuses to label, tone, and optional existing lifecycle icon. Pathfinder does not infer status from English text or depend on filing enums. Keep labels to one or two words in sentence case. Small badges use a 12px status icon, medium uses the existing 16px artwork scaled to its authored 14px slot. Text wraps for unexpected long translations without clipping the meaning.
Examples
Tones
Sizes
Indicators
Design rules
Figma guidance and reviewed implementation decisions for this component. Rule IDs remain stable for source comments and AI references.
Badge
Source: 240:123, anatomy 242:311, guidance 242:344.
BADGE-01— Source: system-reported status, read-only. User-picked values belong to Tag; actions belong to Button/link. No removal, click, loading, disabled, or automatic live-region behavior.BADGE-02— Source: label conveys meaning without color; neutral/info/success/warning/error; optional 6px dot or lifecycle icon, never both. sm 20/radius4/padding6/Label12 Strong/icon12; md 24/radius6/padding8/Label13 Strong/icon14; gap6, no border. Scale existing 16 artwork for the 14 slot, not a duplicate SVG download.BADGE-03— Source/Pathfinder: one domain mapping owned by the application. One or two words, sentence case. Neutral pearl-200/900; semantic 100 fills and 800/900 copy. Unexpected long labels wrap without clipping meaning.