Core Methods
ButterPop.js provides several methods to create and manage toast notifications:
| Method | Description |
|---|---|
ButterPop.show(options) |
Create and display a toast with custom options |
ButterPop.success(message, options) |
Show a success toast (green) |
ButterPop.error(message, options) |
Show an error toast (red) |
ButterPop.warning(message, options) |
Show a warning toast (orange/yellow) |
ButterPop.info(message, options) |
Show an info toast (blue) |
ButterPop.remove(id) |
Remove a specific toast by ID |
ButterPop.clearAll() |
Remove all active toasts |
ButterPop.configure(options) |
Set global default options |
Configuration Options
Customize your toasts with these configuration options:
| Option | Type | Default | Description |
|---|---|---|---|
message |
String | '' |
The notification message |
type |
String | '' |
Toast type (success, error, warning, info) |
position |
String | 'top-right' |
Position on screen (top-left, top-right, top-center, bottom-left, bottom-right, bottom-center, center) |
duration |
Number | 5000 |
Duration in milliseconds (0 for persistent toast) |
theme |
String | 'default' |
Theme name (see Themes section) |
progress |
Boolean | false |
Show progress bar |
progressColor |
String | null |
Custom color for progress bar (CSS color) |
closable |
Boolean | true |
Show close button |
closeOnClick |
Boolean | false |
Close when clicking on the toast |
pauseOnHover |
Boolean | true |
Pause timer when hovering |
preventDuplicates |
Boolean | false |
Prevent duplicate notifications |
onClick |
Function | null |
Callback function when toast is clicked |
onClose |
Function | null |
Callback function when toast is closed |
actions |
Array | [] |
Action buttons with callbacks (see Actions section) |
className |
String | '' |
Additional CSS class to apply to the toast |
icon |
String/HTML/Boolean | true |
Custom icon content or false to disable icon |
maxVisible |
Number | 5 |
Maximum number of visible toasts (global option) |
Global Configuration
You can set default options for all toasts:
JavaScript
ButterPop.configure({
position: "bottom-center",
duration: 8000,
theme: "material",
progress: true,
pauseOnHover: true,
maxVisible: 3
});Custom Callbacks
You can add callback functions for click and close events:
JavaScript
ButterPop.show({
message: "Click me for more info",
type: "info",
onClick: () => {
window.open('https://example.com', '_blank');
},
onClose: () => {
console.log('Toast was closed');
}
});Creating Persistent Toasts
Set duration to 0 to make a toast stay until manually closed:
JavaScript
ButterPop.warning("This won't disappear until you close it", {
duration: 0,
closable: true
});Preventing Duplicates
You can prevent duplicate notifications with the preventDuplicates option:
JavaScript
// This will only show one toast, even if called multiple times
const options = {
message: "You have a new notification",
preventDuplicates: true
};
ButterPop.info(options.message, options);
ButterPop.info(options.message, options); // This one won't appear
'
});
// Remove the icon completely
ButterPop.show({
message: "Toast with no icon",
type: "info",
icon: false
});