diff --git a/packages/wow-ui/src/components/Toast/Toast.stories.tsx b/packages/wow-ui/src/components/Toast/Toast.stories.tsx
index ca21bb0e..e3871b41 100644
--- a/packages/wow-ui/src/components/Toast/Toast.stories.tsx
+++ b/packages/wow-ui/src/components/Toast/Toast.stories.tsx
@@ -2,6 +2,8 @@ import type { Meta } from "@storybook/react";
import { useEffect } from "react";
import { Warn } from "wowds-icons";
+import Button from "@/components/Button";
+
import Toast from ".";
import ToastProvider from "./ToastProvider";
import useToast from "./useToast";
@@ -78,6 +80,16 @@ export const Default = () => {
}, []);
};
+export const WithTrigger = () => {
+ const { toast } = useToast();
+
+ return (
+
+ );
+};
+
export const Close = () => {
const { toast } = useToast();
useEffect(() => {
@@ -137,8 +149,8 @@ export const Slow = () => {
const { toast } = useToast();
useEffect(() => {
toast({
- text: "TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText",
- icon: ,
+ text: "Text",
+ subText: "subtext",
toastDuration: 5000,
});
}, []);
diff --git a/packages/wow-ui/src/components/Toast/ToastProvider.tsx b/packages/wow-ui/src/components/Toast/ToastProvider.tsx
index f66885ab..91b96332 100644
--- a/packages/wow-ui/src/components/Toast/ToastProvider.tsx
+++ b/packages/wow-ui/src/components/Toast/ToastProvider.tsx
@@ -27,21 +27,23 @@ const ToastProvider = ({ children }: { children: ReactNode }) => {
return (
-
- {toasts?.map((toast: ToastProps) => (
-
- ))}
-
+ {toasts.length > 0 && (
+
+ {toasts?.map((toast: ToastProps) => (
+
+ ))}
+
+ )}
{children}
);