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.
Toast container
<!-- Place once in your page --><toast-msg id="notifications" position="top-end"></toast-msg>JavaScript API
Use the show() method to display toasts programmatically.
Basic usage
const toast = document.getElementById('notifications'); // Basic toasttoast.show({ message: 'This is a toast notification!', variant: 'info'}); // Success with custom durationtoast.show({ message: 'Settings saved successfully.', variant: 'success', duration: 3000 // Auto-dismiss after 3 seconds}); // Error with manual dismisstoast.show({ message: 'Failed to save changes. Please try again.', variant: 'error', duration: 0 // Must be manually dismissed});Common Use Cases
Form Submission Feedback
Form 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
Clipboard feedback
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
Network events
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 attributes:
| Attribute | Values | Description |
|---|---|---|
position |
top-start top-center top-endbottom-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-endfor 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