Menu

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

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

Progress Bar

You can attach a progress bar to your toast.

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

The progress bar can have its own individual color

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

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

Setting the value to auto calculates the display time by the amount of containing words

You can adjust the calculation by modifying the default values for minDisplayTime and wordsPerMinute
$('body') .toast({ displayTime: 'auto', showProgress: 'top', classProgress: 'blue', message: 'The display time of this toast is calculated by its amount of containing words.
You can adjust the calculation by modifying the default values for minDisplayTime and wordsPerMinute' }) ;

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

Increasing Progress Bar

The progress bar could be be raised instead of lowered

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

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

Actions

General
New in 2.8.0

Define click actions to your toast by providing a text and/or icon, optional class and click handler.

  • The default click handler will close the toast, so if you only want to close it when an action button is clicked, you can omit the click handler.
  • If your action button should only consist of an icon, add icon to the class for auto adjustment
  • Returning false within your click handler will prevent closing the toast
$('body') .toast({ message: 'Do you really want to star Fomantic-UI?', displayTime: 0, class: 'black', actions: [{ text: 'Yes', icon: 'check', class: 'green', click: function() { $('body').toast({message:'You clicked "yes", toast closes by default'}); } },{ icon: 'ban', class: 'icon red' },{ text: '?', class: 'blue', click: function() { $('body').toast({message:'Returning false from the click handler avoids closing the toast '}); return false; } }] }) ;

Basic

The classActions setting provides you a way to adjust the overall appearance of the action buttons. Using basic class does not lighten the actions background. left aligns the buttons to the left

$('body') .toast({ message: 'Do you really want to star Fomantic-UI?', displayTime: 0, class: 'black', classActions: 'basic left', actions: [{ text: 'Yes, really', class: 'yellow', click: function() { $('body').toast({message:'You clicked "yes", toast closes by default'}); } }] }) ;

Attached

Using attached converts your actions into a Button group. Also add top to display the actions attached to the top of the toast

You can also make use of the button group features like equal width for example by adding three if the amount of your actions is 3.
$('body') .toast({ message: 'Do you really want to star Fomantic-UI?', displayTime: 0, class: 'black', classActions: 'top attached', actions: [{ text: 'Yes, really', class: 'green', click: function() { $('body').toast({message:'You clicked "yes", toast closes by default'}); } },{ text: 'Maybe later', class: 'red', click: function() { $('body').toast({message:'You clicked "maybe", toast closes by default'}); } }] }) ;

Vertical

You can use vertical to display your actions to the right of the toast.

$('body') .toast({ message: 'Do you really want to star Fomantic-UI?', displayTime: 0, class: 'black', classActions: 'vertical', actions: [{ text: 'Yes, really', class: 'green', click: function() { $('body').toast({message:'You clicked "yes", toast closes by default'}); } },{ text: 'Maybe later', class: 'red', click: function() { $('body').toast({message:'You clicked "maybe", toast closes by default'}); } }] }) ;

Vertical attached

Vertical actions can also be displayed as button groups using vertical attached
Vertical attached actions also support left

$('body') .toast({ message: 'Do you really want to star Fomantic-UI?', displayTime: 0, class: 'black', classActions: 'left vertical attached', actions: [{ text: 'Yes, really', class: 'green', click: function() { $('body').toast({message:'You clicked "yes", toast closes by default'}); } },{ text: 'Maybe later', class: 'red', click: function() { $('body').toast({message:'You clicked "maybe", toast closes by default'}); } }] }) ;

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

Image
New in 2.8.0

Provide an image path to display it just like the icon does.
Adjust the image via the separate classImage setting

For image sizes, only mini, tiny, small and avatar are supported
$('body') .toast({ showImage: 'https://fomantic-ui.com/images/avatar/small/veronika.jpg', classImage: 'avatar', message: `Veronika has joined the Fomantic-UI community` }) ;

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

The close icon can also be displayed to the left New in 2.8.0

$('body') .toast({ class: 'info', displayTime: 0, closeIcon: 'left', 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 } }) ;

Create from DOM

By creating your toasts out of existing DOM nodes you can make use of other existing FUI components New in 2.8.0

Toast

Notice
A Toast can be generated out of existing DOM Nodes

$('#domtoast') .toast() ;

Approve / Deny Callbacks

Just like Modal, Toast will automatically tie approve/deny callbacks to any positive/approve, negative/deny or ok/cancel buttons without the need to create actions via setting

If onDeny, onApprove or onHide returns false it will prevent the toast from closing
Notice
Want to close this DOM toast?

$('#domtoastactions') .toast({ displayTime: 0, onDeny : function(){ $('body').toast({message:'Wait not yet!'}); return false; }, onApprove : function() { $('body').toast({message:'Approved'}); } }) ;

Message

Download the source code at

github
$('#dommessage') .toast() ;

Card

If you want to use vertical actions together with a card layout, only vertical attached actions are supported
Fomantic-UI
2.8.0 Card Toast

$('#domcard') .toast() ;

Interaction

Prevent pausing
New in 2.8.0

The default behavior when hovering over the toast is to pause decreasing of the display time.
You can force the toast to not pause by setting pauseOnHover to false

$('body').toast({ message: 'This toast does not pause when you hover on it', pauseOnHover: false, showProgress: 'top' });

Prevent closing
New in 2.8.0

The default behavior when clicking on a toast is to close it.
You can force the toast to not do this by setting closeOnClick to false

closeOnClick is automatically set to false if one of the following is set
  • A closeIcon is defined
  • The toast contains input fields or buttons
  • Actions are defined
$('body').toast({ message: 'This toast does not close when you click on it', closeOnClick: false, showProgress: 'top' });

Access created toast
New in 2.8.0

As each call to .toast() returns the instance of the created toast, you are able to interact with the displayed toast via javascript behaviors

var myToast = $('body').toast(); var remainingTime = myToast.toast('get remainingTime');

Appearance

Migration from 2.7.0

The toast defaults changed in 2.8.0. In case you want to keep the old defaults for all of your toasts, override the defaults as follows

/* To change the defaults for all toast at once override the module as follows $.fn.toast.settings.progressUp = true; $.fn.toast.settings.class = 'info'; $.fn.toast.settings.showIcon = true; $.fn.toast.settings.className.box = 'toast-box'; //removes shadow $.fn.toast.settings.className.title = 'header'; // smaller font size $.fn.toast.settings.className.icon = 'icon'; // top position again $.fn.toast.settings.transition.closeEasing = 'easeOutBounce'; */ // Or apply the old defaults directly to the toast $('body') .toast({ title: 'LOOK', message: 'Turned back time to 2.7.0 defaults', showProgress: 'bottom', //make it look like 2.7.0 showIcon: true, progressUp: true, class: 'info', className: { box:'toast-box', title:'header', icon: 'icon' }, transition: { closeEasing: 'easeOutBounce' } }) ;

Behaviors

All the following behaviors can be called using the syntax:

$('.ui.toast').toast('behavior', argumentOne, argumentTwo...);
animate pause Pauses the display time decrease (and possible progress bar animation)
animate continue Continues decreasing display time (and possible progress bar animation)
close Closes the toast
get toasts Returns all toasts as an array of objects which are visible within the current toast-container
get remainingTime Returns the remaining time in milliseconds

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 neutral Define the class of notification. Can be any existing color definition or 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
classProgress false Can hold a string to be added to the progress bar class, for example a separate color
classActions false Can hold a string to be added to the actions class to control its appearance. Usually a combination of basic, left, top, bottom, vertical and attached
classImage mini Can hold a string to be added to the image class. mini, tiny, small and avatar are supported out of the box
displayTime 3000 Set the time (in ms) of the toast appearance. Set 0 to disable the automatic dismissal. Set auto to calculate the time by the given amount of words within the toast
minDisplayTime 1000 Minimum display time in case displayTime is set to 'auto'
wordsPerMinute 120 Base to calculate display time in case displayTime is set to 'auto'
showImage false If an URL to an image is given, that image will be shown to the left of the toast
showIcon true Define if the toast should display an icon which matches to a given class. 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 when set to true. When set to left the closeIcon is shown to the left instead of right
closeOnClick true Set to false to avoid closing the toast when it is clicked
cloneModule true If a given DOM-Node should stay reusable by using a clone of it as toast. If set to false the original DOM-Node will be detached and removed from the DOM then the toast is closed
showProgress false Displays a progress bar on top or bottom increasing until displayTime is reached. . false won't display any progress bar. If displayTime option is 0, this option is ignored
progressUp false trueIncreases the progress bar from 0% to 100%
false Decreases the progress bar from 100% to 0%
pauseOnHover true Set to false if the display timer should not pause when the toast is hovered
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
preserveHTML true Whether HTML included in given title, message or actions should be preserved. Set to false in case you work with untrusted 3rd party content
transition
transition: { showMethod : 'scale', showDuration : 500, hideMethod : 'scale', hideDuration : 500, closeEasing : 'easeOutCubic' }
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.
onApprove $module Callback when an existing button with class positive or ok or approve is clicked. Return false to avoid closing the toast
onDeny $module Callback when an existing button with class negative or cancel or deny is clicked. Return false to avoid closing the toast

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
actions An array of objects. Each object defines an action with properties text,class,icon and click
actions: [{ text : 'Wait', class : 'red', icon : 'exclamation', click : function(){} }]

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 : '.ui.toast-container', box : '.toast-box', toast : '.ui.toast', input : 'input:not([type="hidden"]), textarea, select, button, .ui.button, ui.dropdown', approve : '.actions .positive, .actions .approve, .actions .ok', deny : '.actions .negative, .actions .deny, .actions .cancel' }
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 : 'header' }
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 false Provides ancillary debug output to console
errors
error: { method : 'The method you called is not defined.', noElement : 'This module requires ui transitions.', verticalCard : 'Vertical but not attached actions are not supported for card layout' }

Dimmer Message
Dimmer sub-header