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.


1 Answer 1


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.
    – S..
    Jul 3, 2018 at 8:41

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .