Empty States¶

Empty states appear when there is no data to display. They should be helpful, clear, and guide the user toward the next action — never just a blank space.

No Data State¶

📋

No payments yet

Your payment history will appear here once you receive your first payment.

<div style="text-align:center; padding:48px 32px; font-family:'Cabin',sans-serif;">
  <div style="font-size:48px; margin-bottom:16px;">📋</div>
  <h3 style="font-size:18px; font-weight:600; color:#333; margin:0 0 8px 0;">No payments yet</h3>
  <p style="font-size:14px; color:#999; margin:0 0 24px 0; max-width:280px; margin-left:auto; margin-right:auto;">
    Your payment history will appear here once you receive your first payment.
  </p>
  <button style="background:#6E96FF; color:white; border:none; border-radius:8px; padding:0 20px; height:42px; font-family:'Cabin',sans-serif; font-size:15px; font-weight:600; cursor:pointer;">
    Create payment link
  </button>
</div>

🔍

No results found

Try adjusting your search or filter criteria.

Error State¶

⚠️

Something went wrong

We couldn't load your data. Please try again.

Loading State¶

Loading your payments...

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.spinner {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 3px solid #E5ECFB;
  border-top-color: #6E96FF;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

Payment Confirmation (Success State)¶

✓

Payment confirmed!

Your payment of $150.00 has been processed.

A receipt has been sent to your email.

<div style="text-align:center; padding:48px 32px; font-family:'Cabin',sans-serif;">
  <!-- Success icon -->
  <div style="width:64px; height:64px; background:#d1fae5; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:28px; margin:0 auto 16px auto; color:#065f46;">
    ✓
  </div>
  <h3 style="font-size:24px; font-weight:700; color:#333; margin:0 0 8px 0;">Payment confirmed!</h3>
  <p style="font-size:14px; color:#666; margin:0 0 8px 0;">
    Your payment of <strong>$150.00</strong> has been processed.
  </p>
  <p style="font-size:13px; color:#999; margin:0 0 24px 0;">A receipt has been sent to your email.</p>
  <a href="#" style="display:inline-flex; align-items:center; padding:0 20px; height:42px; background:#EBF0FF; color:#6E96FF; border-radius:8px; font-size:15px; font-weight:600; text-decoration:none;">
    Back to catalog
  </a>
</div>

Rules¶

Empty state rules

Always include an icon, a title, a description, and an action button
Icon should be an emoji or simple SVG — never complex illustrations
Title: font-size: 18px; font-weight: 600
Description: font-size: 14px; color: #999; max-width: 280px
Action button: use Ghost or Outline variant — never Primary in empty states
Exception: "No data yet" states can use Primary to encourage first action
Payment confirmation uses a green circle checkmark — never a generic success icon
Loading states use the blue spinner — never a full-page overlay