Toasts

A toast is a brief, non-blocking notification that appears temporarily to confirm an action or surface a status message.

Examples

Success Toast

<div class="ro-toast" data-ro-mode="inverted" role="status" aria-live="polite">
<div class="ro-toast-header">
  <div class="ro-toast-header-left">
    <i class="ro-toast-icon ro-icon ro-icon-check-circle ro-size-lg ro-u-text-success"></i>
    <h3 class="ro-toast-title">Payment confirmed</h3>
  </div>
  <div class="ro-toast-header-actions">
    <button class="ro-btn ro-variant-ghost ro-size-sm ro-toast-close" aria-label="Close" type="button">
      <i class="ro-icon ro-icon-x-small ro-size-lg"></i>
    </button>
  </div>
</div>
<p class="ro-toast-body">Your transaction was processed successfully.</p>
</div>

Preview

Payment confirmed

Your transaction was processed successfully.

Variant Icons

Variant	Icon class
Success	ro-icon-check-circle with ro-u-text-success
Danger	ro-icon-bubble-annotation-alert with ro-u-text-danger
Info	ro-icon-info-circle with ro-u-text-info
Warning	ro-icon-warning-error with ro-u-text-warning

<div class="ro-toast" data-ro-mode="inverted">
<div class="ro-toast-header">
  <div class="ro-toast-header-left">
    <i class="ro-toast-icon ro-icon ro-icon-warning-error ro-size-lg ro-u-text-warning"></i>
    <h3 class="ro-toast-title">Low disk space</h3>
  </div>
</div>
<p class="ro-toast-body">Less than 10% space remaining on your server.</p>
</div>

Preview

Low disk space

Less than 10% space remaining on your server.

Structure

Class	Description
.ro-toast	Root notification panel.
.ro-toast-header	Top row.
.ro-toast-header-left	Icon + title cluster.
.ro-toast-header-left--with-button	Left cluster variant when actions sit inline.
.ro-toast-header-actions	Close or secondary actions column.
.ro-toast-title-stack	Title + subtitle stack (Vue layout).
.ro-toast-icon	Icon slot in the header.
.ro-toast-title	Primary message text.
.ro-toast-body	Optional secondary content.
.ro-btn.ro-toast-close	Close button modifier.
.ro-btn.ro-toast-more	Secondary action button modifier.

For programmatic toast stacks in Vue apps, see @ringover/ringo-ui (RoToast, RoToastProvider, RoToastTrigger).