Alerts¶

Alerts communicate feedback to the user — errors, success confirmations, warnings, and informational messages. In payment flows, clear and honest feedback is critical.

Alert Variants¶

⚠️ Payment failed. Please check your card details and try again.

✓ Payment confirmed! Your receipt has been sent to your email.

⏳ Your payment is being processed. This may take a few minutes.

ℹ️ This subscription will renew automatically on the 1st of each month.

Variant	Background	Border	Text	Usage
Error	`rgba(248,215,218,1)`	`rgba(220,53,69,1)`	`rgba(114,28,36,1)`	Payment failed, validation errors
Success	`#d1fae5`	`#6ee7b7`	`#065f46`	Payment confirmed, form submitted
Warning	`#fef3c7`	`#fcd34d`	`#92400e`	Processing, pending, review needed
Info	`#EBF0FF`	`#6E96FF`	`#5C0390`	Informational, subscription details

CSS Implementation¶

.alert {
  padding: 12px 16px;
  border-radius: 4px;               /* --mp-radius-sm */
  border: 1px solid;
  font-family: 'Cabin', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 12px;
}

.alert--error {
  background: rgba(248, 215, 218, 1);
  border-color: rgba(220, 53, 69, 1);
  color: rgba(114, 28, 36, 1);
}

.alert--success {
  background: #d1fae5;
  border-color: #6ee7b7;
  color: #065f46;
}

.alert--warning {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
}

.alert--info {
  background: #EBF0FF;
  border-color: #6E96FF;
  color: #5C0390;
}

Bulma Implementation¶

<!-- Error -->
<div class="notification is-danger is-light" style="border-radius:4px; font-family:'Cabin',sans-serif; font-size:14px; padding:12px 16px;">
  ⚠️ Payment failed. Please check your card details and try again.
</div>

<!-- Success -->
<div class="notification is-success is-light" style="border-radius:4px; font-family:'Cabin',sans-serif; font-size:14px; padding:12px 16px;">
  ✓ Payment confirmed! Your receipt has been sent to your email.
</div>

<!-- Warning -->
<div class="notification is-warning is-light" style="border-radius:4px; font-family:'Cabin',sans-serif; font-size:14px; padding:12px 16px;">
  ⏳ Your payment is being processed.
</div>

Tailwind Implementation¶

<!-- Error -->
<div class="p-3 rounded border text-sm font-sans" style="background:rgba(248,215,218,1); border-color:rgba(220,53,69,1); color:rgba(114,28,36,1);">
  ⚠️ Payment failed. Please check your card details and try again.
</div>

<!-- Success -->
<div class="p-3 rounded border text-sm bg-green-100 border-green-300 text-green-800">
  ✓ Payment confirmed!
</div>

Placement Rules¶

Field-level error (inline)¶

<div style="margin-bottom:20px;">
  <label style="display:block; font-size:14px; font-weight:600; color:#333; margin-bottom:6px;">Email</label>
  <input type="email" style="width:100%; height:42px; padding:0 14px; border:1.5px solid #c80000; border-radius:8px; font-family:'Cabin',sans-serif; font-size:15px; color:#555; box-sizing:border-box;">
  <p style="font-size:13px; color:#c80000; margin:4px 0 0 0;">Please enter a valid email address.</p>
</div>

Form-level error (above submit button)¶

<!-- Place above the submit button, not at the top of the form -->
<div style="padding:12px 16px; border-radius:4px; border:1px solid rgba(220,53,69,1); background:rgba(248,215,218,1); color:rgba(114,28,36,1); font-family:'Cabin',sans-serif; font-size:14px; margin-bottom:16px;">
  ⚠️ The information entered is incorrect. Please check your details and try again.
</div>
<button style="width:100%; height:42px; background:#6E96FF; color:white; border:none; border-radius:8px; font-family:'Cabin',sans-serif; font-size:15px; font-weight:600; cursor:pointer;">
  Try Again
</button>

Rules¶

Alert rules

Use border-radius: 4px for alerts — slightly less rounded than cards
Always include a contextual icon (⚠️ ✓ ⏳ ℹ️) before the message
Form-level errors go above the submit button, not at the top of the form
Field-level errors go below the field in red text (font-size: 13px)
Never use alerts for decorative purposes — only for real feedback
Payment failure messages must be clear and actionable
Success messages should confirm what happened and what comes next