Alerts & Toasts

Three feedback systems coexist: inline alerts and callouts (CSS), page-wide banners, and toasts, the global surface every flash message and every transient confirmation goes through.

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

Every layout renders the toast surface (shared/toasts), a fixed stack in the bottom-right corner. Toasts dismiss themselves after five seconds, pause while hovered or focused, and never reflow the page. Try the live buttons:

From the server

A plain notice: or alert: flash already renders as a toast. Use the show_toast controller helper when the message needs a title or an action link.

Ruby

redirect_to customers_path, notice: "Customer was successfully created"

show_toast("Sienna Hewitt has been added to your workspace.",
           title: "New customer created",
           link_text: "View customer",
           link_url: customer_path(customer))
redirect_to customers_path

From JavaScript

JavaScript

import { showToast } from "../toast"

showToast("Deal archived")
showToast("Could not send the text", { level: "danger" }) // success | danger | warning | info
showToast("Client created", { title: "Saved", linkText: "View client", linkUrl: url })