Select a title

UI Toolkit

v3.1.5

Toasts

Toasts (aka Flash Messages) are used to inform users of a completed or failed action. Messages can be dismissed by the user, either with the close button or by swiping left/right. Messages can also be set to self dismiss after an arbitrary amount of time.

JavaScript API

New messages/errors can be created by calling new zd.Toast({}). The class constructor accepts an options object.

zd.Toast({
element,
title,
message,
type: 'message',
dismiss: false
})

Use these as follows

Property Default Value
element null A reference to a pre-existing DOM element (for internal use)
title null The title (bold text) of the message
message null The message body
type message The message type message or error
dismiss false For the message to auto-dismiss after 1 second set to 1000

To create a self dismissing message that disappears after 2 seconds you would use the following:

new zd.Toast({
title: "Info",
message: "Standard message that dismisses after 2 seconds.",
dismiss: 2000
})

Server rendering

Messages and errors can be rendered server-side by adding the following (example) to the bottom of the page body. JavaScript will then automatically pick up these messages and add event handlers/auto dismiss timers.

<div class="Toasts">
  <div class="Toasts-items">
    <div class="Toasts-item u-accel" data-type="error" data-dismiss="false"><strong>Error</strong> Your policy was not created, please try again.
      <a href="#" div class="Toasts-item-close"><i class="Icons-close"></i></a>
    </div>
  </div>
</div>