Close Menu
SalesforceCodex
    Facebook X (Twitter) Instagram
    Trending
    • How to Leverage Model Context Protocol (MCP) to Enhance Salesforce AI
    • Top Mistakes Developers Make in Salesforce Apex Triggers
    • Introducing Agentforce3 to Salesforce Developers
    • The Ultimate Guide to Apex Order of Execution for Developers
    • How to Handle Bulkification in Apex with Real-World Use Cases
    • How to Confidently Manage Transactions in Salesforce Apex
    • Building a Dynamic Tree Grid in Lightning Web Component
    • 10 Salesforce Chrome Extensions to Boost Your Productivity
    Facebook X (Twitter) Instagram
    SalesforceCodex
    Subscribe
    Tuesday, July 29
    • Home
    • Salesforce Platform
      • Architecture
      • Apex
      • Lightning Web Components
      • Integration
      • Flows & Automation
      • Best Practices
      • Questions
      • News
      • Books Testimonial
    • Industries
      • Artificial Intelligence
    • Hire Me
    • Certification
      • How to Prepare for Salesforce Integration Architect Exam
      • Certification Coupons
    • Downloads
      • Salesforce Release Notes
      • Apex Coding Guidelines
    • About Us
      • Privacy Policy
    • Contact Us
    SalesforceCodex
    Home»Salesforce»Lightning»Custom Toast with custom duration In LWC

    Custom Toast with custom duration In LWC

    Dhanik Lal SahniBy Dhanik Lal SahniMay 10, 20222 Comments2 Mins Read
    Facebook Twitter Pinterest LinkedIn Tumblr Email
    Custom Toast with custom duration In LWC
    Share
    Facebook Twitter LinkedIn Pinterest Email

    We use toast for showing error, warning, or success messages in our LWC based on use cases. lightning/platformShowToastEvent is used in LWC to create these types of toast. In few scenerio standard toast message will not work as exptected like in flow and community pages (especially registration page). To show toast in flow and community pages we have to create custom toast. This post will help us in creating custom toast with custom duraction in lwc.

    Apart from flow and community pages, we can have other requirememt as well for custom toast. Few use case can be like

    • Setting custom auto close
    • Displaying formatted HTML content
    • Displaying custom Icons
    • Changing background colors

    Let us see how we can achieve above use case in custom toast LWC.

    1. Setting custom auto close

    We can use setTimeout function to create auto close funcationality. Standard toast only support for 3 secs but we can customize this using setTimeout.

    2. Displaying formatted HTML content

    In few scenerion, we need to show formatted HTML content like hyperlink, formatted text or any tabular information as well. To create such kind of toast we can use lightning-formatted-rich-text LWC control to show formatted content.

    3. Displaying custom Icons

    We can show different type of icons as well on toast as per your requirement. To show customize icon we can use SLDS.

    LWC Code for custom Toast

    How to use custom toast?

    To test custom toast component, we have to inclue below markup in lwc component where you want to use it.

    <c-common-toast></c-common-toast>

    And in js code use below code to show toast

    this.template.querySelector('c-common-toast').showToast('success','<strong>Enter Valid Email and License Id<strong/>','utility:warning',10000);
    

    showToast is public method which has signature showToast(messagetype,messagecontent,slds-icon,autocloseTime). if you don’t want 3,4 parameters, you can skip these, it will take default values.

    Custom Toast in LWC | SalesforceCodex

    Reference:

    https://developer.salesforce.com/docs/component-library/bundle/lightning-platform-show-toast-event

    Post where standard toast used

    Stop deselecting lightning-dual-listbox list

    custom toast custom toast in lwc flow lighting Lightning web component lwc platformShowToastEvent toast toast message in lwc
    Share. Facebook Twitter Pinterest LinkedIn Tumblr Email
    Previous ArticleDynamic Interaction Between Two LWCs
    Next Article Create Partner Portal User in Salesforce
    Dhanik Lal Sahni
    • Website
    • Facebook
    • X (Twitter)

    With over 18 years of experience in web-based application development, I specialize in Salesforce technology and its ecosystem. My journey has equipped me with expertise in a diverse range of technologies including .NET, .NET Core, MS Dynamics CRM, Azure, Oracle, and SQL Server. I am dedicated to staying at the forefront of technological advancements and continuously researching new developments in the Salesforce realm. My focus remains on leveraging technology to create innovative solutions that drive business success.

    Related Posts

    By Dhanik Lal Sahni6 Mins Read

    How to Leverage Model Context Protocol (MCP) to Enhance Salesforce AI

    July 28, 2025
    By Dhanik Lal Sahni7 Mins Read

    Top Mistakes Developers Make in Salesforce Apex Triggers

    July 25, 2025
    By Dhanik Lal Sahni14 Mins Read

    The Ultimate Guide to Apex Order of Execution for Developers

    July 20, 2025
    View 2 Comments

    2 Comments

    1. Pingback: Current Record in Salesforce Flow - SalesforceCodex

    2. Pingback: sObject Tab icon in Salesforce Apex - SalesforceCodex

    Leave A Reply Cancel Reply

    Ranked #1 Salesforce Developer Blog by SalesforceBen.com
    SFBenTopDeveloper
    Ranked #4 Salesforce Developer Blog by ApexHours.com
    ApexHoursTopDevelopers
    Categories
    Archives
    Tags
    apex (116) apex best practices (5) apex code best practice (10) apex code optimization (6) Apex logging (4) apex rest (11) apex trigger best practices (6) architecture (22) Asynchronous apex (9) AWS (5) batch apex (10) best code practice (4) code optimization (9) custom metadata types (5) design principle (9) flow (16) google (6) google api (4) integration (19) integration architecture (6) lighting (8) lightning (66) lightning-combobox (5) lightning-datatable (10) lightning component (32) Lightning web component (64) lwc (53) named credential (8) optimize apex (5) optimize apex code (6) optimize apex trigger (5) Permission set (4) Queueable (9) queueable apex (4) rest api (23) salesforce (149) salesforce apex (52) salesforce api (4) salesforce api integration (5) Salesforce Interview Question (5) salesforce news (5) salesforce question (5) solid (6) tooling api (5) Winter 20 (8)

    Get our newsletter

    Want the latest from our blog straight to your inbox? Chucks us your detail and get mail when new post is published.
    * indicates required

    MailChimp

    Facebook X (Twitter) Instagram Pinterest YouTube Tumblr LinkedIn Reddit Telegram
    © 2025 SalesforceCodex.com. Designed by Vagmine Cloud Solution.

    Type above and press Enter to search. Press Esc to cancel.

    Ad Blocker Enabled!
    Ad Blocker Enabled!
    Our website is made possible by displaying online advertisements to our visitors. Please support us by disabling your Ad Blocker.