[SalesForce] How to show toast message in multiple lines in a Lightning Web Component

I have a requirement where I need to display my toast message in multiple lines in my LWC. I tried using \n and
but they are not working. Please assist.

Best Answer

For Multiple Lines Toast in LWC

we have to override CSS :

  1. Create a CSS file and add in static resource

File Content :

.toastMessage{

white-space: break-spaces !important;

}

  1. Import That static resource file in your component

import { loadStyle } from 'lightning/platformResourceLoader';

import CUSTOMCSS from '@salesforce/resourceUrl/{yourfileName}';

a) Define variable like : isCssLoaded = false;

  1. Call it in reRenderCallback

renderedCallback(){

if(this.isCssLoaded) return
this.isCssLoaded = true;
loadStyle(this,CUSTOMCSS).then(()=>{
    console.log('loaded');
})
.catch(error=>{
    console.log('error to load');
});

}

4)Create your toast message like this :

var msg = 'This is first-line \nThis is Second Line. \nThis is the third Line.';

const evt = new ShowToastEvent({

            title: "Complete Required Fields :",
            message: msg,
            variant: "error",
        });
        this.dispatchEvent(evt);
Related Topic