Alert Dialogs - Quick Start Guide

Why RSL Alert Dialogs?

Native browser alert(), confirm(), and prompt() functions are:

❌ Unstyled and inconsistent across browsers
❌ Block the entire UI thread
❌ Cannot be customized or branded
❌ Limited accessibility features

RSL Alert Dialogs provide modern, fully-styled, accessible alternatives with animations, custom colors, and promise-based async/await support.

4-Minute Setup

1 Include Files

2 Use in Your Code


rslAlert({
    title: 'Success!',
    message: 'Your changes have been saved.',
    type: 'success',
    animation: 'zoom-in'
});

✓ Done! You now have modern, styled alert dialogs instead of ugly browser defaults.

Three Dialog Types

1. Alert - Simple Information Message

Show a message with an OK button (replaces alert())


rslAlert({
    title: 'Welcome!',
    message: 'Thanks for visiting our site.',
    type: 'info',        // info, success, warning, danger
    animation: 'zoom-in', // zoom-in, fade-in, slide-down, slide-up
    position: 'center'    // center, top, bottom
});

2. Confirm - Yes/No Decision

Ask user to confirm or cancel an action (replaces confirm())


rslConfirm({
    title: 'Delete Item?',
    message: 'This action cannot be undone.',
    type: 'warning',
    animation: 'slide-down'
}).then(confirmed => {
    if (confirmed) {
        // User clicked Yes
        deleteItem();
    }
});

3. Prompt - Text Input

Collect text input from user (replaces prompt())


rslPrompt({
    title: 'Enter Your Name',
    message: 'Please provide your full name:',
    placeholder: 'John Doe',
    type: 'info',
    animation: 'fade-in'
}).then(value => {
    if (value !== null) {
        // User submitted (value is the input text)
        console.log('Name:', value);
    }
    // null means user cancelled
});

Quick Reference

Alert Options

Option	Values	Default
`title`	String - dialog heading	Required
`message`	String - dialog content	Required
`type`	`'info'`, `'success'`, `'warning'`, `'danger'`	`'info'`
`animation`	`'zoom-in'`, `'fade-in'`, `'slide-down'`, `'slide-up'`	`'zoom-in'`
`position`	`'center'`, `'top'`, `'bottom'`	`'center'`

Confirm Options (same as Alert, plus returns Promise)

Returns	Description
`true`	User clicked Yes/Confirm
`false`	User clicked No/Cancel or pressed Esc

Prompt Options (same as Alert, plus)

Option	Description
`placeholder`	Placeholder text for input field
`defaultValue`	Pre-filled value in input field
Returns `string`	User's input text when submitted
Returns `null`	User cancelled or pressed Esc

HTML Data Attributes (Alternative)

You can also trigger alerts from HTML buttons using data attributes:

Pro Tips

✨ Tip 1: Use async/await with confirm dialogs for cleaner code flow

✨ Tip 2: Match type to action severity: info (neutral), success (positive), warning (caution), danger (destructive)

✨ Tip 3: Use position: 'top' for non-blocking notifications, 'center' for important decisions

✨ Tip 4: Always handle both confirmed and cancelled states in confirm dialogs

✨ Tip 5: Validate prompt input before using it—users can submit empty strings

ADA Compliance

RSL Alert Dialogs include accessibility features:

✅ role="dialog" and aria-labelledby for screen readers
✅ Focus trapped inside dialog while open
✅ Esc key closes dialog
✅ Focus returns to trigger element after closing
✅ Keyboard navigation through buttons (Tab/Enter/Space)
✅ High contrast color combinations

Alerts