Stylish Non-intrusive Toast Notifications For The Web – Butterup

Category: Javascript , Notification , Recommended | November 15, 2023
Author:dgtlss
Views Total:830 views
Official Page:Go to website
Last Update:November 15, 2023
License:MIT

Preview:

Stylish Non-intrusive Toast Notifications For The Web – Butterup

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

You Might Be Interested In:


Leave a Reply