How do I show a toast message in LWC?

Import ShowToastEvent from lightning/platformShowToastEvent and call this.dispatchEvent(new ShowToastEvent({ title, message, variant })). The variant can be success, error, warning or info.

How long does a toast stay on screen?

In my test the default dismissible toast had closed within 6 seconds. A sticky toast stays until the user closes it, and a pester toast closes by itself and has no close button.

How do I add a link to a toast message?

Put placeholders such as {0} and {1} in the message and pass a messageData array. Text items replace the placeholders as text, and objects like { url: '/lightning/o/Case/home', label: 'the Cases tab' } become clickable links.

Why is my LWC toast not showing?

ShowToastEvent needs the Lightning Experience container, so it does not appear in LWR Experience Cloud sites or in an LWC inside a Visualforce page. Use the lightning/toast module there. Also check that the event is dispatched from the component itself with this.dispatchEvent.

What is the difference between ShowToastEvent and lightning/toast?

ShowToastEvent is an event the container displays; lightning/toast is a module you call with Toast.show({ label, message, variant }, this). The newer module also works in LWR sites and uses label instead of title.

Toast Notifications in LWC: ShowToastEvent Examples

To display a toast notification in a Lightning Web Component (LWC), import ShowToastEvent from lightning/platformShowToastEvent and dispatch it with a title, message and variant: this.dispatchEvent(new ShowToastEvent({ title: 'Success', message: 'Record saved', variant: 'success' })). The variant (success, error, warning or info) sets the colour and icon, and the mode decides whether the toast closes by itself.

I deployed a component with one button per toast type to a Salesforce Developer Edition org and captured every toast it produced, including a sticky toast with a link and the newer lightning/toast module. I also timed how long each mode stays on screen.

This Tutorial Covers: