Alert
- Home
- •
- Components
- •
- Alert
Light Color
This is an info alert — check it out!
This is an success alert — check it out!
This is an warning alert — check it out!
This is an error alert — check it out!
<div class="py-3 px-4 md:px-6 lg:px-8 rounded-xl bg-info-300/10 flex justify-between items-center">
<div class="flex gap-5 items-center">
<i class="las la-info-circle text-3xl text-info-300"></i>
<span class="l-text font-medium text-info-300">This is an info alert — check it out!</span>
</div>
<span class="cursor-pointer size-9 rounded-full hover:bg-info-300/30 duration-300 f-center">
<i class="las la-times text-2xl text-info-300"></i>
</span>
</div>
Outlined
This is an info alert — check it out!
This is an success alert — check it out!
This is an warning alert — check it out!
This is an error alert — check it out!
<div class="py-3 px-4 md:px-6 lg:px-8 rounded-xl border border-info-300 bg-neutral-20 dark:bg-neutral-903 flex justify-between items-center">
<div class="flex gap-5 items-center">
<i class="las la-info-circle text-3xl text-info-300"></i>
<span class="l-text font-medium text-info-300">This is an info alert — check it out!</span>
</div>
<span class="cursor-pointer size-9 rounded-full hover:bg-neutral-0 dark:bg-neutral-904 duration-300 f-center">
<i class="las la-times text-2xl text-info-300"></i>
</span>
</div>
With Action Button
This is an info alert — check it out!
This is an info alert — check it out!
This is an info alert — check it out!
<div class="py-3 px-4 flex-wrap gap-4 rounded-xl border border-info-300/30 bg-info-300 flex justify-between items-center">
<div class="flex gap-4 items-center text-neutral-0">
<i class="las la-info-circle text-3xl"></i>
<span class="m-text font-medium">This is an info alert — check it out!</span>
</div>
<div class="flex gap-4">
<button class="rounded-lg py-2 px-5 bg-transparent text-white font-semibold border border-neutral-20">Undo</button>
<button class="rounded-lg py-2 px-5 bg-neutral-0 text-info-300 border border-neutral-0 font-semibold">Action</button>
</div>
</div>
Filled
This is an info alert — check it out!
This is an success alert — check it out!
This is an warning alert — check it out!
This is an error alert — check it out!
<div class="py-3 px-4 md:px-6 lg:px-8 rounded-xl text-neutral-0 bg-info-300 flex justify-between items-center">
<div class="flex gap-5 items-center">
<i class="las la-info-circle text-3xl"></i>
<span class="l-text font-medium">This is an info alert — check it out!</span>
</div>
<span class="cursor-pointer size-9 rounded-full hover:bg-info-300/30 duration-300 f-center">
<i class="las la-times text-2xl"></i>
</span>
</div>
Addtional Content
Info
This is an info alert — check it out!
Info
This is an info alert — check it out!
Info
This is an info alert — check it out!
Info
This is an info alert — check it out!
<div class="py-3 px-4 md:px-6 lg:px-8 rounded-xl border border-info-300/30 bg-info-300/10">
<div class="flex justify-between items-center mb-3">
<div class="flex gap-4 items-center">
<i class="las la-info-circle text-3xl text-info-300"></i>
<span class="l-text font-medium text-info-300">Info</span>
</div>
<span class="cursor-pointer size-9 rounded-full hover:bg-info-300/30 duration-300 f-center">
<i class="las la-times text-2xl text-info-300"></i>
</span>
</div>
<p class="text-sm">This is an info alert — <span class="font-semibold">check it out!</span></p>
</div>