Butterup

Customisable & Lightweight JavaScript Toasts

Introduction

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.

Usage

Render a toast notification

1// Render a toast notification in the top-right corner of the screen

2butterup.toast({

3 title: 'Hello World!',

4 message: 'This is a toast notification.',

5 location: 'top-right',

6 dismissable: false,

7});

Rich Toasts

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});

Configuration

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 // default

2butterup.options.toastLife: 5000 // in ms

Location Options

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' // default

2'top-left'

3'top-center'

4'bottom-right'

5'bottom-left'

6'bottom-center'

Toast Variables

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

Themes

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

Custom Themes

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 object

2theme: '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}

🎉 Get Started!

Download butterup and add it to your project to get started

Download butterup