From fc6ebe280c055f30cf82be2106bbc203c0832fe0 Mon Sep 17 00:00:00 2001
From: Ricardo Sawir <sawirricardo@gmail.com>
Date: Fri, 12 Jun 2026 16:00:07 +0700
Subject: [PATCH] feat: add data-toast-id attribute to toast element (#714)

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 #714
---
 src/index.tsx            |  1 +
 test/src/app/page.tsx    |  7 +++++++
 test/tests/basic.spec.ts | 10 ++++++++++
 3 files changed, 18 insertions(+)

diff --git a/src/index.tsx b/src/index.tsx
index ce031e8..58d5a9d 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -272,6 +272,7 @@ const Toast = (props: ToastProps) => {
         toast?.classNames?.[toastType],
       )}
       data-sonner-toast=""
+      data-toast-id={String(toast.id)}
       data-rich-colors={toast.richColors ?? defaultRichColors}
       data-styled={!Boolean(toast.jsx || toast.unstyled || unstyled)}
       data-mounted={mounted}
diff --git a/test/src/app/page.tsx b/test/src/app/page.tsx
index ef50965..583602c 100644
--- a/test/src/app/page.tsx
+++ b/test/src/app/page.tsx
@@ -343,6 +343,13 @@ export default function Home({ searchParams }: any) {
       <button data-testid="toast-global" className="button" onClick={() => toast('Global Toaster Toast')}>
         Render Toast in Global Toaster
       </button>
+      <button
+        data-testid="custom-id-toast"
+        className="button"
+        onClick={() => toast('Toast with custom id', { id: 'my-custom-id' })}
+      >
+        Toast with custom ID
+      </button>
       <button
         data-testid="testid-toast-button"
         className="button"
diff --git a/test/tests/basic.spec.ts b/test/tests/basic.spec.ts
index 34f6e01..b80e5fe 100644
--- a/test/tests/basic.spec.ts
+++ b/test/tests/basic.spec.ts
@@ -331,6 +331,16 @@ test.describe('Basic functionality', () => {
     await expect(toast).not.toHaveAttribute('data-testid');
   });
 
+  test('toast renders with data-toast-id attribute', async ({ page }) => {
+    await page.getByTestId('default-button').click();
+    await expect(page.locator('[data-sonner-toast]')).toHaveAttribute('data-toast-id', /.+/);
+  });
+
+  test('toast renders correct data-toast-id when custom id is provided', async ({ page }) => {
+    await page.getByTestId('custom-id-toast').click();
+    await expect(page.locator('[data-sonner-toast][data-toast-id="my-custom-id"]')).toHaveCount(1);
+  });
+
   test('promise toast with testId maintains testId through state changes', async ({ page }) => {
     await page.getByTestId('testid-promise-toast-button').click();
     await expect(page.getByTestId('promise-test-toast')).toBeVisible();