Toast Stack
Transient, non-blocking notifications anchored to a screen corner (typically bottom-right) that auto-dismiss after 4-6 seconds. Stacks newest on top with up to 3 visible; older toasts collapse or rotate out.
$ prime install @community/pattern-toast-stack Projection
Always in _index.xml · the agent never has to ask for this.
ToastStack [pattern] v1.0.0
Transient, non-blocking notifications anchored to a screen corner (typically bottom-right) that auto-dismiss after 4-6 seconds. Stacks newest on top with up to 3 visible; older toasts collapse or rotate out.
Loaded when retrieval picks the atom as adjacent / supporting.
ToastStack [pattern] v1.0.0
Transient, non-blocking notifications anchored to a screen corner (typically bottom-right) that auto-dismiss after 4-6 seconds. Stacks newest on top with up to 3 visible; older toasts collapse or rotate out.
Facts
Label
Toast Notification Stack
Problem
Background success/error feedback (saved, deleted, copied) does not warrant a modal but must still surface visibly without interrupting flow.
Solution
A fixed-position region in a screen corner. Each toast is a small card with icon + title + optional action (Undo, View) + close button. Auto-dismiss with a thin progress timer; pause on hover/focus.
Structure
<div
role="region"
aria-label="Notifications"
class="toast-region"
data-position="bottom-right"
>
<ol role="list" aria-live="polite" aria-relevant="additions">
<li role="status" class="toast" data-tone="success">
<svg aria-hidden="true"><!-- check --></svg>
<div class="content">
<p class="title">Issue created</p>
<p class="desc">PRM-1029 added to Sprint 14.</p>
</div>
<button class="action">Undo</button>
<button class="close" aria-label="Dismiss notification">
<svg aria-hidden="true"></svg>
</button>
<span class="timer" aria-hidden="true"></span>
</li>
<li role="alert" class="toast" data-tone="error">
<svg aria-hidden="true"></svg>
<div class="content">
<p class="title">Save failed</p>
<p class="desc">Network error - changes kept locally.</p>
</div>
<button class="action">Retry</button>
<button class="close" aria-label="Dismiss notification"></button>
</li>
</ol>
</div>
Uses
- @community/method-heuristic-review
Behavior
- Auto-dismiss after 4s for success/info, 6s for warnings, persistent for errors (require manual dismiss).
- Pause auto-dismiss on hover or focus inside the toast; resume on leave.
- Stack newest at top; cap visible to 3; older toasts collapse into a 'N more' indicator.
- Each toast slides in from the anchored edge over 180ms; honor
prefers-reduced-motion. - Provide an Undo affordance for destructive successes (delete, archive) within the toast lifetime.
- Toasts are dismissable with Esc when focused; clicking the body does not dismiss (only the close button or action).
A11y
- Container uses
role='region'witharia-label='Notifications'so it appears as a landmark. - Inner list has
aria-live='polite'for non-urgent toasts; userole='alert'(oraria-live='assertive') only on individual errors. - Each toast must have a dismiss button with an accessible name like 'Dismiss notification'.
- Do not auto-dismiss errors — require explicit user action so screen reader users can finish reading them.
- Honor
prefers-reduced-motion: reduceby replacing slide animation with instant appearance.
Composition
- Must Include:
- @impeccable/template-spring-config
- @impeccable/template-easing-curves
- @community/pattern-stagger-reveal
- @impeccable/template-fade-stagger
- Motion Prescriptions:
- @impeccable/template-spring-config
- @community/pattern-stagger-reveal
- Quality Thresholds:
- Min Keyframes: 4
- Requires Reduced Motion Fallback: true
- Requires Cubic Bezier: true
- Min Stagger Steps: 5
- Min Toast Variants: 5
Loaded when retrieval picks the atom as a focal / direct hit.
ToastStack [pattern] v1.0.0
Transient, non-blocking notifications anchored to a screen corner (typically bottom-right) that auto-dismiss after 4-6 seconds. Stacks newest on top with up to 3 visible; older toasts collapse or rotate out.
Facts
Label
Toast Notification Stack
Problem
Background success/error feedback (saved, deleted, copied) does not warrant a modal but must still surface visibly without interrupting flow.
Solution
A fixed-position region in a screen corner. Each toast is a small card with icon + title + optional action (Undo, View) + close button. Auto-dismiss with a thin progress timer; pause on hover/focus.
Structure
<div
role="region"
aria-label="Notifications"
class="toast-region"
data-position="bottom-right"
>
<ol role="list" aria-live="polite" aria-relevant="additions">
<li role="status" class="toast" data-tone="success">
<svg aria-hidden="true"><!-- check --></svg>
<div class="content">
<p class="title">Issue created</p>
<p class="desc">PRM-1029 added to Sprint 14.</p>
</div>
<button class="action">Undo</button>
<button class="close" aria-label="Dismiss notification">
<svg aria-hidden="true"></svg>
</button>
<span class="timer" aria-hidden="true"></span>
</li>
<li role="alert" class="toast" data-tone="error">
<svg aria-hidden="true"></svg>
<div class="content">
<p class="title">Save failed</p>
<p class="desc">Network error - changes kept locally.</p>
</div>
<button class="action">Retry</button>
<button class="close" aria-label="Dismiss notification"></button>
</li>
</ol>
</div>
Uses
- @community/method-heuristic-review
Behavior
- Auto-dismiss after 4s for success/info, 6s for warnings, persistent for errors (require manual dismiss).
- Pause auto-dismiss on hover or focus inside the toast; resume on leave.
- Stack newest at top; cap visible to 3; older toasts collapse into a 'N more' indicator.
- Each toast slides in from the anchored edge over 180ms; honor
prefers-reduced-motion. - Provide an Undo affordance for destructive successes (delete, archive) within the toast lifetime.
- Toasts are dismissable with Esc when focused; clicking the body does not dismiss (only the close button or action).
A11y
- Container uses
role='region'witharia-label='Notifications'so it appears as a landmark. - Inner list has
aria-live='polite'for non-urgent toasts; userole='alert'(oraria-live='assertive') only on individual errors. - Each toast must have a dismiss button with an accessible name like 'Dismiss notification'.
- Do not auto-dismiss errors — require explicit user action so screen reader users can finish reading them.
- Honor
prefers-reduced-motion: reduceby replacing slide animation with instant appearance.
Composition
- Must Include:
- @impeccable/template-spring-config
- @impeccable/template-easing-curves
- @community/pattern-stagger-reveal
- @impeccable/template-fade-stagger
- Motion Prescriptions:
- @impeccable/template-spring-config
- @community/pattern-stagger-reveal
- Quality Thresholds:
- Min Keyframes: 4
- Requires Reduced Motion Fallback: true
- Requires Cubic Bezier: true
- Min Stagger Steps: 5
- Min Toast Variants: 5
Examples
- @community/example-vercel-toast
- @community/example-linear-toast
- @community/example-radix-toast
Label
Toast Notification Stack
Problem
Background success/error feedback (saved, deleted, copied) does not warrant a modal but must still surface visibly without interrupting flow.
Solution
A fixed-position region in a screen corner. Each toast is a small card with icon + title + optional action (Undo, View) + close button. Auto-dismiss with a thin progress timer; pause on hover/focus.
Structure
<div
role="region"
aria-label="Notifications"
class="toast-region"
data-position="bottom-right"
>
<ol role="list" aria-live="polite" aria-relevant="additions">
<li role="status" class="toast" data-tone="success">
<svg aria-hidden="true"><!-- check --></svg>
<div class="content">
<p class="title">Issue created</p>
<p class="desc">PRM-1029 added to Sprint 14.</p>
</div>
<button class="action">Undo</button>
<button class="close" aria-label="Dismiss notification">
<svg aria-hidden="true"></svg>
</button>
<span class="timer" aria-hidden="true"></span>
</li>
<li role="alert" class="toast" data-tone="error">
<svg aria-hidden="true"></svg>
<div class="content">
<p class="title">Save failed</p>
<p class="desc">Network error - changes kept locally.</p>
</div>
<button class="action">Retry</button>
<button class="close" aria-label="Dismiss notification"></button>
</li>
</ol>
</div>
Uses
- @community/method-heuristic-review
Behavior
- Auto-dismiss after 4s for success/info, 6s for warnings, persistent for errors (require manual dismiss).
- Pause auto-dismiss on hover or focus inside the toast; resume on leave.
- Stack newest at top; cap visible to 3; older toasts collapse into a 'N more' indicator.
- Each toast slides in from the anchored edge over 180ms; honor
prefers-reduced-motion. - Provide an Undo affordance for destructive successes (delete, archive) within the toast lifetime.
- Toasts are dismissable with Esc when focused; clicking the body does not dismiss (only the close button or action).
A11y
- Container uses
role='region'witharia-label='Notifications'so it appears as a landmark. - Inner list has
aria-live='polite'for non-urgent toasts; userole='alert'(oraria-live='assertive') only on individual errors. - Each toast must have a dismiss button with an accessible name like 'Dismiss notification'.
- Do not auto-dismiss errors — require explicit user action so screen reader users can finish reading them.
- Honor
prefers-reduced-motion: reduceby replacing slide animation with instant appearance.
Compatible
- @community/pattern-optimistic-update
- @community/pattern-empty-state
Composition
- Must Include:
- @impeccable/template-spring-config
- @impeccable/template-easing-curves
- @community/pattern-stagger-reveal
- @impeccable/template-fade-stagger
- Motion Prescriptions:
- @impeccable/template-spring-config
- @community/pattern-stagger-reveal
- Quality Thresholds:
- Min Keyframes: 4
- Requires Reduced Motion Fallback: true
- Requires Cubic Bezier: true
- Min Stagger Steps: 5
- Min Toast Variants: 5
Source
prime-system/examples/frontend-design/primes/compiled/@community/pattern-toast-stack/atom.yaml