Toast Examples

Live examples and demonstrations

Toast Notifications

Toast notifications are lightweight, non-intrusive messages that appear temporarily on the screen to provide feedback or information to users. They automatically disappear after a set time and can be dismissed manually. The RSL toast system supports multiple positioning options, custom timeouts, different styles, and both fixed and absolute positioning.

New to Toast Notifications?

Get up and running in 3 minutes with our Quick Start Guide!

View Quick Start Guide
Toast Features
data-timeout — Set auto-dismiss time in milliseconds (default: 3000)
.rsl-fixed — Fixed positioning relative to viewport
.rsl-absolute — Absolute positioning within parent container
.rsl-top-left — Position at top-left corner
.rsl-top-center — Position at top-center
.rsl-top-right — Position at top-right corner
.rsl-bottom-left — Position at bottom-left corner
.rsl-bottom-center — Position at bottom-center
.rsl-bottom-right — Position at bottom-right corner
data-toast-trigger — Button attribute to trigger toast on click

Download RSL Example Pack

Basic Toast - Top Right (Default)

The most common toast placement is the top-right corner. This position is non-intrusive and catches the user's attention without blocking important content.

Code • HTML
Usage: Add the data-toast-trigger attribute to any button to make it show a toast notification. Customize the toast using data attributes for header, body, position, timeout, and background color.

All Position Examples

Toast notifications can be positioned at six different locations on the screen. Click each button to see the toast appear in its respective position.

Code • HTML

Different Toast Types

Style your toasts to match different notification types using custom background colors. Common patterns include success (green), error (red), warning (yellow), and info (blue).

Code • HTML
Best Practice: Use consistent colors for different message types throughout your application. This helps users quickly identify the importance and type of notification.

Custom Timeout Durations

Control how long toasts remain visible by setting custom timeout values. Shorter times for quick confirmations, longer times for messages requiring more attention.

Code • HTML

HTML Content in Toast Body

Toast body content supports HTML, allowing you to include formatted text, links, icons, and more complex layouts within your notifications.

Code • HTML
Note: When using HTML in toast body, make sure to escape special characters in data attributes. You can use < for < and > for > if needed, though standard HTML usually works fine within data attributes.

Programmatic Toast Creation

For advanced use cases, you can create toasts programmatically using JavaScript. This is useful for dynamic notifications triggered by events, AJAX responses, or complex application logic.

Code • JavaScript

showToast({
    header: 'Custom Toast',
    body: 'This was created programmatically!',
    position: 'bottom-right',
    timeout: 4000,
    bgColor: '#6f42c1'
});
Available Options • JavaScript API

showToast({
    header: 'Notification',        // Header text
    body: 'Message content',       // Body text (supports HTML)
    position: 'top-right',         // Position on screen
    timeout: 3000,                 // Auto-dismiss time (ms)
    bgColor: '#007bff',            // Header background color
    type: 'fixed',                 // 'fixed' or 'absolute'
    parent: null                   // Parent element for absolute
});
JavaScript API: The showToast() function is globally available and can be called from anywhere in your code. This makes it perfect for showing notifications in response to AJAX requests, form submissions, or other user interactions.

Static Toast (Already in DOM)

You can also place toast HTML directly in your page. The toast will appear automatically when the page loads and follow the same auto-dismiss behavior.

Code • HTML

                        

                            

                                Notification Title
                                
                            

                            

                                This toast appears when the page loads.
Use Case: Static toasts are useful for showing welcome messages, important announcements, or notifications that should appear immediately when users land on a page.

Required Files

To use toast notifications in your project, include these CSS and JavaScript files:

CSS Include • In <head>
JavaScript Include • Before </body>

♿ Accessibility Quick Notes