Guidelines · Feedback
Toast vs Banner vs ConflictBanner
M2 drawer flows need feedback that distinguishes transient commit results, persistent context, and blocking concurrency decisions.
Choosing the primitive
| Primitive | When to use | Position |
|---|---|---|
| Toast | Transient feedback after success, network error, or ambient state change. | top-right, 16px from the viewport edge, managed by the host stack. |
| Banner | Persistent state the user must know while working: historical view, non-production data, or connection loss. | Top-of-section or page container. |
| ConflictBanner | Only concurrency conflict that requires a reload/discard decision. | Replaces the entire drawer body. |
Timing and behaviour
Toast duration is 4s default for success/info and 8s for error. Never auto-dismiss an error toast when `onDismiss` is absent. Banner is persistent until the underlying state changes. ConflictBanner never times out; the user must choose Reload or Discard.
Tone tokens
| Tone | Token family | Allowed primitives |
|---|---|---|
| success | --at-success-* | Toast, ValidationMessage |
| warning | --at-warning-* | Banner, ValidationMessage, ConflictBanner icon |
| error | --at-flush-700 with --at-flush-50 | Toast, Banner, Field error, ValidationMessage |
| info | --at-info-* | Toast, Banner, ValidationMessage |