F8Shipped
Messaging
How Charply communicates status, errors, guidance, and empty states. Messages should be short, actionable, and visually distinct by intent.
Message types
| Intent | Component | |
|---|---|---|
| Error | Red border + tint, destructive text | AuthErrorMessage |
| Info / progress | Primary tint, foreground text | AuthInfoMessage |
| Success / posted | Green tone, optional icon | StatusBadge (success) |
| Empty | Editorial headline + action | EmptyState |
| Agent state | Icon + label + description | StatusBadge |
Empty states
No saved replies yet
Generate a reply and save it to build your library.
Empty is a brand moment — title explains the state, description tells the user what to do, action provides one clear path.
Agent and workflow status
Scanning feed
Reading posts for reply targets
tone="active"Posted
Reply submitted successfully
tone="success"Queued
Waiting for review
tone="neutral"Failed
Composer unavailable
tone="danger"Content tone
Do
- "Check your email for a sign-in code"
- "Reply copied to clipboard"
- "Agent paused — review queue to continue"
Don't
- "Success!" (no context)
- "Error 401"
- "Nothing here"
Guidelines
docs/design/foundation/messaging.mdDo
- ✓Reuse `AuthErrorMessage` / `AuthInfoMessage` for form-level feedback
- ✓Use `EmptyState` on every zero-data view in library, agent queue, search results
- ✓Match message severity to visual treatment (error = destructive, not primary)
- ✓Keep extension copy concise — popup width is 450px
Don't
- ✗Show raw API error codes to users
- ✗Use color alone without text (see Accessibility — F6)
- ✗Stack multiple banners of the same intent
- ✗Use modal dialogs for non-blocking info (prefer inline or tooltip)