Stylish Non-intrusive Toast Notifications For The Web – Butterup

Preview:

Description:

Butterup is a lightweight JavaScript notification library that adds modern, smooth, customizable, non-intrusive toast notifications to your website.

It supports various notification types like Default, Success, Warning, Error, and Info. These can be displayed with or without icons, based on your preference. Additionally, you have the freedom to position these toast notifications in various locations on your webpage, including the top and bottom corners, as well as the center.

How to use it:

1. Download and link to the Butterup’s files in your document.

<link rel="stylesheet" href="butterup.min.css" />
<script src="butterup.min.js"></script>

2. Or install & import it via NPM.

# NPM
$ npm install butteruptoasts/pre>

import butterup from 'butteruptoasts';
import 'butteruptoasts/dist/styles.css';/pre>
3. Create a basic toast notification.

butterup.toast({
  title:'Title',
  message:'Toast Message',
});

4. Change the position of the toast notification.

• Top Left
• Top Center
• Top Right (Default)
• Bottom Left
• Bottom Center
• Bottom Right

butterup.toast({
  title:'Title',
  message:'Toast Message',
  location:'bottom-center',
});

5. Specify the notification type:

• success
• warning
• error
• info

butterup.toast({
  title:'Title',
  message:'Toast Message',
  type:'success',
});

6. Customize the notification icons.

butterup.toast({
  title:'Title',
  message:'Toast Message',
  type:'success',
  icon: true,
  customIcon: 'SVG Icon Here',
});

7. Determine whether the notification can be dismissed with a mouse click. Default: false.

butterup.toast({
  title:'Title',
  message:'Toast Message',
  dismissable: true,
});

8. Use HTML content instead of plain text.

butterup.toast({
  title:'Title',
  customHTML: 'Toast Message',
});

9. Add custom action buttons to the toast.

butterup.toast({
  title: "Action Required",
  message: "Please choose an option:",
  primaryButton: {
    text: "Approve",
    onClick: function() { console.log("Approved!"); }
  },
  secondaryButton: {
    text: "Reject",
    onClick: function() { console.log("Rejected!"); }
  }
});

10. Callback functions.

butterup.toast({
  title:'Title',
  customHTML: 'Toast Message',
  onRender: function(toast) {
    console.log("Toast rendered:", toast);
  },
  onTimeout: function(toast) {
    console.log("Toast timed out:", toast);
  },
  onClick: function(event) {
    console.log("Toast clicked!");
  }
});

11. Specify the number of toast can be displayed at a time. Default: 5.

butterup.options.maxToasts: 3

12. Set the time to wait before dismissing the toast notificaiton. Default: 5000(ms).

butterup.options.toastLife: 3000

13. Set the current number of toasts on the screen. Default: 0.

butterup.options.currentToasts: 1

Changelog:

v2.0.0 (07/09/2024)

• Added more features
• Added NPM support
• Simplified the project by removing the global stackedToasts option to maintain Butterup’s core simplicity