Quasar Toasts appear on top of the screen above any other components to signal the user with a message and sometimes with an action too. They can be dismissed by clicking on the right side button.
Toasts are displayed one at a time, but you can build up a queue of them.
A Quasar App Toast is a message displayed to the user. Below is an example of a simple Toast containing only a message:
When creating a Toast with a String, that String is the actual message going to be displayed. For more complex cases (like also displaying an icon or an image, or controlling the Toast’s color), use an Object instead of String and read below on Toast Options.
We saw how to display a Toast, but let’s go deeper and analize the required parameter at instantiation, which can be a String or an Object.
When a String, it simply displays that String as the content of your Toast.
When an Object, you can specify more options:
|String||(Required) HTML to display.|
|String||Icon to use. See Icons.|
|String||Image to include.|
|2500||Timeout in milliseconds until being automatically dissmissed.|
|Object||Place a button with an action, like “Undo”. Specify |
|String||CSS color of Toast text|
|String||CSS color of Toast background|
|Function||Function to execute when Toast gets dismissed.|
Quasar offers the possibility to create out of the box Toasts for different types of success or failure messages. The Toast types have specific icons and colors.
The types of Toasts we are talking about are:
positive (for success),
negative (for errors),
info. Here’s how to create them:
If you like to change the default Toast’s settings, like color of text, color of background or timeout, you can easily do so:
Now all of the default Toasts will inherit these properties.