Tailwind CSS Alerts
Use the alert component to show a message that stays in place on the page, like a success confirmation, a warning, or an error summary. For a notification that pops up, use the toast, and for a row that presents content rather than a message, the item.
<div class="flex w-full max-w-md 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">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>
</div>Usage
Add the alert class to a container with a title and description inside. An svg icon as the first child sits beside the text. Add role="alert" when the message appears dynamically, like a form error after a submit, so screen readers announce it.
<div class="alert">
<svg><!-- icon --></svg>
<div class="alert-title">Title</div>
<div class="alert-description">Description</div>
</div>Examples
Basic alert
A confirmation with an icon, a title, and a description.
<div class="alert w-full max-w-md">
<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 alert
Add alert-destructive for errors and other messages that need stronger attention.
<div class="alert alert-destructive w-full max-w-md">
<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>Alert with an action
Wrap a trailing control in alert-action and it sits in the top end corner.
Alert colors
Recolor an alert for any tone with utilities.
<div
class="alert w-full max-w-md 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 max-w-md 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>