#Toast

A transient notification fired from useToast() — you never place one in the tree, and a single Toaster at the app root owns placement, stacking and the timer. Because it disappears, nothing may live only here: reach for a Dialog when the reader has to decide, Banner for standing account state, and Alert for a message that belongs to a region. Actions on a toast stay optional for the same reason.

Source · Storybook

#Usage

import { Toast } from '@wallarm-org/design-system/Toast';

#Examples

#With nested overlays

A toast fired from inside a Drawer, and again from a Dialog on top of it, to prove it renders above every open overlay rather than behind them.

#Update loading to success

A loading toast has no timer and no progress bar, so it will not clear itself: update() the same id to resolve it to success or error.

#Description keeps extended

A description is never dropped: ask for simple alongside one and the toast still reflows to extended, timer included. Passing no description keeps the one-line layout.

#Simple with actions

simple is a one-line title for about five seconds — as long as no description is passed with it. One action is the norm and two is the ceiling — they have to be optional, since the toast leaves on its own.

#Extended with actions

extended adds a description and about ten seconds, for the cases where one sentence of context genuinely helps.

#Long text

The title clamps to one line simple, two extended, and the description to four, with the full text in a tooltip. Pre-truncating your own copy fights it.

#Without close button

closable: false takes the X away, which is only right for an in-flight loading toast the reader must not lose.

#Custom icon

A custom icon replaces the type’s own. It inherits the type colour unless it sets one, so the first here is deliberately purple and the second is not.

#Custom icon colors

Neutral custom icons follow the toast's foreground. A status supplies its colour, while an explicit icon colour takes precedence.

#Props