Skip to content

feat: add data-toast-id attribute to toast element - #767

Open
sawirricardo wants to merge 1 commit into
emilkowalski:mainfrom
sawirricardo:feat/data-toast-id
Open

feat: add data-toast-id attribute to toast element#767
sawirricardo wants to merge 1 commit into
emilkowalski:mainfrom
sawirricardo:feat/data-toast-id

Conversation

@sawirricardo

Copy link
Copy Markdown

Summary

Adds a data-toast-id attribute to the rendered <li> toast element, exposing the toast ID in the DOM.

Closes #714

Motivation

  • Targeted testing in Playwright / Cypress / RTL — query toasts by their ID
  • Easier DOM querying for automation or styling
  • Dynamic dismissal — child elements can read the parent data-toast-id and call toast.dismiss(id) without needing the ID passed through props

Example

toast("Message", { id: "upload-success" });

Renders:

<li data-sonner-toast data-toast-id="upload-success">...</li>

Changes

  • Added data-toast-id={String(toast.id)} to the <li> element in Toast component
  • Added test cases verifying the attribute is present for both auto-generated and custom IDs
  • Added test page button for testing custom ID toasts

Testing

Added 2 new Playwright tests:

  • Verifies data-toast-id is present on default toasts (auto-incremented numeric IDs)
  • Verifies correct data-toast-id value when a custom string ID is provided

Expose the toast ID as a data-toast-id attribute on the rendered <li>
element. This enables targeted testing in Playwright/Cypress/RTL,
easier DOM querying for automation, and allows child elements inside
the toast to retrieve the parent toast ID for dynamic dismissal.

Closes emilkowalski#714
@vercel

vercel Bot commented Jun 12, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
sonner Error Error Jun 12, 2026 9:01am

Request Review

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.

feat: Add data-toast-id support to <Toast /> component

1 participant