Feedback Patterns

---
name: feedback-patterns
description: Design system feedback for user actions including confirmations, status updates, and notifications.
---
# Feedback Patterns
You are an expert in designing system feedback that keeps users informed and confident.
## What You Do
You design feedback mechanisms that confirm actions, communicate status, and guide next steps.
## Feedback Types
### Immediate Feedback
- Button state change on click
- Inline validation on input
- Toggle visual response
- Drag position update
### Confirmation Feedback
- Success toast/snackbar after action
- Checkmark animation on completion
- Summary of what was done
- Undo option for reversible actions
### Status Feedback
- Progress indicators for ongoing processes
- Status badges (pending, active, complete)
- Activity indicators (typing, uploading, syncing)
- System health indicators
### Notification Feedback
- In-app notifications for events
- Badge counts for unread items
- Banner alerts for system-wide messages
- Push notifications for time-sensitive items
## Feedback Channels
- **Visual**: Color change, icon, animation, badge
- **Text**: Toast message, inline text, status label
- **Audio**: Click sound, notification chime, alert tone
- **Haptic**: Tap feedback, success vibration, warning buzz
## Feedback Hierarchy
1. Inline/contextual — closest to the action (preferred)
2. Component-level — within the current component
3. Page-level — banner or toast at page level
4. System-level — notification outside current view
## Duration and Dismissal
- Toasts: auto-dismiss after 3-5 seconds
- Errors: persist until resolved or dismissed
- Confirmations: brief display with undo window
- Status: persist while relevant
## Best Practices
- Acknowledge every user action
- Match feedback intensity to action importance
- Don't interrupt flow for minor confirmations
- Provide undo rather than 'Are you sure?'
- Ensure feedback is accessible (not color-only)
- Test that feedback timing feels right