Overview
TranslationStatusBadge displays the translation coverage status for resources or content. It shows whether translations are complete, partial, missing, need review, or are stale (source changed).
Key Features
- Five status types: complete, partial, missing, needsReview, stale
- Shows percentage for partial translations
- Displays count of strings needing review
- Compact variant for tables and lists
Examples
Status Types
All available status types with their default appearance.
Completecomplete
Partial(75%)partial
Missingmissing
Needs ReviewneedsReview
Stalestale
Compact Variant
Compact variant for space-constrained contexts like table cells.
complete
partial
missing
needsReview
stale
Using Helper Function
Use getTranslationStatus helper to calculate status from coverage data.
Needs Review(80%)8 of 10 strings translated, 2 need review
const status = getTranslationStatus(8, 10, 2, 0); // Returns: "needsReview" (because needsReview count > 0)
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
status | "complete" | "partial" | "missing" | "needsReview" | "stale" | - | Translation status to display |
percentage | number | - | Coverage percentage (shown for partial status) |
needsReview | number | - | Count of strings needing review |
compact | boolean | false | Use compact variant (smaller, no label) |
getTranslationStatus Helper
| Prop | Type | Default | Description |
|---|---|---|---|
translated | number | - | Count of translated strings |
total | number | - | Total count of translatable strings |
needsReview | number | 0 | Count of strings needing review |
stale | number | 0 | Count of stale translations (source changed) |
Usage
import { TranslationStatusBadge, getTranslationStatus } from '@/features/translations';
// Using helper function to determine status
const status = getTranslationStatus(
translatedCount,
totalCount,
needsReviewCount,
staleCount
);
<TranslationStatusBadge
status={status}
percentage={Math.round((translatedCount / totalCount) * 100)}
needsReview={needsReviewCount}
/>
// Direct status values
<TranslationStatusBadge status="complete" />
<TranslationStatusBadge status="partial" percentage={75} />
<TranslationStatusBadge status="missing" />
<TranslationStatusBadge status="needsReview" needsReview={3} />
<TranslationStatusBadge status="stale" />
// Compact variant for tables/lists
<TranslationStatusBadge status="complete" compact />