Documentation - Toasts.
Discover Marssel: an intelligent, minimal configuration CSS framework designed for fast interfaces and a simplified developer experience.
Startup
Basic concepts
Utilities
Toasts
Marssel integrates a modern and flexible toast notifications system to display temporary messages to your users. Toasts support different types, positions, and can be fully customized.
Basic setup
The ToastManager is automatically initialized:
const marssel = new Marssel();
// The ToastManager is ready to useSimple use
Display a basic toast with the marsselToast global function:
// Simple toast
marsselToast.show('Opération réussie !');
// Toast with options
marsselToast.show('Message personnalisé', {
duration: 3000,
position: 'top-right',
type: 'success'
});Types of toast
Marssel offers 4 predefined types with suitable colors and styles:
// Success (green)
marsselToast.success('Enregistrement réussi !');
// Error (red)
marsselToast.error('Une erreur est survenue');
// Warning (orange)
marsselToast.warning('Attention aux modifications');
// Information (blue)
marsselToast.info('Nouvelle mise à jour disponible');Positions available
Place your toasts in different locations on the screen:
// Positions available:
// 'top-right', 'top-left', 'top-center'
// 'bottom-right', 'bottom-left', 'bottom-center'
marsselToast.show('Message', { position: 'top-center' });
marsselToast.show('Message', { position: 'bottom-left' });Advanced options
Personalize your toasts with many options:
marsselToast.show('Message complet', {
// Position
position: 'top-right',
// Display duration (0 = infinite)
duration: 5000,
// Kind
type: 'success',
// Optional title
title: 'Succès',
// Close button
closable: true,
// Progress bar
progress: true,
// Custom CSS Classes
classes: 'custom-toast',
// Callback on closing
onClose: () => {
console.log('Toast fermé');
}
});Toast with title
Add a title to structure your messages:
marsselToast.success('Les modifications ont été enregistrées', {
title: 'Succès',
duration: 4000
});
marsselToast.error('Impossible de se connecter au serveur', {
title: 'Erreur de connexion',
duration: 6000
});Lingering toast
Create a toast that remains displayed until manually closed:
const toastId = marsselToast.info('Message important', {
duration: 0, // 0 = infinity
closable: true
});
// Fermer manuellement plus tard
setTimeout(() => {
marssel.toastManager.remove(toastId);
}, 10000);Programmatic management
Control your toasts via the JavaScript API:
// Display a toast and retrieve its ID
const id = marsselToast.show('Message');
// Delete a specific toast
marssel.toastManager.remove(id);
// Delete all toasts
marsselToast.clear();
// Update content
marssel.toastManager.updateContent(id, {
message: 'Nouveau message',
title: 'Mis à jour',
type: 'warning'
});
// Change position
marssel.toastManager.updatePosition(id, 'bottom-center');
// Get the list of active toasts
const activeToasts = marssel.toastManager.getActiveToasts();
console.log(activeToasts); // ['toast-1', 'toast-2', ...]Pause on hover
Toasts automatically pause on mouse hover:
marsselToast.show('Hover over me to pause', {
duration: 5000,
progress: true // The progress bar will pause
});Responsive design
Toasts automatically adapt to small screens:
// On mobile, toasts automatically take
// full width with appropriate margins
marsselToast.show('Message mobile-friendly');Practical examples
Toasts automatically adapt to small screens:
Types of toast
Positions
Advanced options
Real-world scenarios
Control
CSS customization
Style your toasts with custom classes:
marsselToast.show('Personalized toast', {
classes: 'bg-[673AB7] c-[FFFFFF] rounded-[8px]',
type: 'info'
});Global configuration
Change the default configuration:
// Access configuration
marssel.toastManager.config.position = 'bottom-right';
marssel.toastManager.config.duration = 4000;
marssel.toastManager.config.animationDuration = 400;
```
## Positions available
The following positions are supported:
```
top-right Top right (default)
top-left Top left
top-center Top center
bottom-right Bottom right
bottom-left Bottom left
bottom-center Bottom center
```
## Types available
```
success Success message (green)
error Error message (red)
warning Warning (orange)
info Information (blue)