Style Guide
Feedback
MemberPulse feedback patterns - alerts, toasts, badges, and status indicators
Feedback
Feedback components communicate status, results, and important information to users.
Alerts
Alert Variants
ℹ️
Information
This is an informational message with helpful context.
✓
Success
Your changes have been saved successfully.
⚠️
Warning
Your subscription expires in 3 days. Renew to avoid interruption.
✗
Error
Unable to process your request. Please try again later.
Alert Anatomy
| Element | Description |
|---|---|
| Icon | Visual indicator of alert type |
| Title | Brief, scannable heading |
| Description | Detailed message with context |
| Close button | Optional dismiss action |
| Action | Optional CTA button |
Alert Styling
.alert {
padding: 1rem;
border-radius: 0.5rem;
border: 1px solid;
display: flex;
gap: 0.75rem;
}
.alert-info {
background-color: #EFF6FF;
border-color: #3B82F6;
}
.alert-success {
background-color: #ECFDF5;
border-color: #10B981;
}
.alert-warning {
background-color: #FFFBEB;
border-color: #F59E0B;
}
.alert-error {
background-color: #FEF2F2;
border-color: #DC3545;
}Toast Notifications
Toast Positions
| Position | Usage |
|---|---|
| Top Right | Default for success/info toasts |
| Top Center | Important announcements |
| Bottom Center | Undo actions |
| Bottom Right | Background operations |
Toast Variants
Success Toast
✓
Changes saved
Your profile has been updated
Error Toast
✗
Upload failed
File exceeds maximum size
Toast with Action
🗑️Member deleted
Undo
Badges
Status Badges
ActivePendingExpiredDraftProcessing
Badge Variants
| Variant | Background | Text | Usage |
|---|---|---|---|
| Success | #ECFDF5 | #065F46 | Active, complete, verified |
| Warning | #FFFBEB | #92400E | Pending, attention needed |
| Destructive | #FEF2F2 | #991B1B | Expired, error, failed |
| Neutral | #F5F5F7 | #6C757D | Draft, inactive, default |
| Info | #EFF6FF | #1E40AF | Processing, in progress |
| Primary | #2421C4 | #FFFFFF | Count badges, new |
Count Badges
🔔3
✉️12
👥99+
Dot Badges
Online
Away
Offline
Progress Indicators
Progress Bar
Upload progress67%
CPD Points24 / 40 points
Circular Progress
75%
✓
Loading Spinner
Loading...
Empty States
📭
No messages yet
When you receive messages from other members, they'll appear here.
Start a conversation
Empty State Guidelines
| Element | Description |
|---|---|
| Illustration | Visual representation (icon or image) |
| Headline | Clear, helpful title |
| Description | Explain why empty + what to do |
| Action | Primary CTA to resolve empty state |
Skeleton Loading
.skeleton {
background: linear-gradient(
90deg,
#E2E8F0 25%,
#F5F5F7 50%,
#E2E8F0 75%
);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}Tooltips
Edit profile
✏️
Tooltip Positions
| Position | Usage |
|---|---|
| Top | Default, most common |
| Bottom | When top space is limited |
| Left/Right | Inline elements, toolbars |
Tooltip Guidelines
- Keep text short (1-2 lines max)
- Show on hover after 300ms delay
- Hide immediately on mouse leave
- Don't put interactive elements in tooltips