Billing Alert Banner - Preview
All scenarios of the billing alert banner component
Scenario 1: Payment Failed (7 days)
Payment Failed
Your payment failed. Please update your payment method within 7 days to avoid losing access.
Scenario 2: Payment Failed (3 days)
Payment Failed
Your payment failed. Please update your payment method within 3 days to avoid losing access.
Scenario 3: Payment Failed (0 days - today)
Payment Failed
Your payment failed. Please update your payment method within 0 days to avoid losing access.
Scenario 4: Payment Failed (past period end)
Payment Failed
Your payment failed. Please update your payment method within 0 days to avoid losing access.
Scenario 5: Payment Failed (no period end)
Payment Failed
Your payment failed. Please update your payment method within 7 days to avoid losing access.
Scenario 6: Subscription Cancelling (30 days)
Subscription Ending
Your subscription will end on March 30, 2026. You'll keep access until then.
Scenario 7: Subscription Cancelling (7 days)
Subscription Ending
Your subscription will end on March 7, 2026. You'll keep access until then.
Scenario 8: Normal Active (no alert)
✓ No alert shown - This is correct behavior
Scenario 9: Trial Period (no alert)
✓ No alert shown - This is correct behavior
Scenario 10: Already Cancelled (no alert)
✓ No alert shown - This is correct behavior
Generic Alert Banner - All Variants
Reusable AlertBanner component with different variants
Error Variant
Critical Error
Something went wrong with your request. Please try again or contact support.
Warning Variant
Storage Almost Full
You're using 90% of your storage quota. Consider upgrading your plan or deleting old files.
Success Variant
Backup Completed
Your data has been successfully backed up to the cloud. Last backup: 2 minutes ago.
Info Variant
New Feature Available
We've added email templates to help you compose messages faster. Check it out in the composer.
Default Variant
Maintenance Scheduled
System maintenance is scheduled for tonight at 2 AM UTC. Expected downtime: 30 minutes.
Without Action Button
Read-Only Mode
Your account is currently in read-only mode due to pending verification.
Without Dismiss Button
Action Required
You must verify your email address to continue using all features.