English
Espanol
Japanese
Recently Browses
- Apps Api
- Dashboard Marketing
Memebers
-
Ethan Smith Backend Developer -
Isabella Garcia Digital Marketer -
Noah Walker Full Stack Developer
Filters
-
customers:
All customers list
-
products:
Bestselling products
-
events:
All upcoming events
Alert
- Home
- Components
- Alert
Alert Basic
Database fetched successfully
<div role="alert" class="flex flex-wrap items-center px-4 py-2.5 rounded-lg bg-green-500/20 text-green-800 dark:text-green-200">
Database fetched successfully
</div>
Icon
Database fetched successfully
<div role="alert" class="flex gap-2.5 items-center px-4 py-2.5 rounded-lg bg-green-500/20 text-green-800 dark:text-green-200">
<span class="icon-[lucide--database-zap] text-xl shrink-0"></span>
<div class="flex-grow">
Database fetched successfully
</div>
</div>
Title
Database fetched successfully
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<!--alert-->
<div role="alert"
class="flex gap-2.5 items-start px-4 py-2.5 rounded-lg bg-green-500/20 text-green-800 dark:text-green-200">
<span class="icon-[lucide--database-zap] text-xl shrink-0 mt-1"></span>
<div class="flex-grow">
<span class="text-lg font-medium">
Database fetched successfully
</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
</div>
Closable
Database fetched successfully
<div role="alert"
class="alert fade show flex flex-wrap items-center justify-between px-4 py-2.5 rounded-lg bg-green-500/20 text-green-800 dark:text-green-200">
Database fetched successfully
<!--:Close alert:-->
<span data-bs-dismiss="alert" aria-label="Close" class="icon-[lucide--x] text-xl cursor-pointer ms-3"></span>
</div>
Variant
This is a Primary alert
This is a Default alert
This is a Warning alert
This is a Info alert
This is a Success alert
This is a Danger alert
<!--alert primary-->
<div role="alert"
class="flex flex-wrap items-center px-4 py-2.5 rounded-lg bg-primary/20 text-primary-deep dark:text-primary">
This is a Primary alert
</div>
<!--alert default-->
<div role="alert" class="flex flex-wrap items-center px-4 py-2.5 rounded-lg bg-stone-100 dark:bg-stone-800">
This is a Default alert
</div>
<!--alert warning-->
<div role="alert"
class="flex flex-wrap items-center px-4 py-2.5 rounded-lg bg-yellow-500/20 text-yellow-800 dark:text-yellow-200">
This is a Warning alert
</div>
<!--alert info-->
<div role="alert"
class="flex flex-wrap items-center px-4 py-2.5 rounded-lg bg-sky-500/10 text-blue-800 dark:text-blue-200">
This is a Info alert
</div>
<!--alert success-->
<div role="alert"
class="flex flex-wrap items-center px-4 py-2.5 rounded-lg bg-green-500/20 text-green-800 dark:text-green-200">
This is a Success alert
</div>
<!--alert danger-->
<div role="alert"
class="flex flex-wrap items-center px-4 py-2.5 rounded-lg bg-red-500/10 text-red-800 dark:text-red-200">
This is a Danger alert
</div>