Add line break in LWC toast message

Question

How can we achieve a new line in an LWC toast message? I tried using <br> and /n .. but it is not working. It's working in Aura, but not in LWC.

JS-

showSuccessToast() {
    var sMsg = 'Salesforce documentation is available in the app.<br/>';
    sMsg += 'Click ? in the upper-right corner.';
    const evt = new ShowToastEvent({
        title: 'Record Update',
        message: sMsg,
        variant: 'success',
        mode: 'sticky'
    });
    this.dispatchEvent(evt);
}

Answer 1

You should try \n instead of /n. That aside, it is documented that there are some limitations between the Aura and LWC versions; use Aura if you definitely need this today. You can use an Aura wrapper and dispatch an event from your LWC to Aura, then have Aura use the lightning:notificationsLibrary module to show your message from there.

Answer 2

I had the same issue and I've resolved it with putting '\n' in my text and also setting lightning-formatted-text tag that will show my text. Here is example how I've achieved it:

In JS:

let errMsg = 'Error Message: ' + error.body.message + '\n';
errMsg = errMsg + 'Stacktrace: ' +  error.body.stackTrace;

In HTML:

<lightning-formatted-text value={errorMessage} linkify ></lightning-formatted-text>

Answer 3

Use javascript backticks

 showToast() {
        const event = new ShowToastEvent({
            title: 'Get Help',
            message: `Salesforce documentation is available in the app.
 Click ? in the upper-right corner.`,
        });
        this.dispatchEvent(event);
    }