A 52-tall card with three parts switched off. Nine variants cover every toast in the docs, because the interesting axes are hidden layers rather than...
Three components, nine variants
Sonner / Icon - Type: Success · Info · Warning · Error · Loading - 20 × 20, all base.foreground
Because the three things that change are layers, not properties. The icon, the description and the action sit in the component with visibility off; switching one on in an instance costs nothing. Making them axes would have taken two variants to sixteen for a set of parts a designer toggles in the layer list anyway.
What heights should I plan a stack on?
Fifty-two and seventy-four. A title alone is 52; a description under it makes 74. The icon is 20 and the action is 24, both shorter than the text column, so neither moves the height. The one that catches people is a title long enough to wrap - that takes a toast to 72 with no description in sight, and the usage frame has one on purpose.
Why are all five status icons the same colour?
Because that is sonner's default. Colour arrives with richColors and the kit does not assume it. Every glyph is base.foreground, and the shape carries the meaning - a filled triangle warns whether or not it is yellow, a filled circle with a cross reads as an error in black. If you turn richColors on, recolour the glyph in your instance.
How is the spinner drawn?
By hand, as twelve 2 by 5 bars arranged around a circle with the opacity stepping up around the ring. A spinner is not a single path, and a static frame of one has to read as a spinner while standing still, which a plain arc does not. On this page it turns in twelve steps, which is what the bars are for.
Why does the loading toast never leave?
Because dismissing it would tell the user the work stopped. Every other toast on this page clears itself after four seconds; the loading one waits to be replaced, which is what toast.promise does - one call, a loading toast while it runs and a success or error toast when it settles. The promise button on this page does exactly that.
How many should be on screen at once?
Three in sonner's default, with the rest collapsed behind them. The demo here caps at four. Past that a toaster stops being a notification and becomes a log file, and the user reads none of them. If you need nine, you needed an inbox.