Toast Component - JSON API Examples

Example 1: Programmatic Toast Creation

Use RSL.Toast.show() to programmatically create toast notifications. Click the buttons below to see different toast positions and styles.

// Success toast
RSL.Toast.show({
    header: 'Success!',
    body: 'Your changes have been saved successfully.',
    position: 'top-right',
    timeout: 3000,
    bgColor: '#28a745'
});

// Warning toast
RSL.Toast.show({
    header: 'Warning',
    body: 'Please review your input before submitting.',
    position: 'top-center',
    timeout: 4000,
    bgColor: '#ffc107'
});

// Error toast
RSL.Toast.show({
    header: 'Error',
    body: 'Failed to save changes. Please try again.',
    position: 'bottom-right',
    timeout: 5000,
    bgColor: '#dc3545'
});

// Info toast
RSL.Toast.show({
    header: 'Information',
    body: 'Your session will expire in 5 minutes.',
    position: 'bottom-left',
    timeout: 6000,
    bgColor: '#17a2b8'
});

Example 2: Data Attribute Triggers

Use data attributes to trigger toasts from buttons without writing JavaScript. Perfect for declarative toast creation.

<button class="btn btn-primary"
        data-toast-trigger
        data-toast-header="Welcome!"
        data-toast-body="Thanks for visiting our site."
        data-toast-position="top-right"
        data-toast-timeout="3000"
        data-toast-bg="#007bff">
    Welcome Message
</button>

<!-- Set timeout="0" for persistent toast (no auto-close) -->
<button data-toast-trigger
        data-toast-timeout="0">
    Persistent Toast
</button>

Example 3: Position Options

Toast supports 6 position variants: top-left, top-center, top-right, bottom-left, bottom-center, bottom-right.

function showToastPosition(position) {
    RSL.Toast.show({
        header: 'Position Demo',
        body: `Toast shown at ${position}`,
        position: position,
        timeout: 3000,
        bgColor: '#6c757d'
    });
}

// Position options:
// - 'top-left'
// - 'top-center'
// - 'top-right'
// - 'bottom-left'
// - 'bottom-center'
// - 'bottom-right'

Example 4: JSON Layout API V2

Use the V2 JSON Layout API to declaratively create toast notifications. This approach allows you to define toasts in your layout configuration.

// Create a toast using V2 JSON Layout API
const layoutConfig = {
    version: 2,
    layoutId: 'toast-demo',
    breakpoints: { xs: 1 },
    items: [
        {
            id: 'success-toast',
            content: {
                type: 'toast',
                header: 'Success!',
                body: 'Your changes have been saved successfully.',
                position: 'top-right',
                timeout: 3000,
                bgColor: '#28a745',
                mode: 'fixed'
            }
        }
    ]
};

// Render the layout using the V2 API
const container = document.getElementById('toast-container');
RSL.JSONLayout.renderLayout(container, layoutConfig);

// Create multiple toasts with different positions
const layoutConfig = {
    version: 2,
    layoutId: 'multi-toast-demo',
    breakpoints: { xs: 1 },
    items: [
        {
            id: 'toast-1',
            content: {
                type: 'toast',
                header: 'Info',
                body: 'Top-left positioned toast',
                position: 'top-left',
                timeout: 4000,
                bgColor: '#17a2b8'
            }
        },
        {
            id: 'toast-2',
            content: {
                type: 'toast',
                header: 'Warning',
                body: 'Bottom-center positioned toast',
                position: 'bottom-center',
                timeout: 5000,
                bgColor: '#ff9800'
            }
        }
    ]
};

content: {
    type: 'toast',

    // Header text (required)
    header: 'Notification Title',

    // Body content (required)
    body: 'Notification message content',

    // Position (optional, default: 'top-right')
    // Options: 'top-left', 'top-center', 'top-right',
    //          'bottom-left', 'bottom-center', 'bottom-right'
    position: 'top-right',

    // Auto-dismiss timeout in milliseconds (optional, default: 3000)
    // Set to 0 for persistent toast (no auto-dismiss)
    timeout: 3000,

    // Header background color (optional)
    bgColor: '#28a745',

    // Positioning mode (optional, default: 'fixed')
    // 'fixed': Viewport-fixed positioning (stays in place during scroll)
    // 'absolute': Positioned relative to parent container
    mode: 'fixed'
}