Toast

Examples

Container Setup

Place a single <rhx-toast-container> in your layout. All toasts render inside it.

A <rhx-toast-container> is already included in this demo site's layout. Toasts will appear in the top-right corner.

<!-- Place once in your _Layout.cshtml -->
<rhx-toast-container rhx-position="top-end"
                     rhx-max="5"
                     rhx-duration="5000" />

Trigger Toasts from Server

Click the buttons to trigger toasts via Response.HxToast() from the server.

<rhx-button rhx-variant="success"
            hx-post="/Docs/Components/Toast?handler=ShowSuccess"
            hx-target="#toast-demo-target"
            hx-swap="innerHTML">
    Show Success Toast
</rhx-button>
<rhx-button rhx-variant="danger"
            hx-post="/Docs/Components/Toast?handler=ShowError"
            hx-target="#toast-demo-target"
            hx-swap="innerHTML">
    Show Error Toast
</rhx-button>

Variants

This is a neutral notification.

New feature available!

Item saved successfully!

Your session expires in 5 minutes.

Failed to delete the item.

<!-- Toasts are typically created via server-side helpers.
     These static examples show the rendered HTML structure. -->
<rhx-toast rhx-variant="neutral">This is a neutral notification.</rhx-toast>
<rhx-toast rhx-variant="brand">New feature available!</rhx-toast>
<rhx-toast rhx-variant="success">Item saved successfully!</rhx-toast>
<rhx-toast rhx-variant="warning">Your session expires in 5 minutes.</rhx-toast>
<rhx-toast rhx-variant="danger">Failed to delete the item.</rhx-toast>

Server-Side: Event Trigger

The recommended approach. Sets HX-Trigger-After-Settle header; JavaScript creates the toast.

// In your Razor Page handler:
public IActionResult OnPostSave()
{
    // ... save logic ...
    Response.HxToast("Changes saved!", "success");
    return Partial("_Form", Model);
}

// Or with a custom duration:
Response.HxToast("Processing...", "brand", duration: 8000);

Server-Side: OOB Swap

For custom toast content. Server renders the full <rhx-toast> HTML and swaps it into the container.

// Return a toast via out-of-band swap:
public IActionResult OnPostDelete()
{
    // ... delete logic ...
    return this.HxToastOob("Item deleted", "danger", duration: 3000);
}

Container Properties

Properties for <rhx-toast-container>:

Properties

Property	Type	Default	Description
`rhx-position`	`string`	`top-end`	Position on screen: top-start, top-center, top-end, bottom-start, bottom-center, bottom-end
`rhx-max`	`int`	`5`	Maximum number of toasts shown simultaneously
`rhx-duration`	`int`	`5000`	Default auto-dismiss duration in milliseconds (0 = no auto-dismiss)

Toast Properties

Properties for <rhx-toast>:

Properties

Property	Type	Default	Description
`rhx-variant`	`string`	`neutral`	Color variant: neutral, brand, success, warning, danger
`rhx-closable`	`bool`	`true`	Show a close/dismiss button
`rhx-duration`	`int?`	`-`	Auto-dismiss duration in ms (overrides container default, 0 = no auto-dismiss)
`rhx-icon`	`string`	`-`	Override the default icon for the variant

Examples

Container Setup

Trigger Toasts from Server

Variants

Server-Side: Event Trigger

Server-Side: OOB Swap

Container Properties

Properties

Toast Properties

Properties

Accessibility

Navigation