Jolty UI Jolty UI Documentation Icons Colors


Send push notifications and alert messages with customizable templates and animations. Ideal for updates, alerts, and feedback messages.

Getting started

Toast includes a container by default, so you don’t need to create it manually. However, if you want to customize the container, you can use this method to make changes.

Toast.container(({ position, name }) => {
  const nameClass = name ? `ui-toasts--${name}` : "";
  const positionClass = position ? `ui-toasts--${position}` : "";
  return `<div class="ui-toasts ${nameClass} ${positionClass}"></div>`;

If you want to set different layouts for the container, you can pass the name for it as the first argument and then use the container option when creating a toast.

Next, we need to set a template for the toast using the static ui-toast.template() method.

Toast.template(({ content, type, dismiss, autohide }) => {
  const className = `ui-toast ${type ? "ui-toast--" + type : ""}`;
  const closeBtn = dismiss ? `<button class="ui-btn-close ui-btn-close--no-bg" aria-label="Close" data-ui-dismiss />` : "";
  const progress = autohide ? '<div class="ui-toast-progress" data-ui-autohide-progress />' : "";
  return `<div class="${className}">${content}${closeBtn}${progress}</div>`;

Next, depending on the event, we create our toast, which will automatically appear in the default container and with the default template, unless we have specified different names.

new Toast({ type: "success", content: "Success message" });

You can also create your own function to make a toast, which will take an object with options and call the ui-toast constructor with them.

const showToast = (content, type) => {
  return new Toast({
    autohide: 5000,
    limit: 3,
    position: "bottom-end",
    breakpoints: {
      1024: {
        limit: 5,
        position: "top-end",
const toast = {
  info: (content) => showToast(content, "info");
  success: (content) => showToast(content, "success");
  warning: (content) => showToast(content, "warning");
  error: (content) => showToast(content, "error");
};"Info message");
toast.success("Success message");
toast.warning("Warning message");
toast.error("Error message");


initBooleantrueShould the instance be automatically initialized when an instance is created? If false, you’ll need to manually initiate it by calling ui-toast.init().
destroyBooleanfalseAllows you to destroy an instance at a specific breakpoint.
dataString''Allows you to use the default options that have been added by the static method.
onObjectnullUsed to register event handlers.
appearBooleantrueIf you want to apply a transition upon initialization as well, you can set this option to true.
eventPrefixString'ui-toast:'Prefix for events dispatched on the ui-toast element.
eventDispatchBoolean, EventNametrueDefines if events are dispatched or used only within options.
eventBubbleBoolean, EventNametrueDefines if events should bubble up the DOM.
breakpointsObjectnullDefines custom options for specific breakpoints.
shownBooleannullDefines if the toast is open after initialization. By default, it’s null, which means it checks the hidden attribute or another attribute, depending on stateMode.
rootCSSSelector, ElementnullBy default, this is null. If the toast is in the DOM, it will stay in its place. If it is programmatically generated, it will be placed in the body.
containerString''Specifies the container template created with the static method ui-toast.container().
templateString''Specifies the toast template created with the static method ui-toast.template().
limitNumber5Determines the maximum number of toasts that can be displayed at the same time.
limitAnimateEnterBooleantrueDetermines whether new toasts should be animated if the limit is exceeded.
limitAnimateLeaveBooleantrueDetermines whether old toasts should be animated if the limit is exceeded.
ui-toastClassActiveString'ui-active'CSS class for ui-toast element when it’s shown.
dismissBoolean, CSSSelectortrueAllows the toast to be hide when clicked on the button. By default, it’s true, meaning the hide method will be called when '[data-ui-dismiss=""],[data-ui-dismiss="toast"]' is clicked
contentanynullCan contain anything, used only in template
positionString'top-end'How to position the container: Use 'top','bottom','left', or 'right'. You can also append '-start' or '-end' to these positions, such as 'top-end'.
topLayerBooleantrueDetermines whether the ui-toast should be displayed in the top layer.
keepTopLayerBooleantrueDetermines whether the ui-toast should be forced to the frontmost position in the top layer when other components are opened in front of it.


autohideBoolean, Number, AutohideOptionsfalseObject with autohide options or boolean true to enable with default options. If a number is set, it will be passed to the duration option.
durationNumber0Sets the time in ms after which the toast will hide
durationUpdateFunctionnullThe function is called each time the progress changes, passes arguments { elem, time, progress }
pauseOnMouseBooleantrueShould the timer pause when we hover over the ui-toast with the mouse
resetOnMouseBooleantrueShould the timer reset when we hover over the ui-toast with the mouse
pauseOnFocusBooleantrueShould the timer pause when we focus on the ui-toast
resetOnFocusBooleantrueShould the timer reset when we focus on the ui-toast
visibilityControlBooleanfalseShould the timer pause when the tab is not active
cssVariableString'ui-progress'Name for the css variable, which will record the current progress

Accessibility (a11y)

a11yBoolean, String, A11yOptions'status'Object with A11yOptions or true to enable with default options. You can also use one of the following values: 'status' or 'alert'.
roleString'status'Adds the role attribute to the ui-toast element.
ariaLiveString'polite'Adds the aria-live attribute to the ui-toast element.
ariaAtomicBooleantrueAdds the aria-atomic attribute to the ui-toast element.

Defaults for the a11y:'status' value:

  role: 'status',
  ariaLive: 'polite',

Defaults for the a11y:'alert' value:

  role: 'alert',
  ariaLive: 'assertive',



init()instanceInitializes the component.
destroy(destroyOptions)instance, nullDestroys the component. Accepts an object as options { remove: false, keepInstance: false, keepState: false }
update(options)instanceAccepts options as an argument and updates the component.
toggle(force, toggleOptions)promiseToggles the component’s visibility state between shown and hidden.
show(toggleOptions)promiseShows the component. Accepts the same options as toggle() method
hide(toggleOptions)promiseHides the component. Accepts the same options as toggle() method


data(name?, callback)ClassAllows you to set default options for components that have the property data:'name'
updateDefault(options)defaultUpdates default options
initAll(root)instance[]Searches for elements in root, which defaults to document with the attribute data-ui-toast
get(id or elem)instanceSearches for an instance by id or base element
getOrCreate(id or elem, options)instanceSearches for an instance by id or base element, if not found - creates a new instance with specified options
container(name?, callback)ClassCreates a layout for the container
template(name?, callback)ClassCreates a layout for the toast
toggle(id, force, toggleOptions)promiseSearches for an instance by id and calls its toggle() method with the specified options
show(id, toggleOptions)promiseSearches for an instance by id and calls its show() method with the specified options
hide(id, toggleOptions)promiseSearches for an instance by id and calls its hide() method with the specified options


idStringThe id of the base / ui-toast element.
isInitBooleanIndicates whether the instance is already initialized.
optsObjectContains the currently applied options for the current breakpoint.
baseOptsObjectContains all options, including the breakpoints option.
base, toastElementAll components have a base property, which refers to the element through which the component is initialized and where events are fired. ui-toast is a synonym for base.


DefaultObjectDefault options
instancesMapA Map that contains all instances of the component


beforeInitinstanceEvent will fired right before initialization.
initinstanceFires when initialization has been completed.
beforeShowinstance, {trigger, event}Fires immediately when the show() method is called.
showinstance, {trigger, event}Fires when the element becomes visible, but the CSS transition hasn’t started yet.
showninstance, {trigger, event}Fires when the CSS transition hasn’t been completed.
beforeHideinstance, {trigger, event}Fires immediately when the hide() method is called.
hideinstance, {trigger, event}Fires just before the CSS transition starts.
hiddeninstance, {trigger, event}Fires when the CSS transition has been completed.
pauseinstanceFires when the autohide timer is paused.
resumeinstanceFires when the autohide timer is resumed.
resetinstanceFires when the autohide timer is reset.
beforeDestroyinstanceFires before the instance is destroyed.
destroyinstanceFires immediately when the destroy() method is called.
breakpointinstance, breakpoint, prevBreakpointFires when the breakpoint has been changed.
anyeventName, instanceFires on any event occurrence. The first argument contains the name of the event.
2024 © A Project by Anatolii Moldovanov