Skip to content

Conversation

segunadebayo
Copy link
Member

📝 Description

Add priority-based queue system for toasts inspired by Adobe Spectrum's design guidelines. Toasts now support priority
levels (1-8, where 1 is highest priority) with automatic priority assignment:

  • Error toasts: Priority 1 (actionable) or 2 (non-actionable) - always shown first
  • Warning toasts: Priority 2 (actionable) or 6 (non-actionable)
  • Loading toasts: Priority 3 (actionable) or 4 (non-actionable)
  • Success toasts: Priority 4 (actionable) or 7 (non-actionable)
  • Info toasts: Priority 5 (actionable) or 8 (non-actionable)

When the maximum number of toasts is reached, new high-priority toasts are queued and displayed as soon as space becomes
available, ensuring critical notifications are never missed. Custom priorities can be set using the priority option.

Additionally, when using toast.promise to track a promise, the success options can now specify type as either
success or warning for more flexible promise result handling.

⛳️ Current behavior (updates)

Toast appears in order

🚀 New behavior

Toasts are prioritized by importance

💣 Is this a breaking change (Yes/No):

📝 Additional Information

Copy link

changeset-bot bot commented Aug 12, 2025

🦋 Changeset detected

Latest commit: afd8047

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 78 packages
Name Type
@zag-js/toast Minor
@zag-js/anatomy-icons Minor
@zag-js/anatomy Minor
@zag-js/core Minor
@zag-js/docs Minor
@zag-js/preact Minor
@zag-js/react Minor
@zag-js/solid Minor
@zag-js/svelte Minor
@zag-js/vue Minor
@zag-js/accordion Minor
@zag-js/angle-slider Minor
@zag-js/async-list Minor
@zag-js/avatar Minor
@zag-js/carousel Minor
@zag-js/checkbox Minor
@zag-js/clipboard Minor
@zag-js/collapsible Minor
@zag-js/color-picker Minor
@zag-js/combobox Minor
@zag-js/date-picker Minor
@zag-js/dialog Minor
@zag-js/editable Minor
@zag-js/file-upload Minor
@zag-js/floating-panel Minor
@zag-js/hover-card Minor
@zag-js/listbox Minor
@zag-js/menu Minor
@zag-js/navigation-menu Minor
@zag-js/number-input Minor
@zag-js/pagination Minor
@zag-js/password-input Minor
@zag-js/pin-input Minor
@zag-js/popover Minor
@zag-js/presence Minor
@zag-js/progress Minor
@zag-js/qr-code Minor
@zag-js/radio-group Minor
@zag-js/rating-group Minor
@zag-js/scroll-area Minor
@zag-js/select Minor
@zag-js/signature-pad Minor
@zag-js/slider Minor
@zag-js/splitter Minor
@zag-js/steps Minor
@zag-js/switch Minor
@zag-js/tabs Minor
@zag-js/tags-input Minor
@zag-js/time-picker Minor
@zag-js/timer Minor
@zag-js/toggle-group Minor
@zag-js/toggle Minor
@zag-js/tooltip Minor
@zag-js/tour Minor
@zag-js/tree-view Minor
@zag-js/store Minor
@zag-js/types Minor
@zag-js/aria-hidden Minor
@zag-js/auto-resize Minor
@zag-js/collection Minor
@zag-js/color-utils Minor
@zag-js/utils Minor
@zag-js/date-utils Minor
@zag-js/dismissable Minor
@zag-js/dom-query Minor
@zag-js/file-utils Minor
@zag-js/focus-trap Minor
@zag-js/focus-visible Minor
@zag-js/highlight-word Minor
@zag-js/i18n-utils Minor
@zag-js/interact-outside Minor
@zag-js/json-tree-utils Minor
@zag-js/live-region Minor
@zag-js/popper Minor
@zag-js/rect-utils Minor
@zag-js/remove-scroll Minor
@zag-js/scroll-snap Minor
@zag-js/stringify-state Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link

vercel bot commented Aug 12, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Project Deployment Preview Updated (UTC)
zag-nextjs Ready Preview Aug 12, 2025 8:31pm
zag-solid Ready Preview Aug 12, 2025 8:31pm
zag-svelte Ready Preview Aug 12, 2025 8:31pm
zag-vue Ready Preview Aug 12, 2025 8:31pm
zag-website Ready Preview Aug 12, 2025 8:31pm

@enjidev
Copy link

enjidev commented Aug 13, 2025

Everything looks great, excellent work. Quick question: will an Error toast override any toast that is currently displayed?

CMIIW, but according to the spec, if another toast type is visible, an Error toast should be shown immediately and replace the last visible toast when the max number of visible toasts has been reached.

@segunadebayo
Copy link
Member Author

segunadebayo commented Aug 13, 2025

That might be a breaking addition. We can consider adding this later.

For now, I might consider exposing methods to enqueue and dequeue a toast (for userland control)

@segunadebayo segunadebayo marked this pull request as ready for review August 30, 2025 13:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants