Toast

A toast is a non-modal, unobtrusive window element used to display brief, auto-expiring windows of information to a user.

Basic usage

First, you need to add the bl-toast-container component to your page. This component will be used to display the toasts.

<bl-toast-container></bl-toast-container>

Then, you can use the Toast class to display toasts.

import { Toast } from 'bloum';
Toast.info('This is an info toast');

You can also use the Toast class directly in your HTML because it is exposed in the global scope.

<button onclick="Toast.info('This is an info toast')">
  Show info toast
</button>
<bl-toast-container></bl-toast-container>

Status

import { Toast } from 'bloum';
Toast.success('This is a success toast');
Toast.warning('This is a warning toast');
Toast.error('This is an error toast');
Toast.info('This is an info toast');

Dismissable

import { Toast } from 'bloum';
Toast.info('This is an info toast', { isClosable: true });
Toast.info("This toast won't disappear", { isClosable: true, duration: 0 });

Description

import { Toast } from 'bloum';
Toast.info('This is an info toast', { description: 'This is a description' });

API

ToastOptions

Use the ToastOptions interface to customize the toasts:

Name	Type	Default	Description
title	string	undefined	required The title of the toast.
description	string	undefined	An optional description of the toast.
isClosable	boolean	false	Whether the toast can be dismissed by the user or not.
duration	number	8000	The duration of the toast in milliseconds. Use 0 or a negative value to prevent the toast from disappearing.
status	string	info	The status of the toast. Can be info, success, warning or error.
onClose	function	undefined	A callback function that will be called when the toast is dismissed.

Toast.info(title, options)

Display an info toast.

Name	Type	Default	Description
title	string	undefined	The message of the toast.
options	ToastOptions	undefined	The options of the toast.

Toast.success(title, options)

Display a success toast.

Name	Type	Default	Description
title	string	undefined	The message of the toast.
options	ToastOptions	undefined	The options of the toast.

Toast.warning(title, options)

Display a warning toast.

Name	Type	Default	Description
title	string	undefined	The message of the toast.
options	ToastOptions	undefined	The options of the toast.

Toast.error(title, options)

Display an error toast.

Name	Type	Default	Description
title	string	undefined	The message of the toast.
options	ToastOptions	undefined	The options of the toast.

Toast.show(options)

Display a toast.

Name	Type	Default	Description
options	ToastOptions	undefined	The options of the toast.