Notifications - Koala Design

Interactive demo

Click a button to trigger a toast notification. It will auto-dismiss after 5 seconds or you can close it manually.

Quote created successfully.

Something went wrong. Please try again.

Success toast

Green check icon with a success message. Used after create, update, and accept actions.

Quote created successfully.

<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.

Something went wrong. Please try again.

<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>

Inline pre-submit info card

Use this rounded inline card at the top of a page or above a form to call out something that will happen on submit — a discount that will be applied, a referral that will be attached, a quote that will be revised. Distinct from toasts (transient post-action) and from the blue koala-empty-state (informational, no implied action). Reference: the discount banner on /client/quotes/d/{code}.

Early bird (20% off) will be applied to your quote.

<div class="flex items-start gap-2 rounded-xl
            border border-emerald-200 dark:border-emerald-700
            bg-emerald-50 dark:bg-emerald-900/20
            px-4 py-3 text-emerald-800 dark:text-emerald-200">
    <koala-icon name="Discount" class="shrink-0 mt-0.5" />
    <span>
        <span class="font-medium">@discount.Name</span>
        (@amountLabel) will be applied to your quote.
    </span>
</div>

Pick the colour to match the message: emerald (a positive outcome — discount, referral, free thing), amber (a caution — confirm to continue, already-published version), blue (neutral guidance — same colour as koala-empty-state).

Server-side notifications

Use TempData helpers to show notifications from POST handlers. The _Notification.cshtml partial reads TempData and renders the toast.

// In a page model OnPost handler:
TempData.SetSuccessNotification("Settings saved");
TempData.SetErrorNotification("Unable to save changes");

Server-side notifications persist across redirects via TempData and are rendered by the layout's _Notification partial.