Search
Quick Commands
run:diagnostics Run all system checks
db:connect Connect to primary DB
cache:clear Clear application cache
users:list Show all active users
Success Toast Error Toast Warning Toast
Info Toast

YEAH TOAST!

Push notifications to your users with lightweight and customizable toast messages.

Toasts are designed to mimic push notifications and are built with flexbox for easy alignment and positioning. They're perfect for showing temporary success messages, errors, warnings, or informational updates.

Static Toast Examples

Visual examples of toasts in various states (these are static for display)

Basic Toast
Toast Without Header

Color Variations

Toasts in all theme colors for different message types

Primary Toast
Success Toast
Danger Toast
Warning Toast
Info Toast
Dark Toast

Interactive Toast Demos

Click buttons to trigger live toast notifications

Toast Triggers
lightbulb Tip: These toasts will appear in the bottom-right corner of your screen and auto-dismiss after 5 seconds.

Code Examples

HTML markup and JavaScript usage for implementing toasts

Basic HTML Structure

A basic toast with header and body:

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <i class="material-symbols-rounded me-2 text-primary">notifications</i>
    <strong class="me-auto">UltraViolet</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>
Colored Toast (No Header)

A colored toast using Bootstrap's color utilities:

<div class="toast align-items-center text-bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      <i class="material-symbols-rounded me-2">check_circle</i>
      Operation completed successfully!
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Available color classes: text-bg-primary, text-bg-success, text-bg-danger, text-bg-warning, text-bg-info, text-bg-dark

JavaScript Initialization

Initialize and show a toast programmatically:

// Get or create toast instance
const toastElement = document.getElementById('myToast');
const toast = new bootstrap.Toast(toastElement, {
  animation: true,
  autohide: true,
  delay: 5000
});

// Show the toast
toast.show();
Toast Container (Positioning)

Create a container for positioning toasts on the page:

<!-- Toast Container: Bottom Right -->
<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">Bootstrap</strong>
      <small>Just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Position classes:

  • top-0 start-0 - Top Left
  • top-0 end-0 - Top Right
  • top-50 start-50 translate-middle - Center
  • bottom-0 start-0 - Bottom Left
  • bottom-0 end-0 - Bottom Right
Toast Options
Option Type Default Description
animation boolean true Apply a CSS fade transition to the toast
autohide boolean true Automatically hide the toast after the delay
delay number 5000 Delay in milliseconds before hiding the toast
UltraViolet Toast Helper Function

This application includes a helper function for easy toast creation:

// Show a toast notification
window.showToast(message, type, title);

// Examples:
window.showToast('Settings saved successfully!', 'success', 'Success');
window.showToast('An error occurred', 'danger', 'Error');
window.showToast('Please review your changes', 'warning', 'Warning');
window.showToast('New update available', 'info', 'Information');

Parameters:

  • message - The toast message content
  • type - Toast color type (primary, success, danger, warning, info, dark)
  • title - Optional title for the toast header

Stacking Toasts

Multiple toasts stack vertically in the container

Stacked Toast Preview