diff --git a/src/components/NotificationAlert/NotificationAlert.types.ts b/src/components/NotificationAlert/NotificationAlert.types.ts index 94ce981d..0a4b6001 100644 --- a/src/components/NotificationAlert/NotificationAlert.types.ts +++ b/src/components/NotificationAlert/NotificationAlert.types.ts @@ -29,7 +29,7 @@ export type NotificationVariant = export interface NotificationAlertBase { title?: string; - children: ReactNode; + children?: ReactNode; action?: ReactNode; isLoading?: boolean; onClose?: () => void; //If not set, we don't show the close button diff --git a/src/components/NotificationAlert/index.tsx b/src/components/NotificationAlert/index.tsx index d0e266c7..e671719d 100644 --- a/src/components/NotificationAlert/index.tsx +++ b/src/components/NotificationAlert/index.tsx @@ -26,6 +26,7 @@ import InfoIcon from "../../icons/InfoIcon"; import XIcon from "../../icons/XIcon"; import { getNotificationAlertStyle } from "./NotificationAlert.styles"; import { NotificationAlertPrp } from "./NotificationAlert.types"; +import Box from "../Box"; const Index: FC> = ({ title = "", @@ -239,8 +240,17 @@ const Index: FC> = ({
{designMode === "banner" ? ( -
{children}
- {action &&
{action}
} + {children &&
{children}
} + + {action && ( +
+ {action} +
+ )}
) : (
{title}
@@ -249,8 +259,10 @@ const Index: FC> = ({
{designMode === "card" && (
-
{children}
- {action &&
{action}
} + {children &&
{children}
} + {action && ( +
{action}
+ )}
)}