diff --git a/README.md b/README.md
index 6b858e3..745a7c9 100644
--- a/README.md
+++ b/README.md
@@ -215,6 +215,25 @@ You can also use the dismiss method without the id to dismiss all toasts.
toast.dismiss();
```
+### Programmatically remove toast
+
+You can change the duration of each toast by using the `duration` property, or change the duration of all toasts like this:
+
+```jsx
+
+```
+
+```jsx
+toast('Event has been created', {
+ duration: 10000,
+});
+
+// Persisent toast
+toast('Event has been created', {
+ duration: Infinity,
+});
+```
+
## Keyboard focus
You can focus on the toast area by pressing ⌥/alt + T. You can override it by providing an array of event.code values for each key.
diff --git a/src/index.tsx b/src/index.tsx
index ea17cb7..4dbf881 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -157,7 +157,7 @@ const Toast = (props: ToastProps) => {
}, [toast, removeToast, setHeights, offset]);
React.useEffect(() => {
- if (toast.promise && promiseStatus === 'loading') return;
+ if ((toast.promise && promiseStatus === 'loading') || toast.duration === Infinity) return;
let timeoutId: NodeJS.Timeout;
// Pause the timer on each hover
diff --git a/test/src/app/page.tsx b/test/src/app/page.tsx
index cc48301..0cd05db 100644
--- a/test/src/app/page.tsx
+++ b/test/src/app/page.tsx
@@ -58,6 +58,9 @@ export default function Home() {
>
Render Custom Toast
+
>
);
diff --git a/test/tests/basic.spec.ts b/test/tests/basic.spec.ts
index 12f8b1c..7d1d956 100644
--- a/test/tests/basic.spec.ts
+++ b/test/tests/basic.spec.ts
@@ -49,4 +49,12 @@ test.describe('Basic functionality', () => {
await timeout;
await expect(page.locator('[data-sonner-toast]')).toHaveCount(1);
});
+
+ test('toast is not removed if duration is set to infinity', async ({ page }) => {
+ await page.getByTestId('infinity-toast').click();
+ await page.hover('[data-sonner-toast]');
+ const timeout = new Promise((resolve) => setTimeout(resolve, 5000));
+ await timeout;
+ await expect(page.locator('[data-sonner-toast]')).toHaveCount(1);
+ });
});