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.

Showing or hiding messages happen through the use of a toastsStore:

toastsStore.show({
  text: "Hello World",
  level: "info",
});

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: