Toast Notification generator
Toast banners confirm that an action worked (or explain why it did not). Style the banner here, then copy the generated ShowToastEvent JavaScript straight into your controller.
Your changes autosave in this browser, and the link above reproduces this exact configuration for anyone you send it to.
Live preview
Generated code
<template>
<div class="slds-notify slds-notify_toast studio-toast" role="status">
<span class="slds-assistive-text">success</span>
<span class="studio-toast__icon" aria-hidden="true"></span>
<div class="slds-notify__content">
<h2 class="slds-text-heading_small">Record saved successfully.</h2>
</div>
<div class="slds-notify__close">
<button class="slds-button slds-button_icon slds-button_icon-inverse" title="Close" onclick={handleClose}>
×
</button>
</div>
</div>
</template>Design tips for toast notifications
- Success and info toasts can auto-dismiss; error toasts should stay until the user closes them.
- Keep toast messages to a single, specific sentence — "Record saved." beats "Success!".
- Match toast border radius to the rest of your design system so it does not feel like a separate product.
Related components
Components developers commonly compare against or pair with Toast Notification.