Toast Message

ember install @freshworks/toast-message

Use toast messages for confirmation of delete actions, creating new objects (eg. tickets, groups) etc. Toast messages are used so that they don’t completely disrupt the user’s workflow but alert them anyway.

Usage

Add {{nucleus-toast-message}} to your application.hbs.

import Component from '@ember/component';
import { inject } from '@ember/service';
import { get } from '@ember/object'

export default Component.extend({
  flashMessages: inject(),
  actions: {
    success() {
      const flashMessages = get(this, 'flashMessages');
      flashMessages.success('Successfully saved!', {
        timeout: 2000,
        sticky: true,
        showProgress: true,
        priority: 100,
        content: {
          linkText: "Undo action",
          linkAction: this.testAction.bind(this) 
        }
      });
    },
    danger() {
      const flashMessages = get(this, 'flashMessages');
      flashMessages.danger('This account has been blocked for security reasons.', {
        timeout: 2000,
        sticky: true,
        priority: 100,
        showProgress: false
      });
    },
    info() {
      const flashMessages = get(this, 'flashMessages');
      flashMessages.info('Please wait, while we update properties', {
        timeout: 2000,
        sticky: false,
        priority: 100,
        showProgress: true
      });
    },
    warning() {
      const flashMessages = get(this, 'flashMessages');
      flashMessages.warning('Please fill in the required properties to close the ticket.', {
        timeout: 2000,
        sticky: false,
        priority: 100,
        showProgress: true
      });
    }
  },
  testAction() {
    alert("Undo clicked!");
  }
});

Guidelines

✅Do's

Keep the message short and to the point
Icon to the titles has to be contextual

🚫Dont's

Don’t have more than two lines of content
Don’t use toast messages on overlays (sliders/modals)
Don’t use toast messages for high priority information

Edit this page

Table

Toggle