I want to be able to make a toast message have two lines of information:

enter image description here

When I look in the documentation, I don't see anything that specifies how to add details to the message, the way we see toast on LightningDesignSystem.com.

Is there a parameter that gets passed into toastEvent.setParams?

showToast : function(component, event, helper) {
    var toastEvent = $A.get("e.force:showToast");
        "title": "Success!",
        "message": "The record has been updated successfully."

2 Answers 2


The title is the first line of information, the message is the second line. Note how the second line is smaller than the first.

  • Yes, that's it. Thank you! I don't know why it didn't stand out to me that way.
    – Matt Smith
    Commented Nov 14, 2018 at 14:48

For Multiple Lines Toast in LWC

we have to override CSS :

  1. Create a CSS file and add in static resource

File Content :


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


if(this.isCssLoaded) return
this.isCssLoaded = true;
    console.log('error to load');


4)Create your toast message like this

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

const evt = new ShowToastEvent({

            title: "Complete Required Fields :",
            message: msg,
            variant: "error",

You must log in to answer this question.

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