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
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 Lefttop-0 end-0- Top Righttop-50 start-50 translate-middle- Centerbottom-0 start-0- Bottom Leftbottom-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 contenttype- 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