diff --git a/src/index.tsx b/src/index.tsx
index d4a07ca..2763272 100644
--- a/src/index.tsx
+++ b/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;
@@ -64,6 +66,8 @@ const Toast = (props: ToastProps) => {
removeToast,
closeButton,
style,
+ cancelButtonStyle,
+ actionButtonStyle,
className = '',
descriptionClassName = '',
duration: durationFromToaster,
@@ -357,6 +361,7 @@ const Toast = (props: ToastProps) => {
{showAutoClose ?
: null}
{showDismiss ? : null}
-
+
>
);
}
diff --git a/test/tests/basic.spec.ts b/test/tests/basic.spec.ts
index de74409..f450701 100644
--- a/test/tests/basic.spec.ts
+++ b/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)');
+ });
});