Butterup Toast

The Customisable & Lightweight TypeScript Toasts based on the dgtlss/butterup repository

npm install butterup-toast

v.0.0.1

Usage

To render a toasted notification it is necessary to import the library and use it.


  import { butterup } from 'butterup-toast'

  // It is necessary to import the styles also
  import 'butterup-toast/dist/butterup.css'

  butterup.toast(
    title: 'Hello World!',
    message: 'This is a toast notification.'
    // others options ...
  )

Location options

ButterupToast 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:


  butterup.toast(
    title: 'Hello World!',
    message: 'This is a toast notification.',
    location: 'top-right' // --> default
  )

Type and Icon: Rich toasts

The type option allows you to render a toasted notification with a default style for success, error, warning and information. The Icon option allows to display an icon linked to the chosen type.


  butterup.toast(
    title: 'Hello World!',
    message: 'This is a toast notification.',
    location: 'top-right', // --> default
    type: 'success', // --> default is null
    icon: true // --> default is false
  )

Dark theme by midudev community

The butterupToast dark theme is based on the code from the “Web oficial de La Velada IV” repository.


  butterup.toast(
    title: 'Hello World!',
    message: 'This is a toast notification.',
    location: 'top-right', // --> default
    type: 'success', // --> default is null
    icon: true, // --> default is false
    theme: 'dark' // --> deafult is 'standard'
  )

Custom theme

ButterupToast allows you to create your own themes for toast notifications. To do this, you will need to make some adjustments to your CSS to style the notifications to your liking.


  @import 'butterup-toast/dist/butterup.css';

  .butteruptoast.[customThemeName] {
    /* */
  }
  
  /* Rich toast configuration */
  .butteruptoast.[customThemeName].success {
    /* Success type styles */
  }
  .butteruptoast.[customThemeName].error {
    /* Error type styles */
  }
  .butteruptoast.[customThemeName].warning {
    /* Warning type styles */
  }
  .butteruptoast.[customThemeName].info {
    /* Info type styles */
  }

For example, let's create a custom theme called “stroke”. This theme will have the borders of the toast notifications more highlighted than the standard theme. To use it we just need to set theme='stroke' in the configuration.


  @import 'butterup-toast/dist/butterup.css';

  .butteruptoast.stroke {
    border-radius: 0px;
    border: solid 2px #282828;
  }
  
  /* Rich toast configuration */
  .butteruptoast.stroke.success {
    background-color: #ebfef2;
    color: hsl(140, 100%, 27%);
    border: solid 2px hsl(140, 100%, 27%);
  }
  .butteruptoast.stroke.error {
    background-color: #fef0f0;
    color: hsl(0, 100%, 27%);
    border: solid 2px hsl(0, 100%, 27%);
  }
  .butteruptoast.stroke.warning {
    background-color: #fffdf0;
    color: hsl(50, 100%, 27%);
    border: solid 2px hsl(50, 100%, 27%);
  }
  .butteruptoast.stroke.info {
    background-color: #f0f8ff;
    color: hsl(210, 100%, 27%);
    border: solid 2px hsl(210, 100%, 27%);
  }

Dismissable toast

If this option is true, the toast can be closed when it is clicked.


  butterup.toast(
    title: 'Hi there!',
    message: 'Click on me to make me disappear.',
    location: 'top-right', // --> default
    type: 'info', // --> default is null
    icon: true, // --> default is false
    dismissable: true // default is false
  )

Other configuration

ButterupToast provides some extra options that can be configured globally in your application.


  import { butterup } from 'butterup-toast'

  // Max number of toasts that can be on the screen at once
  butterup.options.maxToasts = 3

  // How long a toast will stay on the screen before fading away
  butterup.options.toastLife = 3000