Skip to main content

buildfire.components.toast

danger

Toast component is deprecated. Please use dialog.toast instead.

The toast component provides brief, contextual messages about app processes at the bottom of the screen. Each toast message contains a message and an optional action.

Requirements​

Widget​

<head>
  <!-- JS -->
  <script src="../../../scripts/buildfire.min.js"></script>
  <script src="../../../scripts/buildfire/components/toast/toast.js"></script>
</head>

Methods​

showToastMessage()
​

buildfire.components.toast.showToastMessage(options, callback)

This method is used to show a toast message. The toast will automatically close after a short period of time.

buildfire.components.toast.showToastMessage({ text: "Hi. I am a toast!" });

options​

NameTypeRequiredDescriptionDefault
textstringyesToast message to be displayed
actionobjectnoCustom action object or an action item to be executed when action button is clicked. See Action Items
hideDismissbooleannoIf true, the dismiss button will be hidden from the toast.false

callback(err, action)​

When the action button is clicked, the action is returned in the callback.

NameTypeDescription
errstringError string, null when operation is successful
actionobjectAction passed to options.action

More Examples​

buildfire.components.toast.showToastMessage(
  {
    text: "Hi I am toast with action!",
    action: {
      customData: "Action Clicked",
    },
  },
  (err, action) => {
    if (err) return console.error(err);

    console.log(action.customData);
  }
);

closeToastMessage()
​

buildfire.components.toast.closeToastMessage(options, callback)

This method is used to close toast message.

buildfire.components.toast.closeToastMessage();

options​

NameTypeRequiredDescriptionDefault
forcebooleannoIf true, the toast will close immediately.false

callback(err)​

Executed when the closing action is successfully registered.

NameTypeDescription
errstringError string, null when operation is successful

More examples​

buildfire.components.toast.closeToastMessage(
  {
    force: true,
  },
  (err) => {
    if (err) console.error(err);

    console.log("Toast closed");
  }
);