ons-toast

The Toast or Snackbar component is useful for displaying dismissable information or simple actions at (normally) the bottom of the page. This component does not block user input, allowing the app to continue its flow. For simple toasts, consider ons.notification.toast instead.

Tutorial

Toasts

Toasts are defined using the <ons-toast> tag. In Material Design they are also called Snackbars.

<ons-toast id="dialog-1">
  This is a toast!
</ons-toast>

They can be located inside templates or separated files and be created with ons.createElement as any other dialog.

Toasts are hidden by default and usually attached as direct children of the <body> tag.

Displaying a toast

To display a toast you need to get a reference to the element and execute the show(options) method.

document
  .querySelector('ons-toast')
  .show();

It is hidden with the hide(options) method.

Toasts can be toggled with the toggle(options) method.

Notification

Another way to display toasts is with the ons.notification, which returns a Promise. Unlike the previous version, all the toasts created with this method will be part of a notification queue, being visible only one at a time. The force option disables this feature.

ons.notification.toast('Hello ' + name, { timeout: 2000 }); // Shows from 0s to 2s
ons.notification.toast('Good-bye ' + name, { timeout: 1000 }); // Shows from 2s to 3s

See also

Attributes

Attributes are added directly to the element. You can do this in HTML or JS.

HTML: <ons-toast someAttribute="true" anotherAttribute><ons-toast>
JS: document.querySelector('ons-toast').setAttribute('someAttribute', 'true')

Name Type Description
animation String
default
The animation used when showing and hiding the toast. Can be either "default", "ascend" (Android), "lift" (iOS), "fall", "fade" or "none". Optional.
animation-options Expression Specify the animation’s duration, timing and delay with an object literal. E.g. {duration: 0.2, delay: 1, timing: 'ease-in'}. Optional.

Properties

Properties are accessed on the element through JS, and should be get and set directly. For example: document.querySelector('ons-toast').onDeviceBackButton.

Name Description
onDeviceBackButton Back-button handler.
visible Whether the element is visible or not.

Methods

These methods are called directly on the DOM element. Get a reference to the element in JS, and the methods below will be available to call on it. For example: document.querySelector('ons-toast').someMethod().

Signature Description
show([options]) Show the element.
toggle([options]) Toggle toast visibility.
hide([options]) Hide toast.
show([options]): Promise

Show the element.

Returns: Resolves to the displayed element

Parameters
Name Type Description
options Object Parameter object.
options.animation String Animation name. Available animations are "default", "ascend" (Android), "lift" (iOS), "fall", "fade" or "none".
options.animationOptions String Specify the animation’s duration, delay and timing. E.g. {duration: 0.2, delay: 0.4, timing: 'ease-in'}.
toggle([options])

Toggle toast visibility.

Parameters
Name Type Description
options Object Parameter object.
options.animation String Animation name. Available animations are "default", "ascend" (Android), "lift" (iOS), "fall", "fade" or "none".
options.animationOptions String Specify the animation’s duration, delay and timing. E.g. {duration: 0.2, delay: 0.4, timing: 'ease-in'}.
hide([options]): Promise

Hide toast.

Returns: Resolves to the hidden element

Parameters
Name Type Description
options Object Parameter object.
options.animation String Animation name. Available animations are "default", "ascend" (Android), "lift" (iOS), "fall", "fade" or "none".
options.animationOptions String Specify the animation’s duration, delay and timing. E.g. {duration: 0.2, delay: 0.4, timing: 'ease-in'}.

Need Help?

If you have any questions, use our Community Forum or talk to us on Discord chat. The Onsen UI team and your peers in the community will work together to help solve your issues.

For bug reports and feature requests use our GitHub Issues page.