diff --git a/site/components/sections/toast-example.tsx b/site/components/sections/toast-example.tsx
index a1a52ea..e884a35 100644
--- a/site/components/sections/toast-example.tsx
+++ b/site/components/sections/toast-example.tsx
@@ -27,6 +27,14 @@ const examples: Array<{
       toast.error("This didn't work.");
     },
   },
+  {
+    title: 'Warning',
+    emoji: '⚠️',
+    snippet: "toast.warn('Roadblocks ahead')",
+    action: () => {
+      toast.warn('Roadblocks ahead');
+    },
+  },
   {
     title: 'Promise',
     emoji: '⏳',
diff --git a/site/pages/docs/styling.mdx b/site/pages/docs/styling.mdx
index f72b094..5165025 100644
--- a/site/pages/docs/styling.mdx
+++ b/site/pages/docs/styling.mdx
@@ -41,6 +41,11 @@ You can style your notifications globally with the `toastOptions` inside the Toa
         background: 'red',
       },
     },
+    warn: {
+      style: {
+        background: 'yellow',
+      },
+    },
   }}
 />
 ```
diff --git a/site/pages/docs/toast.mdx b/site/pages/docs/toast.mdx
index 75910ea..b47287b 100644
--- a/site/pages/docs/toast.mdx
+++ b/site/pages/docs/toast.mdx
@@ -65,6 +65,14 @@ toast.error('This is an error!');
 
 Creates a notification with an animated error icon. It can be themed with the `iconTheme` option.
 
+### Warning
+
+```js
+toast.warn("I'm warning you!");
+```
+
+Creates a notification with an animated warning icon. It can be themed with the `iconTheme` option.
+
 ### Custom (JSX)
 
 ```js
@@ -132,6 +140,7 @@ Every type has its own duration. You can overwrite them `duration` with the toas
 | `blank`   | 4000     |
 | `error`   | 4000     |
 | `success` | 2000     |
+| `warn`    | 3000     |
 | `custom`  | 4000     |
 | `loading` | Infinity |
 
diff --git a/site/pages/docs/toaster.mdx b/site/pages/docs/toaster.mdx
index fb90689..fd8e369 100644
--- a/site/pages/docs/toaster.mdx
+++ b/site/pages/docs/toaster.mdx
@@ -72,7 +72,7 @@ These will act as default options for all toasts. See [`toast()`](/docs/toast) f
 
 #### Type specific options
 
-You can change the defaults for a specific type by adding, `success: {}`, `error: {}`, `loading: {}` or `custom: {}`.
+You can change the defaults for a specific type by adding, `success: {}`, `error: {}`, `loading: {}`, `warn: {}` or `custom: {}`.
 
 ## Using a custom render function