Core component

Toaster

Reusable toaster component.

15 props0 slots3 outputsTheme readyResponsive

Interactive playground

Configure Toaster

Change any prop and inspect the server-rendered component immediately.

Live preview

{item.title}

{item.message}

Component code

<Toaster
  closeLabel="Toaster"
/>

Event outputInteract with the preview to inspect the typed payload.

Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Raise notifications from anywhere

Mount one host, then call toast() from any client function. Each tone brings its own icon and colour, and hovering the stack holds a toast open while you read it. Actions here show label-only for brevity; attach onClick/onAction handlers from a functions{} block.

Live preview

{item.title}

{item.message}

Component usage.wrn

<Toaster
  closeLabel="Toaster"
/>

Component outputs

Receive every typed component output

Use declarative output handlers in .wrn files or register a direct output handler from JavaScript. The canonical API exposes payload and does not require event.detail.

@showFires when the component emits the show event.

@dismissFires after the announcement or feedback surface is dismissed.

@actionFires when the component's primary or item action is activated.

Declarative handlers.wrn

<Toaster
  @show='console.log(payload)'
  @dismiss='console.log(payload)'
  @action='console.log(payload)'
/>

Direct output handlers.js

import { registerOutputHandler } from "@wrnexus/csr/outputs"

const component = document.querySelector("[data-ui-component=\"Toaster\"], [data-component=\"Toaster\"]")

if (component) registerOutputHandler(component, "show", (payload) => {
  console.log("show", payload)
})

if (component) registerOutputHandler(component, "dismiss", (payload) => {
  console.log("dismiss", payload)
})

if (component) registerOutputHandler(component, "action", (payload) => {
  console.log("action", payload)
})

Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

Prop	Type	Default	Required
`color`	string	`"info"`	No
`size`	string	`"default"`	No
`position`	string	`"bottom-right"`	No
`duration`	number	`4500`	No
`max`	number	`4`	No
`pauseOnHover`	boolean	`true`	No
`showIcon`	boolean	`true`	No
`successIcon`	string	`""`	No
`dangerIcon`	string	`""`	No
`warningIcon`	string	`""`	No
`infoIcon`	string	`""`	No
`closable`	boolean	`true`	No
`showProgress`	boolean	`true`	No
`closeLabel`	string	`"Dismiss notification"`	No
`class`	string	`""`	No