Components

Toast notifications

Optional add-on: load toast.css + toast.js, then use data-wckd-toast on a control or call window.wckd.toast(message, { tone, duration }).

Jump to:

Download & setup

Download WCKD UI Style guide

Load the kit from Get Started; use the style guide for utilities and tokens while wiring this component.

Default implementation

Declarative trigger

data-wckd-toast on the control; optional data-wckd-toast-tone (success | error) and data-wckd-toast-duration (ms).

Markup

<button type="button" data-wckd-toast="Saved." data-wckd-toast-tone="success">Save</button>

Configuration options

Each variant keeps the same markup contract as the default; add only the classes or attributes named in the heading.

JS API

Call window.wckd.toast after an async action resolves or fails.

Markup

async function saveLead(payload) {
  try {
    await api.save(payload);
    window.wckd.toast("Lead updated.", { tone: "success" });
  } catch (err) {
    window.wckd.toast("Could not save lead.", { tone: "error", duration: 4200 });
  }
}

When to use

  • Save/update confirmations after form submits.
  • Background action outcomes (queued, archived, published).
  • Soft failure notices where users can retry without a hard modal.

Implementation notes

  • Optional load for production pages: include wckd-ui-kit/components/toast.css after wckd-ui-components.css and wckd-ui-kit/components/toast.js after wckd-ui.js.
  • Toasts are intentionally non-blocking: they do not trap focus and should not replace inline validation, alerts, or modal confirmations for critical errors.
  • Use concise copy: one short sentence with a clear result (for example, “Lead saved.”).
  • API signature: window.wckd.toast(message, { tone, duration }).

Developer checklist

  • Keep critical errors in persistent UI (banner or inline message), not toast-only.
  • Prefer success/error tones for rapid scanning under load.
  • Verify toast wording in both light and dark themes.

← All components