TrailToast is a lightweight, customizable toast notification library that allows you to display messages in a stylish and user-friendly way.
Click the buttons below to see different types of toasts in action!
const toast = new TrailToast({
moveDelay: 1000, // Time before moving to top-right (ms)
fadeDelay: 5000, // Time before fading out (ms)
fadeOutDuration: 500, // Fade out animation duration (ms)
toastHeight: 60, // Height of each toast (px)
toastWidth: 220, // Width of each toast (px)
topOffset: 20, // Distance from top of screen (px)
rightOffset: 20, // Distance from right of screen (px)
padding: '16px 24px', // Default padding
borderRadius: '12px', // Default border-radius
spawnAtCursor: true, // Spawn at cursor position
backgroundColor: '#fff', // Default background color
textColor: '#333', // Default text color
showProgress: true, // Show progress bar
progressHeight: 3, // Progress bar height (px)
progressColor: 'rgba(255, 255, 255, 0.8)', // Progress bar color
stackDirection: 'vertical', // 'vertical' or 'horizontal' can only be set on initialisation
pauseOnHover: true, // Pause progress bar on hover
});
toast.show('default toast')
toast.show('Operation successful!', {
theme: 'success' | 'error' | 'info' | 'dark'
})
toast.show('Copied!', {
theme: 'success',
// Making the moveDelay longer than the fadeDelay
// the toast will stay in place and not trail over to the stack.
fadeDelay: 1500,
moveDelay: 2500,
})
toast.show('Custom styled toast!', {
backgroundColor: '#9C27B0',
textColor: 'white',
borderColor: '#ffccbc'
})
toast.show('This toast fades out after 10 seconds.', {
theme: 'info',
fadeDelay: 10000
})
toast.show('This one is sent instantly to the corner.', {
backgroundColor: '#00b894',
textColor: '#fff',
spawnAtCursor: false,
})
function simulateServerCall() {
toast.show('Contacting server...', { theme: 'info', fadeDelay: 2000 });
setTimeout(() => {
const success = Math.random() > 0.5;
if (success) {
toast.show('Simulation data loaded successfully!', {
theme: 'success',
spawnAtCursor: false
});
} else {
toast.show('Failed to load simulation data. Please try again.', {
theme: 'error',
spawnAtCursor: false
});
}
}, 2000); // simulate 2s server response
}