components toast

components/toast

Import: import { Toast, ToastRegion } from "@tundralibs/ui/toast"

Rendered in every variant on the catalogue (deno task build:demos, then demo/index.html). Guides: Getting started · rAPId integration · Theming.

Functions

Toast

Toast(props: ToastProps): Html

A single toast. Push it into the region via rAPId's own swap runtime — e.g. a trigger with data-target="#toast-region" data-swap="append" — rather than any bespoke JS; toast.js only adds the auto-dismiss timer.

ToastRegion

ToastRegion(props = …: { id?: string; toasts?: Html[]; max?: number }): Html

The fixed-position container a page renders once; toasts get appended into it.

Types

ToastVariant

• "neutral"
• "success"
• "warning"
• "danger"
• "info"
• "ink"

ToastProps

Prop	Type	Required	Description
id	string
variant	ToastVariant
body	`string	Html`	yes
meta	`string	Html`
icon	`Html	"false"`
action	{ label: string; attrs?: Attrs }		Inline action such as "Undo" — give it data-action/data-target to swap.
dismissible	boolean
autoDismissMs	number		Auto-remove after this many ms (see toast.js).
attrs	Attrs

Usage

Each example as the rAPId call and the HTML it renders — the markup a plain page writes by hand. Icons are inline SVG in the real output; they are shortened to <svg …>…</svg> here.

A success toast with an action

Return this from a route the trigger appends into #toast-region (data-target="#toast-region" data-swap="append").

Toast({
  variant: "success",
  body: "Reminder sent to Contoso Ltd",
  action: {
    label: "Undo",
    attrs: {
      "data-action": "/invoices/INV-2047/remind/undo",
      "data-method": "post",
      "data-target": "#toast-region",
      "data-swap": "append",
    },
  },
  dismissible: true,
  autoDismissMs: 6000,
})

<div class="toast toast--success" data-dismissible="" data-toast-autodismiss="6000">
  <span class="toast__icon">
    <svg width="13" height="13" width="2" …>…</svg>
  </span>
  <div class="toast__body">Reminder sent to Contoso Ltd</div>
  <button type="button" class="toast__action" data-action="/invoices/INV-2047/remind/undo" data-method="post" data-target="#toast-region" data-swap="append">Undo</button>
  <button type="button" class="toast__close" data-dismiss aria-label="Dismiss">
    <svg width="15" height="15" width="2" …>…</svg>
  </button>
</div>

The region the shell renders once

ToastRegion()

<div class="toast-region" id="toast-region" role="status" aria-live="polite"></div>

CSS hooks

Classes defined by components/toast/toast.css — structural, token-driven; override from an unlayered stylesheet (see Theming):

.toast, .toast--danger, .toast--info, .toast--ink, .toast--success, .toast--warning, .toast-region, .toast__action, .toast__body, .toast__close, .toast__icon, .toast__meta

Behaviour

components/toast/toast.js ships in ui.js (delegated on document, re-initialised after a rAPId swap).

Attributes it reads or writes: data-swap, data-target, data-toast-autodismiss, data-toast-max, data-toast-open, data-toast-region.