How to show hyperlink in LWC toast

UPDATE [July 8, 2020]

LWC now supports showing hyperlinks in the toast message.

This seems to have been introduced in last couple of months as commented on the idea that I had created at the time of writing this answer first. The implementation details/example is documented, excerpt below.

Displaying Links in Toasts
To display a link in the message, use the messageData attribute to pass in url and label values for the message string.

const event = new ShowToastEvent({
    "title": "Success!",
    "message": "Record {0} created! See it {1}!",
    "messageData": [
        'Salesforce',
        {
            url: 'http://www.salesforce.com/',
            label: 'here'
        }
    ]
});

As of today, it doesn't seem you can use links in toast message in LWC directly. I have created this idea to allow the ability to show links in LWC toasts.

In Lighting Aura Components (LAC), the force:showToast had additional attributes for this purpose - messageTemplate and messageTemplateData.

But, these attributes are not available for the corresponding LWC lightning-platform-show-toast-event. Even if you try using it there, it does not have an impact.


Your option here is as Pranay mentioned in the comments, you can utilize a Custom Event in your LWC and then wrap your LWC in a LAC which handles the event and takes care of raising the toast message.

Here's a sample code how you can use it.

From LWC, raise a Custom Event:

showNotification() {
    let myData = [];
    myData[0] = "Title of Message";
    myData[1] = "This message is from LWC";
    myData[2] = "https://linktomyrecord.com";
    const showToast = new CustomEvent('showtoast', {
        detail: { myData },
    });

    this.dispatchEvent(showToast);
}

Then, in your Lightning Aura Component, include the LWC:

<c:lwcAuraComponent onshowtoast="{!c.handleShowToast}"/>

And then in handleShowToast(), get the values and raise the toast message. (Note that, you will still need to keep the message attribute in the event)

handleShowToast : function(component, event, helper) {
    var myData = event.getParam('myData');

    var title = myData[0];
    var msg = myData[1];
    var linkToRec = myData[2];
    
    var toastEvent = $A.get("e.force:showToast");
    toastEvent.setParams({
        mode: 'pester', // or 'dismissible' -- see docs for details
        title: title,
        message: 'Sample Message', // you will need to keep this attribute
        messageTemplate: 'Record {0} created! See it {1}!',
        messageTemplateData: [
            msg, 
            {
                url: linkToRec, // here's your link
                label: 'here',
            }
        ]
    });
    toastEvent.fire();
}