Alerts & Toasts

Three feedback systems coexist: inline alerts and callouts (CSS), page-wide banners, and programmatic toasts dispatched via a global event.

Inline Alerts

Info — something you should know.

Success — your changes were saved.

Warning — double-check this.

Error — something went wrong.

HTML

<div class="ziom-alert ziom-alert-info">Info &mdash; something you should know.</div>
<div class="ziom-alert ziom-alert-success">Success &mdash; your changes were saved.</div>
<div class="ziom-alert ziom-alert-warning">Warning &mdash; double-check this.</div>
<div class="ziom-alert ziom-alert-danger">Error &mdash; something went wrong.</div>

Callouts

Emphasized notes with a colored left border.

Note

This is important information to be aware of.

HTML

<div class="ziom-callout ziom-callout-info">
  <div class="ziom-callout-content">
    <div class="ziom-callout-title">Note</div>
    <div class="ziom-callout-description">This is important information to be aware of.</div>
  </div>
</div>

Banner

HTML

<div class="ziom-banner ziom-banner-info">
  <div class="ziom-banner-content">
    <span class="ziom-banner-message">New feature available! <a href="#">Learn more</a></span>
  </div>
  <button class="ziom-banner-dismiss" aria-label="Dismiss"><i class="ph ph-x"></i></button>
</div>

Toasts

Toasts are fired programmatically by dispatching a ziom:toast CustomEvent on window. The global toast surface (shared/ziom_toast) listens and renders it. Try the live buttons:

JavaScript

window.dispatchEvent(new CustomEvent("ziom:toast", {
  detail: { message: "Saved!", level: "success" } // success | danger | warning | info
}))