// Generated by scripts/generate-showcase.mjs. Do not edit directly. page ToasterDetail { layout = "showcase" state playground_color = ctx.url.searchParams.get("pg_color") ?? "info" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_position = ctx.url.searchParams.get("pg_position") ?? "bottom-right" state playground_duration = Number(ctx.url.searchParams.get("pg_duration") ?? "4500") state playground_max = Number(ctx.url.searchParams.get("pg_max") ?? "4") state playground_pauseOnHover = (ctx.url.searchParams.get("pg_pauseOnHover") ?? "true") === "true" state playground_showIcon = (ctx.url.searchParams.get("pg_showIcon") ?? "true") === "true" state playground_successIcon = ctx.url.searchParams.get("pg_successIcon") ?? "" state playground_dangerIcon = ctx.url.searchParams.get("pg_dangerIcon") ?? "" state playground_warningIcon = ctx.url.searchParams.get("pg_warningIcon") ?? "" state playground_infoIcon = ctx.url.searchParams.get("pg_infoIcon") ?? "" state playground_closable = (ctx.url.searchParams.get("pg_closable") ?? "true") === "true" state playground_showProgress = (ctx.url.searchParams.get("pg_showProgress") ?? "true") === "true" state playground_closeLabel = ctx.url.searchParams.get("pg_closeLabel") ?? "Toaster" state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" seo { title = "Toaster" description = "Reusable toaster component." } view {
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
Component code
<Toaster
  closeLabel="Toaster"
/>
Event outputInteract with the preview to inspect the typed payload.
Component props15 controls
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.

01
Live preview
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.

PropTypeDefaultRequired
colorstring"info"No
sizestring"default"No
positionstring"bottom-right"No
durationnumber4500No
maxnumber4No
pauseOnHoverbooleantrueNo
showIconbooleantrueNo
successIconstring""No
dangerIconstring""No
warningIconstring""No
infoIconstring""No
closablebooleantrueNo
showProgressbooleantrueNo
closeLabelstring"Dismiss notification"No
classstring""No
} }