Alert
Alerts are used to communicate a state that affects a system, feature, or page.
Basic
PreviewCode
<div role="alert" class="w-full rounded-lg bg-blue-50 p-4 text-sm font-medium text-blue-800 ring-1 ring-blue-100">Let's get started! Fill out the form below to create your account.</div>
<div role="alert" class="w-full rounded-lg bg-slate-50 p-4 text-sm font-medium text-slate-800 ring-1 ring-slate-100">You're almost there! Please review the form below.</div>
<div role="alert" class="w-full rounded-lg bg-amber-50 p-4 text-sm font-medium text-amber-800 ring-1 ring-amber-100">Are you sure you want to delete this item? This action cannot be undone.</div>
<div role="alert" class="w-full rounded-lg bg-red-50 p-4 text-sm font-medium text-red-800 ring-1 ring-red-100">Something went wrong with your submission.</div>
Let's get started! Fill out the form below to create your account.
You're almost there! Please review the form below.
Are you sure you want to delete this item? This action cannot be undone.
Something went wrong with your submission.
With Icon
PreviewCode
<div role="alert" class="flex w-full space-x-4 rounded-lg bg-red-50 p-4 text-red-800 ring-1 ring-red-100">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0">
<circle cx="12" cy="12.5" r="9">
</circle>
<path d="M12 7.75v5.5m-.005 3.25h.01">
</path>
</svg>
<h3 class="text-sm font-medium">Something went wrong with your submission.</h3>
</div>
Something went wrong with your submission.
With Description
PreviewCode
<div role="alert" class="flex w-full space-x-4 rounded-lg bg-red-50 p-4 text-red-800 ring-1 ring-red-100">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0">
<circle cx="12" cy="12.5" r="9">
</circle>
<path d="M12 7.75v5.5m-.005 3.25h.01">
</path>
</svg>
<div class="space-y-1">
<h3 class="text-sm font-medium">Something went wrong with your submission.</h3>
<div class="text-sm text-red-700">Please check your connection and try again. If the problem persists, contact support.</div>
</div>
</div>
Something went wrong with your submission.
Please check your connection and try again. If the problem persists, contact support.
With Action Link
PreviewCode
<div class="flex space-x-4 rounded-lg bg-slate-50 p-4 text-slate-950 ring-1 ring-slate-200" role="alert">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0">
<circle cx="12" cy="12.5" r="9">
</circle>
<path d="M12 16.5v-5h-.5m0 5h1m-.505-8h.01">
</path>
</svg>
<div>
<h3 class="text-sm font-medium">You have a new invoice due. Pay now to avoid late fees.</h3>
<div class="mt-2 text-sm text-slate-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam.</div>
<a href="#" class="mt-4 inline-flex text-sm font-medium text-slate-950 underline">Pay Now</a>
</div>
</div>
You have a new invoice due. Pay now to avoid late fees.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam.
Pay NowWith Close
PreviewCode
<div role="alert" class="flex w-full items-center justify-between space-x-4 rounded-lg bg-blue-50 p-4 ring-1 ring-blue-100">
<div class="flex items-center space-x-4">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0 text-blue-800">
<circle cx="12" cy="12.5" r="9">
</circle>
<path d="M12 7.75v5.5m-.005 3.25h.01">
</path>
</svg>
<h3 class="text-sm font-medium text-blue-800">Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
</div>
<button>
<span class="sr-only">Dismiss</span>
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0 text-blue-800">
<path d="M19 5 5 19M5 5l14 14">
</path>
</svg>
</button>
</div>