Menu

Toast
A toast allows users to be notified of an event

Types

jQuery short notation $.toast() support was added in 2.9.0. If you want this for older FUI versions add $.toast = $.fn.toast;
The old selector notation $('body').toast() still works as before.

Minimal

A minimal toast will just display a message.

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

Titled

You can add a title to your toast.

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

Progress Bar

You can attach a progress bar to your toast.

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

The progress bar can have its own individual color

$.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.

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

Position

A toast can appear at different positions on the screen.

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

Attached Position

A toast can have an attached position which will show the toast over the whole width of the screen. Just like notifications on mobile devices.

Attached positions with centered content only support attached actions. See the examples tab for more info.
$.toast({ position: 'top attached', title: 'Watch out!', message: `I am a top attached toast` }) ;
$.toast({ position: 'bottom attached', title: 'Watch out!', message: 'I am a bottom attached toast', newestOnTop: true }) ;

Direction

Toasts can stack horizontal

$.toast({ horizontal: true, position: 'top left', message: `Next one will open to the right` }) ;

Center Aligned

The toasts content can be shown center aligned.

Centered content in attached toasts only support attached actions. See the examples tab for more info.
$.toast({ title: 'Veronika has joined', message: 'Welcome to the Fomantic-UI community!', class: 'center aligned', // you can also use 'centered' }) ;

Duration

You can choose how long a toast should be displayed.

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

You can even avoid a toast to disappear.

$.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
$.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

$.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

$.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; } ; $.toast({ message: 'I am a colorful toast', 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; } ; $.toast({ message: 'I am an inverted colorful toast', class : 'inverted ' + suiColors[suiPlus()], //cycle through all colors showProgress: 'bottom' }) ;

Actions

General

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
$.toast({ message: 'Do you really want to star Fomantic-UI?', displayTime: 0, class: 'black', actions: [{ text: 'Yes', icon: 'check', class: 'green', click: function() { $.toast({message:'You clicked "yes", toast closes by default'}); } },{ icon: 'ban', class: 'icon red' },{ text: '?', class: 'blue', click: function() { $.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

$.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() { $.toast({message:'You clicked "yes", toast closes by default'}); } }] }) ;

Centered

The actions buttons can also be shown centered

$.toast({ message: 'Do you really want to star Fomantic-UI?', displayTime: 0, class: 'black', classActions: 'centered', // you can also use 'center aligned' actions: [{ text: 'Yes, really', class: 'yellow', click: function() { $.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.
$.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() { $.toast({message:'You clicked "yes", toast closes by default'}); } },{ text: 'Maybe later', class: 'red', click: function() { $.toast({message:'You clicked "maybe", toast closes by default'}); } }] }) ;

Vertical

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

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

$.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() { $.toast({message:'You clicked "yes", toast closes by default'}); } },{ text: 'Maybe later', class: 'red', click: function() { $.toast({message:'You clicked "maybe", toast closes by default'}); } }] }) ;

Examples

Without icon

You can choose to hide the status icon.

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

Individual icon

Use whatever you like from the included FontAwesome gallery

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

Image

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
$.toast({ showImage: 'https://fomantic-ui.com/images/avatar/small/veronika.jpg', classImage: 'avatar', message: `Veronika has joined the Fomantic-UI community` }) ;

The image can be shown without any padding by providing the image class New in 2.9.0

$.toast({ showImage: 'https://fomantic-ui.com/images/avatar/small/veronika.jpg', class: 'image', classImage: 'tiny', 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

$.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

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

Transitions

You can set other transitions types and durations.

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

Actions and centered and attached position

Using actions in attached position variants in combination with centered toast content does only support attached actions. This is because of the flexbox usage to align a possible icon/image next to the content.

$.toast({ title: 'Centered top attached', message: 'I only support attached actions', displayTime: 0, position: 'top attached', class: 'centered', classActions: 'attached', actions: [{ text: 'Mark as read', class: 'grey' },{ text: 'Delete', class: 'red' }] }) ;

Create from DOM

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

Toast

Notice
A Toast can be generated out of existing DOM Nodes

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

Template

You can reuse a dom template and provide its content via setting parameters

$('#domtemplate') .toast({ title: 'Hello visitor #' + Math.random().toString(36).substr(2), message: 'Message ID: '+ Math.random().toString(36).substr(2), showImage: 'https://fomantic-ui.com/images/avatar/small/zoe.jpg' }) ;

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(){ $.toast({message:'Wait not yet!'}); return false; }, onApprove : function() { $.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

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

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

Prevent closing

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
$.toast({ message: 'This toast does not close when you click on it', closeOnClick: false, showProgress: 'top' });

Access created toast

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

General HTML Layout

The general layout of a rendered toast might be useful for people who want to implement their own javascript display logic and just want to reuse Fomantics HTML CSS Layout.

The following structure is used to position the toasts. Each position container implements a toast-box per toast. The extra wrapper is needed to make dynamic elements like progressbar independent of the toast layout.

A single toast layout inside the above mentioned toast-box has the following structure

Toast Header
Toast content

Behaviors

All the following behaviors can be called using the syntax:

$('.ui.toast').toast('behavior', argumentOne, argumentTwo...);
Behavior Description
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
destroy Destroys instance and removes all events

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, bottom left and centered
horizontal false If the toasts should stack horizontal instead of vertical
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
context body Selector or jquery object specifying the area to attach the toast container to
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', closeDuration: 500, }
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 will close the toast by default. Return false from the click handler to prevent that.
If you use any of the approve (approve, ok, positive) or deny (deny, cancel, negative) classnames for the class property, a click handler will be ignored. In such cases use the onApprove and onDeny callbacks instead
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', title : '.header', message : '.message:not(.ui)', image : '> img.image, > .image > img', icon : '> i.icon', input : 'input:not([type="hidden"]), textarea, select, button, .ui.button, ui.dropdown', clickable : 'a, details, .ui.accordion', approve : '.actions .positive, .actions .approve, .actions .ok', deny : '.actions .negative, .actions .deny, .actions .cancel' }
DOM Selectors used internally
className
className : { container : 'ui toast-container', absolute : 'absolute', box : 'floating toast-box', progress : 'ui attached active progress', toast : 'ui toast', icon : 'centered icon', visible : 'visible', content : 'content', title : 'ui header', message : 'message', actions : 'actions', extraContent : 'extra content', button : 'ui button', buttons : 'ui buttons', close : 'close icon', image : 'ui image', vertical : 'vertical', horizontal : 'horizontal', attached : 'attached', inverted : 'inverted', compact : 'compact', pausable : 'pausable', progressing : 'progressing', top : 'top', bottom : 'bottom', left : 'left', basic : 'basic', unclickable : 'unclickable', }
Class names used to attach style to state
icons
icons : { info : 'info', success : 'checkmark', warning : 'warning', error : 'times' }
Icon names used internally
text
text : { close : 'Close' }
Display strings

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