Components
Status badge
A dot for the tone, a plain label for the state. One per item.
Our ownFeedback and status
components/status-badge.tsxPreview
DoneWith the client
Examples
Tones
Neutral, success, info, warning and danger. The label says the state.
Not startedDoneWith the clientWaiting for feedbackOverdue
Props
The ones that change how it looks or behaves. The rest are the HTML element's own.
| Prop | Type | Default |
|---|---|---|
| tone | "neutral" | "success" | "info" | "warning" | "danger" | – |
Guidelines
Use it
- A state in a list or header: Done, Coming soon, With the client, Active.
Don't
- Colour the label.
- Invent a tone.
Used in
The screens in this Base that show it, found in the code.
- Contracts & invoices
- Every page under /settings
- Home
- Kickoff workshop: founder's view
- Prototypes hub
- Settings: Account
- Settings: People
- Settings: Process
- Settings: Projects
- Sign in
- The app shell, on every screen
Accessibility
- The dot is decorative; the label carries the meaning, so it's never colour alone.