FREE SALESFORCE LWC COMPONENT

Toast

Use toasts for brief feedback that does not require user action to resolve.

Component structure

COMPONENTwcsToast

PLATFORMSalesforce Lightning Web Components

STARTERTemplate + JavaScript + CSS + Meta XML

HTML template

<template>
  <div class="slds-notify slds-notify_toast slds-theme_success" role="status">
    <span class="slds-assistive-text">Success</span>Saved successfully.
  </div>
</template>

JavaScript

import { LightningElement } from 'lwc';

export default class WcsToast extends LightningElement {
  show() {
    this.dispatchEvent(new CustomEvent('show'));
  }
}

CSS

.slds-notify_toast{max-width:32rem}

Meta XML

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>64.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
  </targets>
</LightningComponentBundle>