Toast Notifications

Toast patterns for non-blocking notifications with variants, positions, and JavaScript API.

Overview

The toast component uses the <toast-msg> web component to display non-blocking notifications. Toasts require JavaScript to show dynamically but provide a clean API for common use cases like form feedback and status updates.

Key features:

  • Four semantic variants: info, success, warning, error
  • Six position options (corners and center edges)
  • Auto-dismiss with configurable duration
  • Manual dismiss option
  • Multiple toasts stack automatically

Live Example

Click the buttons to see different toast variants in action.

Setup

Place a single toast container in your page, typically at the body level.

 <!-- Place once in your page --> <toast-msg id="notifications" data-position="top-end"></toast-msg>

JavaScript API

Use the show() method to display toasts programmatically.

 const toast = document.getElementById('notifications'); // Basic toast toast.show({ message: 'This is a toast notification!', variant: 'info' }); // Success with custom duration toast.show({ message: 'Settings saved successfully.', variant: 'success', duration: 3000 // Auto-dismiss after 3 seconds }); // Error with manual dismiss toast.show({ message: 'Failed to save changes. Please try again.', variant: 'error', duration: 0 // Must be manually dismissed });

Common Use Cases

Form Submission Feedback

async function handleSubmit(event) { event.preventDefault(); const toast = document.getElementById('notifications'); try { await submitForm(event.target); toast.show({ message: 'Form submitted successfully!', variant: 'success' }); } catch (error) { toast.show({ message: `Error: ${error.message}`, variant: 'error', duration: 0 }); } }

Copy to Clipboard

async function copyToClipboard(text) { const toast = document.getElementById('notifications'); try { await navigator.clipboard.writeText(text); toast.show({ message: 'Copied to clipboard!', variant: 'success', duration: 2000 }); } catch (error) { toast.show({ message: 'Failed to copy', variant: 'error' }); } }

Network Status

window.addEventListener('online', () => { document.getElementById('notifications').show({ message: 'Connection restored', variant: 'success' }); }); window.addEventListener('offline', () => { document.getElementById('notifications').show({ message: 'You are offline', variant: 'warning', duration: 0 }); });

Configuration

The <toast-msg> element accepts these data attributes:
Attribute Values Description
data-position top-start top-center top-end
bottom-start bottom-center bottom-end		 Screen position for toasts. Default is top-end.

Show Options

The show() method accepts an options object:
Property Type Description
message String The notification text to display.
variant info success warning error Visual style and semantic meaning.
duration Number Auto-dismiss time in ms. Default 5000. Use 0 for manual dismiss.

Usage Notes

  • Single container: Only place one toast-msg container per page
  • Position: Use top-end for most applications (top-right in LTR)
  • Duration: Use shorter durations (2-3s) for success messages, longer or manual for errors
  • Stacking: Multiple toasts automatically stack vertically
  • Accessibility: Toasts use ARIA live regions for screen reader announcements

Related

Toast WC

Web component documentation

Modal Dialog

Blocking dialog patterns