Alert
The alert displays a callout that draws attention without interrupting: a confirmation, a warning, or an error summary. It renders in place as part of the page; for a notification that pops up, reach for the toast, and for a similar-looking row that presents content rather than a message, the item.
<div class="alert">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
<div class="alert-title">Payment successful</div>
<div class="alert-description">
Your payment of $29.99 has been processed. A receipt has been sent to your
email address.
</div>
</div>
<div class="alert">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
<div class="alert-title">New feature available</div>
<div class="alert-description">
We've added dark mode support. You can enable it in your account settings.
</div>
</div>Usage
Add the alert class to a container with a title and description inside. Drop an svg icon in as the first child and the text moves aside to make room for it. For a message that appears dynamically, like a form error after a submit, add role="alert" so screen readers announce it; a callout that is part of the page from the start doesn't need it.
<div class="alert">
<svg><!-- icon --></svg>
<div class="alert-title">Title</div>
<div class="alert-description">Description</div>
</div>Examples
Basic
<div class="alert">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
<div class="alert-title">Account updated successfully</div>
<div class="alert-description">
Your profile information has been saved. Changes will be reflected
immediately.
</div>
</div>Destructive
Add alert-destructive for errors and other messages that need stronger attention.
<div class="alert alert-destructive">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>
<div class="alert-title">Payment failed</div>
<div class="alert-description">
Your payment could not be processed. Please check your payment method and
try again.
</div>
</div>With an action
Wrap a trailing control in alert-action and it sits in the top end corner.
Custom colors
Recolor an alert for any tone with utilities.
<div
class="alert border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-50"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
<div class="alert-title">Your subscription will expire in 3 days.</div>
<div class="alert-description">
Renew now to avoid service interruption or upgrade to a paid plan to
continue using the service.
</div>
</div>RTL
Add dir="rtl" to any parent element, typically <html>, to render right-to-left. See the RTL guide for details.
<div id="alert-rtl-demo" dir="rtl" class="flex w-full flex-col gap-4">
<div class="alert">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
<div class="alert-title" data-i18n="successTitle">
تمت عملية الدفع بنجاح
</div>
<div class="alert-description" data-i18n="successDescription">
تمت معالجة دفعتك البالغة 29.99$. تم إرسال الإيصال إلى بريدك الإلكتروني.
</div>
</div>
<div class="alert">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
<div class="alert-title" data-i18n="featureTitle">ميزة جديدة متاحة</div>
<div class="alert-description" data-i18n="featureDescription">
أضفنا دعم الوضع الداكن. يمكنك تفعيله من إعدادات حسابك.
</div>
</div>
</div>
<script>
const translations = {
ar: {
dir: "rtl",
successTitle: "تمت عملية الدفع بنجاح",
successDescription:
"تمت معالجة دفعتك البالغة 29.99$. تم إرسال الإيصال إلى بريدك الإلكتروني.",
featureTitle: "ميزة جديدة متاحة",
featureDescription:
"أضفنا دعم الوضع الداكن. يمكنك تفعيله من إعدادات حسابك.",
},
he: {
dir: "rtl",
successTitle: "התשלום בוצע בהצלחה",
successDescription:
"התשלום שלך בסך 29.99$ עובד. קבלה נשלחה לכתובת האימייל שלך.",
featureTitle: "תכונה חדשה זמינה",
featureDescription:
"הוספנו תמיכה במצב כהה. ניתן להפעיל אותו בהגדרות החשבון.",
},
en: {
dir: "ltr",
successTitle: "Payment successful",
successDescription:
"Your payment of $29.99 has been processed. A receipt has been sent to your email address.",
featureTitle: "New feature available",
featureDescription:
"We've added dark mode support. You can enable it in your account settings.",
},
};
window.addEventListener("message", (e) => {
const t = translations[e.data?.lang];
if (e.data?.type !== "sp-language" || !t) return;
document.getElementById("alert-rtl-demo").dir = t.dir;
document.querySelectorAll("[data-i18n]").forEach((el) => {
el.textContent = t[el.dataset.i18n];
});
});
</script>