Toasts are used for system messaging. They also display at the bottom of the screen, but may not be swiped off-screen. Metro 4 provides simple methods to create toasts.

Setup toast

You can setup options for toasts with function init. The following options are available:

Option Default Desc
callback Metro.noop Callback for execute code after toast showing
timeout METRO_TIMEOUT Time for toast shown, by default 2000
distance 20 Distance from window side (top or bottom) in pixels, by default 20px
showTop false When true, toast show on top of window
clsToast Additional classes for toast

                        showTop: true,
                        distance: 60
                    }).create("This is a toast");

Create toast

To create toast you must call method Metro.toast.create. Method contains next parameters:

  • message: Toast message
  • callback: Callback function.Executed after toast hided
  • timeout: Time to show toast
  • cls: Classes to customize toast

                    Metro.toast.create(message, callback, timeout, cls);

Quick example

                    <button class="button primary" onclick="runToast()">Default toast</button>
                    <button class="button secondary" onclick="runToast('callback')">Toast with a callback</button>
                    <button class="button info" onclick="runToast('timeout')">Toast timeout</button>
                    <button class="button success" onclick="runToast('class')">Toast custom class</button>

                        function runToast(mode) {
                            var toast = Metro.toast.create;
                            switch (mode) {
                                case 'callback': toast("This is a toast with callback", function(){
                                    alert('Toast callback executed!');
                                }); break;
                                case 'timeout': toast("This is a toast with timeout 5s", null, 5000); break;
                                case 'class': toast("This is a toast with custom class", null, 5000, "bg-green fg-white"); break;
                                default: toast("This is default toast");


If you need execute code after toast showing, add callback function to call toast.

                    Metro.toast.create("Toast message", function(){
                        ...callback function...


Want to show the toast a certain time? Add a timeout parameter.

                    Metro.toast.create("Toast message", null, 5000);

Predefined classes

New in 4.2.10

You can use predefined classes for your toasts. This list of classes include: .primary, .secondary, .success, .alert, .warning, .yellow, .info and .light classes.

                    Metro.toast.create("Toast message", null, null, "info");

Custom toast

If you want to display a toast in your own style, add a cls parameter.

                    Metro.toast.create("Toast message", null, null, cls);

Additional options

You can sets additional options. Options is a object with next properties:

                        options: {
                            callback: Metro.noop,
                            timeout: METRO_TIMEOUT,
                            distance: 20,
                            showTop: false,
                            clsToast: ""

                    var options = {
                        showTop: true,
                        timeout: 3000
                    Metro.toast.create("Toast message", null, null, null, options);