Status
Badge
A small label with an icon that names a state.
Preview
Props
| Prop | Type | Description |
|---|---|---|
status | Status | |
variant | Semantic | Categorical | |
fillStyle | 'subtle' | 'bold' | 'outline' | |
size | 'S' | 'M' | |
icon | IconName | false | |
className | string | |
children | React.ReactNode |
Guidelines
A small label with an icon that names a state. Subtle by default, bold when it has to be seen from across the room, outline when it sits on a busy surface.
Provide: status from Badge.statuses, or variant (neutral, accent, informative, positive, notice, negative, plus categorical cyan, orange, yellow) with icon and children. fillStyle (subtle, bold, outline) and size (S 24, M 32).
| Status | Variant | Means |
|---|---|---|
| draft, briefing, unpaid, to-do | neutral | Not started or waiting on you |
| sent, in-production, pre-production, filming, editing | informative | Out the door or underway |
| negotiating, in-review | notice | Waiting on someone, watch it |
| signed, delivered | accent | Locked in on your side |
| live, paid, published | positive | Done and money in |
| overdue, declined | negative | Needs attention now |
- Use the fixed words above; do not invent synonyms.
- A project's status is one of
Picker.projectStatuses: To do, Pre-production, Filming, Editing, In review, Published. Their badges show a stage mark that fills like a pie instead of an icon, so a project's progress reads at a glance. - Reserve
boldfor overdue and the one thing on a screen that must not be missed.