Docs draft
Toast
Component storyFigma component set ↗React component ↗DSDS entity ↗
When to use it
useTransient confirmation of an action just taken: added to Crunchylist, removed, saved.
avoidPersistent account or system information.
bannerStates
success — Confirms the action completed.
error — Signals a failed or invalid value.
Design specifications
| surface-success | color.bg.positive |
| surface-error | color.bg.negative |
| text | color.text.on-status in type.label-lg |
| close | 48px target with a 10% ink wash |
| max-width | 420px |
Accessibility
Tab — Undo action, then dismiss; focus rings in on-status white.
role=status announces without stealing focus. Auto-dismiss timing (and pausing on hover) arrives with the toast manager; the component itself never self-destructs.