01
States
Five semantic states with distinct iconography and color.
Success
Confirms a completed operation.
Error
Signals a failure requiring attention.
Warning
Caution about potential issues.
Info
Neutral informational notice.
Action
Includes an interactive button.
02
Rich Content
Pass an HTMLElement for XSS-safe rich content rendering.
HTMLElement
Structured content with inline formatting, rendered via the DOM API.
03
Async Flows
Bind a promise to a toast. Transitions on resolve or reject.
loading
→
success
Promise Resolve
Shows loading, then transitions to success after 2 s.
loading
→
error
Promise Reject
Shows loading, then transitions to error after 2 s.
04
Positions
Six viewport anchor points. Click to preview.
top-left
top-center
top-right
bottom-left
bottom-center
bottom-right