Toast

Triggering with Sage.toast.trigger()

Toasts do not have a SageRails component template. They are JavaScript-only, templating is defined in sage-system/lib/toast/toast.template.js.

Non-dismissing Toast patterns

Non-dismissable toasts are used in our app to display 'loading' messages or to provide a CTA upon a interaction.

  
    // Sage.toast.trigger()
    // -------------------------------------------------------------
    // Triggers a toast with a toast options object and
    // returns the unique id of the toast.
    //
    // @param {{ message, icon, testId, type, timer, link = {text, href} }} - Toast options
    // @returns {unique id}
    //
    // Example:
    const myWonderfulToastId = Sage.toast.trigger({
        text: 'I will not dismiss via timer',
        timer: false,
        icon: 'check',
        type: 'danger',
        link: { text: 'next step', href 'example.com' },
        testId: 'toast_test_example',
      });


    // Sage.toast.dismiss()
    // -------------------------------------------------------------
    // Dismisses a toast with a unique id.
    //
    // @param {unique id}
    // @returns {boolean} – `false` if no toast of that ID exists,
    //                      `true` if exists and successfully dismissed
    //
    // Example:
    Sage.toast.dismiss(myWonderfulToastId);


    // Sage.toast.reset()
    // -------------------------------------------------------------
    // Removes all toasts from DOM
    //
    // @returns {boolean} – `false` if none exist, `true` if removed
    //
    // Example:
    Sage.toast.reset();