Tailwind CSS Alert Components
Info, success, warning and error alerts for forms, dashboards and status messages — in the base style and 10 design aesthetics.
44 components · live preview · copy as HTML or JSX · free for commercial use
Base alerts (4)
Info Alert
Alerts
This is an informational message for the user.
<div class="flex items-start gap-3 rounded-xl border border-sky-200 bg-sky-50 p-4">
<span class="text-sky-500 text-lg leading-none">ℹ️</span>
<p class="text-sm text-sky-800">This is an informational message for the user.</p>
</div>Success Alert
Alerts
Your changes have been saved successfully.
<div class="flex items-start gap-3 rounded-xl border border-emerald-200 bg-emerald-50 p-4">
<span class="text-emerald-500 text-lg leading-none">✅</span>
<p class="text-sm text-emerald-800">Your changes have been saved successfully.</p>
</div>Warning Alert
Alerts
This action may have unintended side effects.
<div class="flex items-start gap-3 rounded-xl border border-amber-200 bg-amber-50 p-4">
<span class="text-amber-500 text-lg leading-none">⚠️</span>
<p class="text-sm text-amber-800">This action may have unintended side effects.</p>
</div>Error Alert
Alerts
Something went wrong. Please try again.
<div class="flex items-start gap-3 rounded-xl border border-rose-200 bg-rose-50 p-4">
<span class="text-rose-500 text-lg leading-none">⛔</span>
<p class="text-sm text-rose-800">Something went wrong. Please try again.</p>
</div>Minimal alerts
Info Alert
Minimal · Alerts
<div class="max-w-xs bg-white border border-slate-200 rounded-lg p-3 text-xs text-slate-900 ">
ℹ️ This is an informational message.
</div>Success Alert
Minimal · Alerts
<div class="max-w-xs bg-white border border-slate-200 rounded-lg p-3 text-xs text-slate-900 ">
✅ Your changes have been saved.
</div>Warning Alert
Minimal · Alerts
<div class="max-w-xs bg-white border border-slate-200 rounded-lg p-3 text-xs text-slate-900 ">
⚠️ This action can't be undone.
</div>Error Alert
Minimal · Alerts
<div class="max-w-xs bg-white border border-slate-200 rounded-lg p-3 text-xs text-slate-900 ">
⛔ Something went wrong.
</div>Neumorphism alerts
Info Alert
Neumorphism · Alerts
<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
<div class="max-w-xs bg-[#e0e5ec] rounded-xl p-3 text-xs text-slate-600 shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff]">
ℹ️ This is an informational message.
</div>
</div>Success Alert
Neumorphism · Alerts
<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
<div class="max-w-xs bg-[#e0e5ec] rounded-xl p-3 text-xs text-slate-600 shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff]">
✅ Your changes have been saved.
</div>
</div>Warning Alert
Neumorphism · Alerts
<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
<div class="max-w-xs bg-[#e0e5ec] rounded-xl p-3 text-xs text-slate-600 shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff]">
⚠️ This action can't be undone.
</div>
</div>Error Alert
Neumorphism · Alerts
<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
<div class="max-w-xs bg-[#e0e5ec] rounded-xl p-3 text-xs text-slate-600 shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff]">
⛔ Something went wrong.
</div>
</div>Glassmorphism alerts
Info Alert
Glassmorphism · Alerts
<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
<div class="max-w-xs bg-white/20 backdrop-blur-md border border-white/30 rounded-xl p-3 text-xs text-white shadow-lg">
ℹ️ This is an informational message.
</div>
</div>Success Alert
Glassmorphism · Alerts
<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
<div class="max-w-xs bg-white/20 backdrop-blur-md border border-white/30 rounded-xl p-3 text-xs text-white shadow-lg">
✅ Your changes have been saved.
</div>
</div>Warning Alert
Glassmorphism · Alerts
<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
<div class="max-w-xs bg-white/20 backdrop-blur-md border border-white/30 rounded-xl p-3 text-xs text-white shadow-lg">
⚠️ This action can't be undone.
</div>
</div>Error Alert
Glassmorphism · Alerts
<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
<div class="max-w-xs bg-white/20 backdrop-blur-md border border-white/30 rounded-xl p-3 text-xs text-white shadow-lg">
⛔ Something went wrong.
</div>
</div>Neubrutalism alerts
Info Alert
Neubrutalism · Alerts
<div class="max-w-xs bg-white border-[3px] border-black rounded-none p-3 text-xs text-black shadow-[6px_6px_0px_#000]">
ℹ️ This is an informational message.
</div>Success Alert
Neubrutalism · Alerts
<div class="max-w-xs bg-white border-[3px] border-black rounded-none p-3 text-xs text-black shadow-[6px_6px_0px_#000]">
✅ Your changes have been saved.
</div>Warning Alert
Neubrutalism · Alerts
<div class="max-w-xs bg-white border-[3px] border-black rounded-none p-3 text-xs text-black shadow-[6px_6px_0px_#000]">
⚠️ This action can't be undone.
</div>Error Alert
Neubrutalism · Alerts
<div class="max-w-xs bg-white border-[3px] border-black rounded-none p-3 text-xs text-black shadow-[6px_6px_0px_#000]">
⛔ Something went wrong.
</div>Material alerts
Info Alert
Material · Alerts
<div class="max-w-xs bg-white rounded-lg p-3 text-xs text-slate-900 shadow-md">
ℹ️ This is an informational message.
</div>Success Alert
Material · Alerts
<div class="max-w-xs bg-white rounded-lg p-3 text-xs text-slate-900 shadow-md">
✅ Your changes have been saved.
</div>Warning Alert
Material · Alerts
<div class="max-w-xs bg-white rounded-lg p-3 text-xs text-slate-900 shadow-md">
⚠️ This action can't be undone.
</div>Error Alert
Material · Alerts
<div class="max-w-xs bg-white rounded-lg p-3 text-xs text-slate-900 shadow-md">
⛔ Something went wrong.
</div>Gradient alerts
Info Alert
Gradient · Alerts
<div class="max-w-xs bg-gradient-to-br from-fuchsia-500 via-purple-500 to-indigo-500 rounded-xl p-3 text-xs text-white shadow-lg shadow-purple-500/40">
ℹ️ This is an informational message.
</div>Success Alert
Gradient · Alerts
<div class="max-w-xs bg-gradient-to-br from-fuchsia-500 via-purple-500 to-indigo-500 rounded-xl p-3 text-xs text-white shadow-lg shadow-purple-500/40">
✅ Your changes have been saved.
</div>Warning Alert
Gradient · Alerts
<div class="max-w-xs bg-gradient-to-br from-fuchsia-500 via-purple-500 to-indigo-500 rounded-xl p-3 text-xs text-white shadow-lg shadow-purple-500/40">
⚠️ This action can't be undone.
</div>Error Alert
Gradient · Alerts
<div class="max-w-xs bg-gradient-to-br from-fuchsia-500 via-purple-500 to-indigo-500 rounded-xl p-3 text-xs text-white shadow-lg shadow-purple-500/40">
⛔ Something went wrong.
</div>Cyberpunk alerts
Info Alert
Cyberpunk · Alerts
<div class="bg-slate-950 p-6 rounded-xl inline-block">
<div class="max-w-xs bg-slate-900 border border-cyan-400 rounded-lg p-3 text-xs text-cyan-300 shadow-[0_0_15px_rgba(34,211,238,0.6)]">
ℹ️ This is an informational message.
</div>
</div>Success Alert
Cyberpunk · Alerts
<div class="bg-slate-950 p-6 rounded-xl inline-block">
<div class="max-w-xs bg-slate-900 border border-cyan-400 rounded-lg p-3 text-xs text-cyan-300 shadow-[0_0_15px_rgba(34,211,238,0.6)]">
✅ Your changes have been saved.
</div>
</div>Warning Alert
Cyberpunk · Alerts
<div class="bg-slate-950 p-6 rounded-xl inline-block">
<div class="max-w-xs bg-slate-900 border border-cyan-400 rounded-lg p-3 text-xs text-cyan-300 shadow-[0_0_15px_rgba(34,211,238,0.6)]">
⚠️ This action can't be undone.
</div>
</div>Error Alert
Cyberpunk · Alerts
<div class="bg-slate-950 p-6 rounded-xl inline-block">
<div class="max-w-xs bg-slate-900 border border-cyan-400 rounded-lg p-3 text-xs text-cyan-300 shadow-[0_0_15px_rgba(34,211,238,0.6)]">
⛔ Something went wrong.
</div>
</div>Retro alerts
Info Alert
Retro · Alerts
<div class="max-w-xs bg-orange-100 border-4 border-orange-400 rounded-2xl p-3 text-xs text-orange-700 ">
ℹ️ This is an informational message.
</div>Success Alert
Retro · Alerts
<div class="max-w-xs bg-orange-100 border-4 border-orange-400 rounded-2xl p-3 text-xs text-orange-700 ">
✅ Your changes have been saved.
</div>Warning Alert
Retro · Alerts
<div class="max-w-xs bg-orange-100 border-4 border-orange-400 rounded-2xl p-3 text-xs text-orange-700 ">
⚠️ This action can't be undone.
</div>Error Alert
Retro · Alerts
<div class="max-w-xs bg-orange-100 border-4 border-orange-400 rounded-2xl p-3 text-xs text-orange-700 ">
⛔ Something went wrong.
</div>Corporate alerts
Info Alert
Corporate · Alerts
<div class="max-w-xs bg-white border border-slate-200 rounded-md p-3 text-xs text-slate-800 shadow-sm">
ℹ️ This is an informational message.
</div>Success Alert
Corporate · Alerts
<div class="max-w-xs bg-white border border-slate-200 rounded-md p-3 text-xs text-slate-800 shadow-sm">
✅ Your changes have been saved.
</div>Warning Alert
Corporate · Alerts
<div class="max-w-xs bg-white border border-slate-200 rounded-md p-3 text-xs text-slate-800 shadow-sm">
⚠️ This action can't be undone.
</div>Error Alert
Corporate · Alerts
<div class="max-w-xs bg-white border border-slate-200 rounded-md p-3 text-xs text-slate-800 shadow-sm">
⛔ Something went wrong.
</div>Playful alerts
Info Alert
Playful · Alerts
<div class="max-w-xs bg-yellow-50 border-2 border-yellow-200 rounded-3xl p-3 text-xs text-yellow-800 ">
ℹ️ This is an informational message.
</div>Success Alert
Playful · Alerts
<div class="max-w-xs bg-yellow-50 border-2 border-yellow-200 rounded-3xl p-3 text-xs text-yellow-800 ">
✅ Your changes have been saved.
</div>Warning Alert
Playful · Alerts
<div class="max-w-xs bg-yellow-50 border-2 border-yellow-200 rounded-3xl p-3 text-xs text-yellow-800 ">
⚠️ This action can't be undone.
</div>Error Alert
Playful · Alerts
<div class="max-w-xs bg-yellow-50 border-2 border-yellow-200 rounded-3xl p-3 text-xs text-yellow-800 ">
⛔ Something went wrong.
</div>Using alerts well
Alerts communicate the result of an action or an important system status. Match the variant to the message: info for neutral notes, success to confirm that something worked, warning for situations that need attention, and error when an action failed and the user must fix something. Keep the message short and, for errors, tell the user what to do next.
Place inline alerts close to what they describe — directly above a form for submission errors, or at the top of a page for account-wide notices. For brief confirmations that should not shift the layout, use a toast from the Feedback category instead.
Accessibility tips
When an alert is inserted dynamically, give its container role="alert" for errors or role="status" for success and info messages so screen readers announce it. Each variant pairs color with an icon and wording, which keeps the meaning clear for users with color-vision deficiencies. Check that text on tinted backgrounds keeps a contrast ratio of at least 4.5:1.
Frequently Asked Questions
What is the difference between an alert and a toast?↓
An alert is part of the page layout and stays until the situation changes. A toast floats above the page and disappears after a few seconds, so it suits short confirmations rather than errors the user must act on.
How do I make an alert dismissible?↓
Add a close button with aria-label="Dismiss" inside the alert, and hide or remove the alert element in the button's click handler.
Which ARIA role should an alert use?↓
Use role="alert" for urgent messages such as errors, which interrupts the screen reader immediately. Use role="status" for polite updates such as success messages.
Last updated: