> ## Documentation Index
> Fetch the complete documentation index at: https://memberpulseptyltd.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Feedback

> MemberPulse feedback patterns - alerts, toasts, badges, and status indicators

# Feedback

Feedback components communicate status, results, and important information to users.

***

## Alerts

### Alert Variants

<Card>
  <div style={{display: 'flex', flexDirection: 'column', gap: '16px', padding: '24px'}}>
    <div style={{padding: '16px', backgroundColor: '#EFF6FF', border: '1px solid #3B82F6', borderRadius: '0', display: 'flex', gap: '12px'}}>
      <span style={{color: '#3B82F6'}}>ℹ️</span>

      <div>
        <div style={{fontWeight: '600', marginBottom: '4px'}}>Information</div>
        <div style={{fontSize: '14px', color: '#1E40AF'}}>This is an informational message with helpful context.</div>
      </div>
    </div>

    <div style={{padding: '16px', backgroundColor: '#ECFDF5', border: '1px solid #10B981', borderRadius: '0', display: 'flex', gap: '12px'}}>
      <span style={{color: '#10B981'}}>✓</span>

      <div>
        <div style={{fontWeight: '600', marginBottom: '4px'}}>Success</div>
        <div style={{fontSize: '14px', color: '#065F46'}}>Your changes have been saved successfully.</div>
      </div>
    </div>

    <div style={{padding: '16px', backgroundColor: '#FFFBEB', border: '1px solid #F59E0B', borderRadius: '0', display: 'flex', gap: '12px'}}>
      <span style={{color: '#F59E0B'}}>⚠️</span>

      <div>
        <div style={{fontWeight: '600', marginBottom: '4px'}}>Warning</div>
        <div style={{fontSize: '14px', color: '#92400E'}}>Your subscription expires in 3 days. Renew to avoid interruption.</div>
      </div>
    </div>

    <div style={{padding: '16px', backgroundColor: '#FEF2F2', border: '1px solid #DC3545', borderRadius: '0', display: 'flex', gap: '12px'}}>
      <span style={{color: '#DC3545'}}>✗</span>

      <div>
        <div style={{fontWeight: '600', marginBottom: '4px'}}>Error</div>
        <div style={{fontSize: '14px', color: '#991B1B'}}>Unable to process your request. Please try again later.</div>
      </div>
    </div>
  </div>
</Card>

### 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

```css theme={null}
.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

<Card>
  <div style={{position: 'relative', height: '300px', backgroundColor: '#F5F5F7', borderRadius: '0', overflow: 'hidden'}}>
    <div style={{position: 'absolute', top: '16px', right: '16px', backgroundColor: 'white', padding: '12px 16px', borderRadius: '0', boxShadow: '0 4px 12px rgba(0,0,0,0.15)', fontSize: '14px', display: 'flex', alignItems: 'center', gap: '8px'}}>
      <span style={{color: '#10B981'}}>✓</span> Saved successfully
    </div>

    <div style={{position: 'absolute', bottom: '16px', left: '50%', transform: 'translateX(-50%)', backgroundColor: '#1F2937', color: 'white', padding: '12px 16px', borderRadius: '0', fontSize: '14px'}}>
      Undo last action?
    </div>
  </div>
</Card>

| Position      | Usage                           |
| ------------- | ------------------------------- |
| Top Right     | Default for success/info toasts |
| Top Center    | Important announcements         |
| Bottom Center | Undo actions                    |
| Bottom Right  | Background operations           |

### Toast Variants

<CardGroup cols={2}>
  <Card title="Success Toast">
    <div style={{padding: '12px 16px', backgroundColor: 'white', borderRadius: '0', boxShadow: '0 4px 12px rgba(0,0,0,0.15)', display: 'flex', alignItems: 'center', gap: '12px', marginTop: '12px'}}>
      <div style={{width: '24px', height: '24px', backgroundColor: '#ECFDF5', borderRadius: '0', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#10B981'}}>✓</div>

      <div>
        <div style={{fontWeight: '500', fontSize: '14px'}}>Changes saved</div>
        <div style={{fontSize: '12px', color: '#6C757D'}}>Your profile has been updated</div>
      </div>
    </div>
  </Card>

  <Card title="Error Toast">
    <div style={{padding: '12px 16px', backgroundColor: 'white', borderRadius: '0', boxShadow: '0 4px 12px rgba(0,0,0,0.15)', display: 'flex', alignItems: 'center', gap: '12px', marginTop: '12px'}}>
      <div style={{width: '24px', height: '24px', backgroundColor: '#FEF2F2', borderRadius: '0', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#DC3545'}}>✗</div>

      <div>
        <div style={{fontWeight: '500', fontSize: '14px'}}>Upload failed</div>
        <div style={{fontSize: '12px', color: '#6C757D'}}>File exceeds maximum size</div>
      </div>
    </div>
  </Card>
</CardGroup>

### Toast with Action

<Card>
  <div style={{padding: '24px'}}>
    <div style={{padding: '12px 16px', backgroundColor: 'white', borderRadius: '0', boxShadow: '0 4px 12px rgba(0,0,0,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '16px'}}>
      <div style={{display: 'flex', alignItems: 'center', gap: '12px'}}>
        <span>🗑️</span>
        <span style={{fontSize: '14px'}}>Member deleted</span>
      </div>

      <div style={{color: '#2421C4', fontWeight: '500', fontSize: '14px', cursor: 'pointer'}}>Undo</div>
    </div>
  </div>
</Card>

***

## Badges

### Status Badges

<Card>
  <div style={{padding: '24px', display: 'flex', gap: '12px', flexWrap: 'wrap'}}>
    <span style={{backgroundColor: '#ECFDF5', color: '#065F46', padding: '4px 12px', borderRadius: '0', fontSize: '12px', fontWeight: '500'}}>Active</span>
    <span style={{backgroundColor: '#FFFBEB', color: '#92400E', padding: '4px 12px', borderRadius: '0', fontSize: '12px', fontWeight: '500'}}>Pending</span>
    <span style={{backgroundColor: '#FEF2F2', color: '#991B1B', padding: '4px 12px', borderRadius: '0', fontSize: '12px', fontWeight: '500'}}>Expired</span>
    <span style={{backgroundColor: '#F5F5F7', color: '#6C757D', padding: '4px 12px', borderRadius: '0', fontSize: '12px', fontWeight: '500'}}>Draft</span>
    <span style={{backgroundColor: '#EFF6FF', color: '#1E40AF', padding: '4px 12px', borderRadius: '0', fontSize: '12px', fontWeight: '500'}}>Processing</span>
  </div>
</Card>

### 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

<Card>
  <div style={{padding: '24px', display: 'flex', gap: '24px', alignItems: 'center'}}>
    <div style={{position: 'relative'}}>
      <span style={{fontSize: '24px'}}>🔔</span>
      <span style={{position: 'absolute', top: '-4px', right: '-8px', backgroundColor: '#DC3545', color: 'white', padding: '2px 6px', borderRadius: '0', fontSize: '10px', fontWeight: '600'}}>3</span>
    </div>

    <div style={{position: 'relative'}}>
      <span style={{fontSize: '24px'}}>✉️</span>
      <span style={{position: 'absolute', top: '-4px', right: '-8px', backgroundColor: '#2421C4', color: 'white', padding: '2px 6px', borderRadius: '0', fontSize: '10px', fontWeight: '600'}}>12</span>
    </div>

    <div style={{position: 'relative'}}>
      <span style={{fontSize: '24px'}}>👥</span>
      <span style={{position: 'absolute', top: '-4px', right: '-8px', backgroundColor: '#10B981', color: 'white', padding: '2px 6px', borderRadius: '0', fontSize: '10px', fontWeight: '600'}}>99+</span>
    </div>
  </div>
</Card>

### Dot Badges

<Card>
  <div style={{padding: '24px', display: 'flex', gap: '24px', alignItems: 'center'}}>
    <div style={{display: 'flex', alignItems: 'center', gap: '8px'}}>
      <div style={{width: '8px', height: '8px', backgroundColor: '#10B981', borderRadius: '0'}} />

      <span style={{fontSize: '14px'}}>Online</span>
    </div>

    <div style={{display: 'flex', alignItems: 'center', gap: '8px'}}>
      <div style={{width: '8px', height: '8px', backgroundColor: '#F59E0B', borderRadius: '0'}} />

      <span style={{fontSize: '14px'}}>Away</span>
    </div>

    <div style={{display: 'flex', alignItems: 'center', gap: '8px'}}>
      <div style={{width: '8px', height: '8px', backgroundColor: '#6C757D', borderRadius: '0'}} />

      <span style={{fontSize: '14px'}}>Offline</span>
    </div>
  </div>
</Card>

***

## Progress Indicators

### Progress Bar

<Card>
  <div style={{padding: '24px'}}>
    <div style={{marginBottom: '16px'}}>
      <div style={{display: 'flex', justifyContent: 'space-between', marginBottom: '8px'}}>
        <span style={{fontSize: '14px', fontWeight: '500'}}>Upload progress</span>
        <span style={{fontSize: '14px', color: '#6C757D'}}>67%</span>
      </div>

      <div style={{height: '8px', backgroundColor: '#E2E8F0', borderRadius: '0', overflow: 'hidden'}}>
        <div style={{width: '67%', height: '100%', backgroundColor: '#2421C4', borderRadius: '0'}} />
      </div>
    </div>

    <div>
      <div style={{display: 'flex', justifyContent: 'space-between', marginBottom: '8px'}}>
        <span style={{fontSize: '14px', fontWeight: '500'}}>CPD Points</span>
        <span style={{fontSize: '14px', color: '#6C757D'}}>24 / 40 points</span>
      </div>

      <div style={{height: '8px', backgroundColor: '#E2E8F0', borderRadius: '0', overflow: 'hidden'}}>
        <div style={{width: '60%', height: '100%', backgroundColor: '#10B981', borderRadius: '0'}} />
      </div>
    </div>
  </div>
</Card>

### Circular Progress

<Card>
  <div style={{padding: '24px', display: 'flex', gap: '32px', alignItems: 'center'}}>
    <div style={{position: 'relative', width: '80px', height: '80px'}}>
      <svg viewBox="0 0 36 36" style={{transform: 'rotate(-90deg)'}}>
        <circle cx="18" cy="18" r="16" fill="none" stroke="#E2E8F0" strokeWidth="2" />

        <circle cx="18" cy="18" r="16" fill="none" stroke="#2421C4" strokeWidth="2" strokeDasharray="75 100" />
      </svg>

      <div style={{position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: '600'}}>75%</div>
    </div>

    <div style={{position: 'relative', width: '80px', height: '80px'}}>
      <svg viewBox="0 0 36 36" style={{transform: 'rotate(-90deg)'}}>
        <circle cx="18" cy="18" r="16" fill="none" stroke="#E2E8F0" strokeWidth="2" />

        <circle cx="18" cy="18" r="16" fill="none" stroke="#10B981" strokeWidth="2" strokeDasharray="100 100" />
      </svg>

      <div style={{position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#10B981'}}>✓</div>
    </div>
  </div>
</Card>

### Loading Spinner

<Card>
  <div style={{padding: '24px', display: 'flex', gap: '32px', alignItems: 'center'}}>
    <div style={{width: '24px', height: '24px', border: '2px solid #E2E8F0', borderTop: '2px solid #2421C4', borderRadius: '0'}} />

    <div style={{display: 'flex', alignItems: 'center', gap: '12px'}}>
      <div style={{width: '16px', height: '16px', border: '2px solid #E2E8F0', borderTop: '2px solid #2421C4', borderRadius: '0'}} />

      <span style={{fontSize: '14px'}}>Loading...</span>
    </div>
  </div>
</Card>

***

## Empty States

<Card>
  <div style={{padding: '48px', textAlign: 'center'}}>
    <div style={{fontSize: '48px', marginBottom: '16px'}}>📭</div>
    <h3 style={{fontSize: '18px', fontWeight: '600', marginBottom: '8px'}}>No messages yet</h3>
    <p style={{color: '#6C757D', marginBottom: '24px', maxWidth: '300px', margin: '0 auto 24px'}}>When you receive messages from other members, they'll appear here.</p>
    <div style={{backgroundColor: '#2421C4', color: 'white', padding: '10px 20px', borderRadius: '0', display: 'inline-block', cursor: 'pointer'}}>Start a conversation</div>
  </div>
</Card>

### 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

<Card>
  <div style={{padding: '24px'}}>
    <div style={{display: 'flex', gap: '16px', alignItems: 'flex-start'}}>
      <div style={{width: '48px', height: '48px', backgroundColor: '#E2E8F0', borderRadius: '0'}} />

      <div style={{flex: 1}}>
        <div style={{height: '16px', backgroundColor: '#E2E8F0', borderRadius: '0', width: '40%', marginBottom: '8px'}} />

        <div style={{height: '12px', backgroundColor: '#E2E8F0', borderRadius: '0', width: '60%', marginBottom: '8px'}} />

        <div style={{height: '12px', backgroundColor: '#E2E8F0', borderRadius: '0', width: '80%'}} />
      </div>
    </div>
  </div>
</Card>

```css theme={null}
.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

<Card>
  <div style={{padding: '48px', display: 'flex', justifyContent: 'center', gap: '48px'}}>
    <div style={{position: 'relative'}}>
      <div style={{padding: '8px 16px', backgroundColor: '#1F2937', color: 'white', borderRadius: '0', fontSize: '12px', position: 'absolute', bottom: '100%', left: '50%', transform: 'translateX(-50%)', marginBottom: '8px', whiteSpace: 'nowrap'}}>
        Edit profile

        <div style={{position: 'absolute', bottom: '-4px', left: '50%', transform: 'translateX(-50%)', width: 0, height: 0, borderLeft: '4px solid transparent', borderRight: '4px solid transparent', borderTop: '4px solid #1F2937'}} />
      </div>

      <div style={{padding: '8px 12px', backgroundColor: '#F5F5F7', borderRadius: '0', cursor: 'pointer'}}>✏️</div>
    </div>
  </div>
</Card>

### 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