Toast Style Error Block for React

No: they are a simulation. Sync now fails on a typed script (the server twice, a slow answer, a rejected file, then again) and each retry waits under a second and follows a typed outcome: the server and the slow answer recover, and the rejected file stays failed, because retrying doesn't change a bad file. Nothing is requested. In your app, group by a cause key from your errors and call your own retry from retryOne.

Each cause has one slot and one card. A repeat of the same cause adds one to the card's count and keeps its place, so a hundred timeouts are still one card; a different cause takes its own slot. Slots are fixed in size, so a card that folds away leaves its room and nothing above it moves.

The cards in the stage are drawn in place for the preview, in the shape of the catalog's toast. Each Sync now press also raises one real toast through this block's own toaster, in the corner of the page, that never times out because it has a Retry action; its Retry does what the card's does, and the card it came from folds away when it recovers. In your app keep the toaster and drop the drawn stack.

Because an error needs an answer: a card that vanished after five seconds could be missed by someone who looks away, uses a screen reader or is slow to react. A card stays until it is dismissed or its retry recovers, and the polite status line says what changed ("Retried 3: 2 recovered, 1 still failing.").

Sync now first, then Retry all, then each card's Retry and Dismiss in order. When a card goes, focus moves to Sync now so it isn't lost. Retry buttons stay pressable while a retry runs and say so rather than disappearing; Start over is always there.

Each card becomes two rows, the title and count above, the sentence and the buttons below, and the stack fills the width of the stage; the real toast sits at the foot of the screen.