Hero Image

Components

Toast

Toast belongs to the same family and is a variant of the dialog component. It shares the same queue system and many features and functions as the dialog.

See documentation for the dialog for more information about properties, functions and callbacks.

Code


  import { Dialog, DialogConfirm, DialogConstants } from 'trinidad-ui';

  const _dialog = new DialogConfirm({
    icon: 'tips',
    branding: DialogConstants.branding.NEUTRAL,
    area: DialogConstants.area.TOASTER,
    title: 'Hi, nice to see you.',
    message: [
      {
        type: DialogConstants.message.TEXT,
        text:
        'Checkout different variants of dialogs and toasters here.'
      }
    ],
    actions: [
      {
        title: 'Roger that',
        callback: function() {
        _dialog.close();
      }
      }
    ]
  });

    //-----------------------------
    // The no queue option
    //-----------------------------

    const dialog = new Dialog();
    dialog.add(_dialog);


    //-----------------------------
    //  To use the dialog/toasts queue system you need to set up a global namespace.
    //-----------------------------

    window.ds = window.ds || {};
    window.ds.ui = window.ds.ui || {};
    window.ds.ui.toast = window.ds.ui.toast || {};

    if (Object.keys(window.ds.ui.toast).length === 0) {
      window.ds.ui.toast = new Dialog();
      window.ds.ui.toast.add(_dialog);
    } else {
      window.ds.ui.toast.add(_dialog);
    }

    //-----------------------------
    // For Trinidad users
    //-----------------------------
    // In the world of Trinidad you can't use import, so you need to add
    // a dependency to 'dialog' in your controller.
    // Replace all 'DialogConstants' with svs.ui.dialog.{desired_constant}
    // Replace new DialogConfirm with new svs.ui.dialog.Confirm({...
    // Replace dialog.add(_dialog) with svs.ui.dialog.api.add(dialog);

Properties

Check out Dialog component for more information on props, methods, callbacks etc.

Accessibility

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines.

Read more about WCAG 2.1 AA.