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.

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