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. Create a basic toast notification.

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

3. 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',
});

4. Specify the notification type:

• success
• warning
• error
• info

butterup.toast({
  title:'Title',
  message:'Toast Message',
  type:'success',
  icon: true, // default: false
});

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

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

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

butterup.options.maxToasts: 3

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

butterup.options.toastLife: 3000