Toasts
A Toast is a subtle notification commonly used in modern applications. It can be used to provide feedback about an operation or to display a system message. The toast appears on bottom of the dapp’s content, and can be dismissed.
<Toasts />Usage
The <Toasts /> component should be provided once - per position for your dapp. Commonly added to your root layout.
<!-- Default position is bottom -->
<Toasts />
<Toasts position="top" />Showing or hiding messages happen through the use of a toastsStore:
toastsStore.show({
text: "Hello World",
level: "info",
});The Toasts component can optionally limit the maximum number of toasts displayed on the screen. This can be configured using the maxVisible property.
<Toasts maxVisible="{3}" />Properties
A toast message can be created with following properties.
| Property | Description | Type | Mandatory |
|---|---|---|---|
id | A unique ID to identify the toast. | symbol | |
title | A title that can be displayed before the text. | string | |
text | The text to display. | string | ✅ |
level | How important the toast is? | info or success or warn or error | ✅ |
spinner | Display a spinner instead of an icon that represents the level. The spinner inherits the level color. | boolean | |
duration | A timeout (in milliseconds) after which the toast automatically disappear. | number | |
position | The position of the toast. A related <Toasts /> component should be declared in order to use the position. | bottom or top | |
overflow | By default, a text content of a toast is scrollbable. This option truncate or clamp the text and title. | scroll or truncate or clamp | |
icon | A custom icon to be displayed before the text of the toast. | ComponentType | |
renderAsHtml | Whether the text should be rendered as HTML. | boolean |
Showcase
Bottom toasts:
Top end toasts: