Toast

Quick start guide and documentation

3-Minute Setup

1 Include Files

Required Files • HTML

2 Create Toast Container

Basic Toast • HTML



    

        Success! Your changes have been saved.

3 Trigger with Button

Trigger Button • HTML
✓ Done! Your toast will appear when triggered and auto-dismiss after 3 seconds.

Quick Reference

Position Classes

ClassPosition
.rsl-top-leftTop-left corner
.rsl-top-centerTop-center
.rsl-top-rightTop-right corner (most common)
.rsl-bottom-leftBottom-left corner
.rsl-bottom-centerBottom-center
.rsl-bottom-rightBottom-right corner

Positioning Types

ClassBehavior
.rsl-fixedFixed to viewport (stays on screen during scroll)
.rsl-absoluteAbsolute positioning within parent container

Data Attributes

AttributePurpose
data-timeout="3000"Auto-dismiss after 3000ms (3 seconds)
data-toast-trigger="id"Button attribute to show specific toast

Color Classes

ClassUse Case
.rsl-bg-successGreen - successful actions
.rsl-bg-dangerRed - errors or warnings
.rsl-bg-warningYellow - caution messages
.rsl-bg-infoBlue - informational messages

Pro Tips

✨ Tip 1: Use .rsl-top-right for most notifications—it's visible but doesn't block content
✨ Tip 2: Set data-timeout based on message length—longer messages need more time
✨ Tip 3: Use .rsl-fixed for global notifications, .rsl-absolute for section-specific messages
✨ Tip 4: Stack multiple toasts by using different IDs—they'll appear in sequence
✨ Tip 5: Always include a close button with aria-label for accessibility

ADA Compliance

RSL Toasts include accessibility features:

  • ✅ Close buttons have aria-label for screen readers
  • ✅ Color is not the only indicator (text + icons used)
  • ✅ Keyboard accessible (Tab to close button, Enter/Space to dismiss)
  • ✅ Auto-dismiss gives users time to read messages
  • ✅ Non-modal - doesn't trap focus or block interaction