Styles for action and cancel buttons

src/index.tsx

@@ -43,6 +43,8 @@ interface ToastProps {
   closeButton: boolean;
   interacting: boolean;
   style?: React.CSSProperties;
+  cancelButtonStyle?: React.CSSProperties;
+  actionButtonStyle?: React.CSSProperties;
   duration?: number;
   className?: string;
   unstyled?: boolean;
@@ -63,6 +65,8 @@ const Toast = (props: ToastProps) => {
     removeToast,
     closeButton,
     style,
+    cancelButtonStyle,
+    actionButtonStyle,
     className = '',
     descriptionClassName = '',
     duration: durationFromToaster,
@@ -346,6 +350,7 @@ const Toast = (props: ToastProps) => {
             <button
               data-button
               data-cancel
+              style={cancelButtonStyle}
               onClick={() => {
                 if (!dismissible) return;
                 deleteToast();
@@ -360,6 +365,7 @@ const Toast = (props: ToastProps) => {
           {toast.action ? (
             <button
               data-button=""
+              style={actionButtonStyle}
               onClick={(event) => {
                 toast.action?.onClick(event);
                 if (event.defaultPrevented) return;
@@ -612,6 +618,8 @@ const Toaster = (props: ToasterProps) => {
                   interacting={interacting}
                   position={position}
                   style={toastOptions?.style}
+                  cancelButtonStyle={toastOptions?.cancelButtonStyle}
+                  actionButtonStyle={toastOptions?.actionButtonStyle}
                   removeToast={removeToast}
                   toasts={toasts}
                   heights={heights}

src/types.ts

@@ -51,6 +51,8 @@ interface ToastOptions {
   className?: string;
   descriptionClassName?: string;
   style?: React.CSSProperties;
+  cancelButtonStyle?: React.CSSProperties;
+  actionButtonStyle?: React.CSSProperties;
   duration?: number;
   unstyled?: boolean;
 }

test/src/app/page.tsx

@@ -90,6 +90,20 @@ export default function Home({ searchParams }: any) {
       >
         Render Custom Toast
       </button>
+      <button
+        data-testid="custom-cancel-button-toast"
+        className="button"
+        onClick={() =>
+          toast('My Custom Cancel Button', {
+            cancel: {
+              label: 'Cancel',
+              onClick: () => console.log('Cancel'),
+            },
+          })
+        }
+      >
+        Render Custom Cancel Button
+      </button>
       <button data-testid="infinity-toast" className="button" onClick={() => toast('My Toast', { duration: Infinity })}>
         Render Infinity Toast
       </button>
@@ -132,8 +146,8 @@ export default function Home({ searchParams }: any) {
         onClick={() => {
           const toastId = toast('My Unupdated Toast', {
             duration: 10000,
-        });
-        toast('My Updated Toast', {
+          });
+          toast('My Updated Toast', {
             id: toastId,
             duration: 10000,
           });
@@ -143,7 +157,15 @@ export default function Home({ searchParams }: any) {
       </button>
       {showAutoClose ? <div data-testid="auto-close-el" /> : null}
       {showDismiss ? <div data-testid="dismiss-el" /> : null}
-      <Toaster position={searchParams.position || 'bottom-right'} theme={theme} dir={searchParams.dir || 'auto'} />
+      <Toaster
+        position={searchParams.position || 'bottom-right'}
+        toastOptions={{
+          actionButtonStyle: { backgroundColor: 'rgb(219, 239, 255)' },
+          cancelButtonStyle: { backgroundColor: 'rgb(254, 226, 226)' },
+        }}
+        theme={theme}
+        dir={searchParams.dir || 'auto'}
+      />
     </>
   );
 }

test/tests/basic.spec.ts

@@ -7,7 +7,7 @@ test.beforeEach(async ({ page }) => {
 test.describe('Basic functionality', () => {
   test('toast is rendered and disappears after the default timeout', async ({ page }) => {
     await page.getByTestId('default-button').click();
-    await expect(page.locator('[data-sonner-toast]')).toHaveCount(0);
+    await expect(page.locator('[data-sonner-toast]')).toHaveCount(1);
     await expect(page.locator('[data-sonner-toast]')).toHaveCount(0);
   });
 
@@ -165,4 +165,18 @@ test.describe('Basic functionality', () => {
     await expect(page.getByText('My Unupdated Toast')).toHaveCount(0);
     await expect(page.getByText('My Updated Toast')).toHaveCount(1);
   });
+
+  test('cancel button is rendered with custom styles', async ({ page }) => {
+    await page.getByTestId('custom-cancel-button-toast').click();
+    const button = await page.locator('[data-cancel]');
+
+    await expect(button).toHaveCSS('background-color', 'rgb(254, 226, 226)');
+  });
+
+  test('action button is rendered with custom styles', async ({ page }) => {
+    await page.getByTestId('action').click();
+    const button = await page.locator('[data-button]');
+
+    await expect(button).toHaveCSS('background-color', 'rgb(219, 239, 255)');
+  });
 });