🩹 Add stable attribute to toaster container

[juanpablob]

Fixes #742

First of all, thank you for maintaining such a nice lib :)

What

This PR adds a stable attribute to the <section> element that wraps the toaster: data-sonner-toaster-container.

Why?

Currently, the toaster container itself does not have a stable identifier (like a dedicated data attribute or id). In general, having a clear and explicit way to identify a root container element is helpful for integrations, testing and "interoperability". It avoids relying on DOM structure or implementation details that could change over time.

Further details

Ariakit applies the inert attribute to all sibling containers when a dialog opens to prevent other elements to be interactive while the dialog is open. To handle certain cases in which one might need to bring other elements in the DOM to be accessible and interactive, they provide a getPersistentElements prop to pass an array of elements that can remain interactive (like Toaster).

The issue is that Sonner only adds identifying attributes to the children inside the toaster container, not to the container itself. Ariakit needs a reference to the container element directly, not its children.

I could grab the container by doing getPersistentElements={() => [document.querySelector('[data-sonner-toaster]').parentElement but that won't work if no toasts have been triggered by the time the modal opens, since Ariakit expects the element to be in the DOM by the time the dialog opens.

The only possible workaround would be: document.querySelector('[aria-label^="Notifications"]') but this is flaky, let alone that it won't if you're using i18n.

How

• Added a dedicated data attribute to the toaster container element.
• No behavior changes.
• No breaking changes.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
sonner	Error		Feb 13, 2026 10:56am