Data displayVisual draft 0.1
Sonner
Confirms brief outcomes without interrupting the current task.
CoreFoundational primitiveHTML first
01 / Preview
The current Angle direction.
Program publishedMembers can now see their benefits.
02 / Decision
What this component must preserve.
Angle component decision
Sonner is the single Angle toast system. Keep messages specific, time-bounded, and recoverable when an action failed.
03 / Anatomy
Parts with a specific job.
Viewport
01Toast
02Status icon
03Message
04Optional action
0504 / States
The happy path is only one state.
01Default
02Hover
03Active
04Focus
05Disabled
06Loading
07Success
08Error
05 / Guidance
Use the contract, not the screenshot.
Do
Sonner is the single Angle toast system. Keep messages specific, time-bounded, and recoverable when an action failed.
Avoid
Do not create a one-off version that bypasses shared states, tokens, focus behavior, or the component decision documented here.