Menu

Toast BETA
A toast allows users to be notified of an event

Download

Types

Minimal

A minimal toast will just display a message.

$('body') .toast({ message: 'I am a toast, nice to meet you !' }) ;

Titled

You can add a title to your toast.

$('body') .toast({ title: 'Better ?', message: 'Hey look, I have a title !' }) ;

ProgressBar

You can attach a progressbar to your toast.

$('body') .toast({ title: 'LOOK', message: 'See, how long i will last', showProgress: 'bottom' }) ;

Variations

Toast Type

A toast can be used to display different types of informations.

$('body') .toast({ class: 'success', message: `You're using the good framework !` }) ;
$('body') .toast({ class: 'error', message: `An error occured !` }) ;
$('body') .toast({ class: 'warning', message: `Behind you !` }) ;

Position

A toast can appear in different positions on the screen.

$('body') .toast({ position: 'bottom right', message: `It's pretty cold down there...` }) ;
$('body') .toast({ position: 'top left', message: `Look, I'm here !` }) ;

Duration

You can choose how long a toast should be displayed.

$('body') .toast({ displayTime: 5000, message: `You will see me for 5 seconds.` }) ;

You can even avoid a toast to disapear.

$('body') .toast({ displayTime: 0, message: `I'll stay here until you click on me !` }) ;

Use Message Style

You can use all of the styles and colors from the message component

$('body') .toast({ title: 'Awesome', message: 'I got my style from the message class', class : 'purple', className: { toast: 'ui message', title: 'ui header' } }) ;

Decreasing ProgressBar

The progressbar could be be lowered instead of raised

$('body') .toast({ title: 'LOOK', message: 'See, how long i will last', showProgress: 'top', progressUp: false }) ;

Color Variants

You can use all of the usual color names

if(typeof document.suiToastColorIndex === 'undefined') { document.suiToastColorIndex = -1; } var suiColors = ['red','orange','yellow','olive','green','teal','blue','violet','purple','pink','brown','grey','black'], suiPlus = function(){ if (++document.suiToastColorIndex === suiColors.length) { document.suiToastColorIndex = 0; } return document.suiToastColorIndex; } ; $('body') .toast({ message: 'I am a colorful toast', // class: 'purple', class : suiColors[suiPlus()], //cycle through all colors showProgress: 'bottom' }) ;

Inverted Colors

Same as above, just add inverted to the class definition

if(typeof document.suiToastColorIndex === 'undefined') { document.suiToastColorIndex = -1; } var suiColors = ['red','orange','yellow','olive','green','teal','blue','violet','purple','pink','brown','grey','black'], suiPlus = function(){ if (++document.suiToastColorIndex === suiColors.length) { document.suiToastColorIndex = 0; } return document.suiToastColorIndex; } ; $('body') .toast({ message: 'I am an inverted colorful toast', // class: 'inverted purple', class : 'inverted ' + suiColors[suiPlus()], //cycle through all colors showProgress: 'bottom' }) ;

Examples

Without icon

You can choose to hide the status icon.

$('body') .toast({ class: 'warning', showIcon: false, message: 'Hey, where is my icon ?' }) ;

Individual icon

Use whatever you like from the included FontAwesome gallery

$('body') .toast({ class: 'info', showIcon: 'microphone', message: 'Listen to me' }) ;

Close Icon

You can force the user to click a close Icon instead of clicking anywhere on the toast to close it

$('body') .toast({ class: 'info', displayTime: 0, closeIcon: true, message: 'Click on the X to close me' }) ;

Transitions

You can set other transitions types and durations.

$('body') .toast({ class: 'success', message: 'Did you notice any difference ?', transition: { showMethod : 'zoom', showDuration : 1000, hideMethod : 'fade', hideDuration : 1000 } }) ;

Show Boxshadow on hover

Change the components className to get additional styles

$('body') .toast({ message: 'I got my style from the message class', class : 'brown', className: { toast: 'ui hoverfloating message' } }) ;

Settings

Toast Settings
Settings to configure toast behavior

Setting Default Description
position top right Sets where the toast can be displayed. Can be top right, top center, top left, bottom right, bottom center and bottom left
class info Define the class of notification. Can be info, success, warning and error. If ui message is used in className.toast option (see below), this option can hold any supported class of the message component
displayTime 3000 Set the time (in ms) of the toast appearance. Set 0 to disable the automatic dismissal
showIcon true Define if the toast should display an icon. If a string is given, this will be used as icon classname
closeIcon false This will make the toast closable by the top right corner icon instead of clicking anywhere on the toast
showProgress false Displays a progressbar on top or bottom increasing until displayTime is reached. . false won't display any progressbar. If displayTime option is 0, this option is ignored
progressUp true trueIncreases the progressbar from 0% to 100%
false Decreases the progressbar from 100% to 0%
compact true true will display the toast in a fixed width, false displays the toast responsively with dynamic width
opacity 1 Opacity Value of the toast after the show-transition
newestOnTop false Define if new toasts should be displayed above the others
transition
transition: { showMethod : 'scale', showDuration : 500, hideMethod : 'scale', hideDuration : 500, closeEasing : 'easeOutBounce' }
Settings to set the transitions and durations during the show or the hide of a toast

Callbacks

Callbacks specify a function to occur after a specific behavior.

Parameters Description
onShow $module Callback before toast is shown. Returning false from this callback will cancel the toast from showing.
onVisible $module Callback after toast is shown.
onClick $module Callback after popup is clicked in.
onHide $module Callback before toast is hidden. Returning false from this callback will cancel the toast from hiding.
onHidden $module Callback after toast is hidden.
onRemove $module Callback before toast is destroyed.

Content Settings
Settings to specify toast contents

Setting Description
title A title for the toast. Leave empty to not display it
message Message to display

DOM Settings
DOM settings specify how this module should interface with the DOM

Setting Default Description
namespace toast Event namespace. Makes sure module teardown does not effect other events attached to an element.
selector
selector : { container : '.toast-container', toast : '.ui.toast' }
DOM Selectors used internally
className
className : { container : 'toast-container', box : 'toast-box', progress : 'ui attached active progress', toast : 'ui toast', icon : 'icon', visible : 'visible', content : 'content', title : 'title' }
Class names used to attach style to state
icons
icons : { info : 'info', success : 'checkmark', warning : 'warning', error : 'times' }
Icon names used internally

Debug Settings
Debug settings controls debug output to the console

Setting Default Description
name Toast Name used in debug logs
silent false Silences all console output including error messages, regardless of other debug settings.
debug false Provides standard debug output to console
performance true Provides standard debug output to console
verbose true Provides ancillary debug output to console
errors
error: { method : 'The method you called is not defined.', noTransition : 'This module requires ui transitions.' }

Dimmer Message
Dimmer sub-header