This Vanilla JavaScript toast notification plugin is designed to seamlessly integrate into your workflow, adding a dash of style and simplicity to your user interface. Effortlessly configurable and delightfully lightweight, butterup ensures that your site's notifications are as smooth as butter - without the need for complex dependencies.
Render a toast notification
1// Render a toast notification in the top-right corner of the screen2butterup.toast({3 title: 'Hello World!',4 message: 'This is a toast notification.',5 location: 'top-right',6 dismissable: false,7});
Render a toast notification with pre-determined styling for success, error, warning & info
1// Render a success rich notification in the top-right corner of the screen 2// Rich toasts have pre-determined icons that display if icon is set to true 3butterup.toast({ 4 title: '🎉 Hooray!', 5 message: 'Your payment was successful.', 6 location: 'top-right', 7 icon: false, 8 dismissable: false, 9 type: 'success',10});
Butterup has some basic configuration options that allow you to adjust the max toasts to display at one time & the amount of time each toast is displayed for. The configuration options are as follows:
1butterup.options.maxToasts: 5 // default2butterup.options.toastLife: 5000 // in ms
Butterup allows you to render toast notifications in all four corners of the screen, as well as the center. The location option is a string that can be set to one of the following values:
1'top-right' // default2'top-left'3'top-center'4'bottom-right'5'bottom-left'6'bottom-center'
Butterup allows you to customize the title, message, icon, dismissable & type of toast notifications. The variables are as follows:
1// title is the string that will be displayed as the title of the toast 2title: 'Hello World!' 3// message is the string that will be displayed as the message of the toast 4message: 'This is a toast notification.' 5// icon: boolean (only applicable for rich toasts currently) 6icon: false 7// dismissable: boolean (if set to true, the toast will close when clicked) 8dismissable: false 9// Rich toast types: 'success', 'error', 'warning', 'info'10type: 'success'11// if no type is specified a generic toast will be shown
Butterup comes with three themes out of the box: standard, glass & brutalist. You can change them as follows:
1// Theme names are: 'glass', 'brutalist'2theme: 'glass'3// If no theme is defined, the standard theme will be used
Butterup allows you to create your own themes for the toast notifications. You will need to make some adjustments to your CSS to style the notifications to your liking. To use your own theme do the following:
1// Add a theme name to your toast object2theme: 'butterupcustom'
1/* Add the following classes to your CSS file */ 2.butteruptoast.butterupcustom{ 3 4} 5 6/* Butterup Custom Rich Notifications */ 7.butteruptoast.butterupcustom.success{ 8 9}10 11.butteruptoast.butterupcustom.error{12 13}14 15.butteruptoast.butterupcustom.warning{16 17}18 19.butteruptoast.butterupcustom.info{20 21}
Download butterup and add it to your project to get started