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

✓ Saved successfully

Undo last action?

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