Notifications
Notification Container and Panel
<div class="notifications-container">
<div class="notifications-panel">
<!--Notifications in here -->
</div>
</div>- Global notification live region, render this permanently at the end of the document
- Notification panel, dynamically insert this into the live region when it needs to be displayed
Notifications at the bottom
<div class="notifications-container notifications-bottom">
<div class="notifications-panel">
<!--Notifications in here -->
</div>
</div>Add notifications to the bottom of the page
Notification
<div class="notification">
<div class="p-4">
<div class="flex items-start">
<div class="flex-shrink-0">
<i class="fa-light fa-circle-check text-md items-center text-success-400"></i>
</div>
<div class="ml-3 w-0 flex-1 pt-0.5">
<p class="text-sm font-medium text-header">Successfully saved!</p>
<p class="mt-1 text-sm text-body">Anyone with a link can now view this file.</p>
</div>
<div class="ml-4 flex flex-shrink-0">
<button type="button" class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
<i class="fa-light fa-times text-md items-center text-body/50"></i>
</button>
</div>
</div>
</div>
</div>Notification with a button group
<div class="notification">
<div class="p-4">
<div class="flex items-start">
<div class="flex-shrink-0">
<i class="fa-light fa-spider text-md items-center text-danger-400"></i>
</div>
<div class="ml-3 w-0 flex-1 pt-0.5">
<p class="text-sm font-medium text-header">Crawl failed!</p>
<p class="mt-1 text-sm text-body">Your crawl has errored.</p>
<div class="button-group inline-flex mt-4">
<button class="btn-default text-xs"><i class="fa-solid fa-repeat text-xs items-center opacity-40"></i> Restart</button>
<button class="btn-default whitespace-nowrap text-xs"><i class="fa-solid fa-gear text-xs items-center opacity-40"></i>Change Settings</button>
</div>
</div>
<div class="ml-4 flex flex-shrink-0">
<button type="button" class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
<i class="fa-light fa-times text-md items-center text-body/50"></i>
</button>
</div>
</div>
</div>
</div>