Feedback & Status
Components for communicating status, feedback, and loading states.
Feedback & Status
Feedback and status components communicate outcomes, confirmations, and loading states to users. Choosing the right component depends on how intrusive and persistent the message needs to be.
Feedback patterns
Inline feedback (stays on page): Use Alert for messages that complement the surrounding UI. Alerts are perfect for contextual validation errors, informational notices, or warnings that relate directly to content on the screen. They remain visible until dismissed or the issue is resolved.
Transient notifications (auto-dismiss): Use Toast for brief, non-blocking messages that appear temporarily and disappear automatically. Toasts are ideal for action confirmations ("Saved!"), quick notifications, or status updates that don't require user interaction. They stack and can be dismissed manually.
Blocking confirmations (require response): Use Alert Dialog only for critical confirmations that demand explicit user acknowledgement. Reserve this for destructive or irreversible actions (delete account, discard changes) where the user must understand the consequence before proceeding.
Loading states
For skeleton placeholders: Use Skeleton to show a content placeholder while data loads. Skeletons match the layout of real content and improve perceived performance by giving users a sense of what's coming.
For loading indicators: Use Spinner for small inline loading states (button spinners, mini loaders) or when you don't need a full skeleton. Spinners are compact and work well in buttons or next to text.
Status labeling
Use Badge to label items with metadata—status tags (Active, Pending), counts, or category labels. Badges are small, non-interactive, and designed for quick visual scanning.
Components
| Component | Pattern | Best for | Dismissal |
|---|---|---|---|
| Alert | Inline | Contextual errors, warnings, info on page | Manual or resolved |
| Toast | Transient | Action confirmations, quick notifications | Auto-dismiss (4s) or manual |
| Alert Dialog | Blocking modal | Destructive action confirmation | Requires explicit yes/no |
| Skeleton | Loading | Placeholder while fetching content | Replaced with real content |
| Spinner | Loading | Compact inline loading indicator | Disappears when done |
| Badge | Status label | Metadata tags, status indicators | Persistent or dynamic |
Quick decision tree
- User just completed an action and needs confirmation? → Toast
- Validation error or warning for content on the page? → Alert
- Must the user confirm before an irreversible action? → Alert Dialog
- Content is loading? → Skeleton (if replacing layout) or Spinner (inline)
- Need to label an item's status? → Badge