Notifications
Toast notifications appear at the bottom-right of the viewport. They auto-dismiss after 5 seconds and
can be closed manually. Built with Alpine.js transitions matching the Portal's
_Notification.cshtml partial.
Interactive demo
Click a button to trigger a toast notification. It will auto-dismiss after 5 seconds or you can close it manually.
Success toast
Green check icon with a success message. Used after create, update, and accept actions.
<div class="flex items-center w-full max-w-sm p-4 text-gray-500 bg-white rounded-lg shadow-lg
dark:text-gray-400 dark:bg-gray-800">
<div class="inline-flex items-center justify-center shrink-0 w-8 h-8
text-emerald-600 bg-emerald-100 rounded-lg
dark:bg-emerald-900/50 dark:text-emerald-400">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<path d="m9 12 2 2 4-4"></path>
</svg>
</div>
<div class="ms-3 text-sm font-normal">@notification.Message</div>
<button type="button" x-on:click="show = false" class="ms-auto ..." aria-label="Close">
<!-- close X SVG -->
</button>
</div>
Error toast
Red X icon with an error message. Used when an action fails.
<div class="inline-flex items-center justify-center shrink-0 w-8 h-8
text-red-600 bg-red-100 rounded-lg
dark:bg-red-900/50 dark:text-red-400">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<path d="m15 9-6 6"></path>
<path d="m9 9 6 6"></path>
</svg>
</div>
Positioning and layout
Notifications are positioned in a fixed container at the bottom of the viewport. The container uses
x-sync so it updates
after any Alpine-AJAX response, even when outside the main content target.
<!-- In _Layout.cshtml -->
<div x-sync id="notifications"
class="fixed bottom-4 inset-x-4 sm:inset-x-auto sm:right-6 z-50
flex justify-center sm:justify-end pointer-events-none">
<div class="pointer-events-auto">
<partial name="_Notification"/>
</div>
</div>
Server-side usage
Set notifications via TempData
in the page model's OnPost handler
before redirecting. The notification survives one redirect and is consumed by the partial.
// In a page model OnPost handler
TempData.SetNotification(NotificationType.Success, "Quote created successfully.");
return RedirectToPage("/Partner/Quotes/ViewQuote", new { id = quote.Id });
// Error example
TempData.SetNotification(NotificationType.Error, "Something went wrong. Please try again.");