Has anyone displayed a toast message with buttons in a Lightning Component?

I need to add 'OK' and 'Cancel' buttons to the toast message.

This is my code for the toast message:

var resultsToast = $A.get("e.force:showToast");
    "message": 'Are you sure you want to Cancel this form?',
    "mode": 'sticky'

Is that possible? Please suggest other alternatives if not.



No, a toast is an informative message (e.g. an error occurred or something else). It is not a modal dialog with buttons you can configure. You'll notice that there's absolutely no way to know that a toast has even been closed/dismissed, much less know the disposition of that closure.

The correct method would be to use the lightning:overlayLibrary (or create your own modal dialog). How it works is given in the documentation. First, you include overlay library:

<lightning:overlayLibrary aura:id="overlayLib"/>

And then you call it when you need it:

    var modalBody;
    $A.createComponent("c:modalContent", {},
       function(content, status) {
           if (status === "SUCCESS") {
               modalBody = content;
                   header: "Application Confirmation",
                   body: modalBody, 
                   showCloseButton: true,
                   cssClass: "mymodal",
                   closeCallback: function() {
                       alert('You closed the alert!');

Where c:modalContent is the thing you want to show in the modal dialog. I suggest you read the documentation for more information.

Further down, they demonstrate a OK/Cancel dialog. It's kind of complicated, so I won't reproduce it here, but basically you create a custom footer component that has the buttons to show and a custom modal component for the body to show.

  • Thanks @sfdcfox, I ended up creating a modal with OK/Cancel button. – N.. Jul 3 '18 at 8:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.