diff --git a/lib/Notification/blip/NotificationBlip.tsx b/lib/Notification/blip/NotificationBlip.tsx
index e1838ca6a..cf2fe2d88 100644
--- a/lib/Notification/blip/NotificationBlip.tsx
+++ b/lib/Notification/blip/NotificationBlip.tsx
@@ -2,10 +2,11 @@ import React from 'react';
 import cx from 'classnames';
 
 interface Props {
+  children: React.ReactNode;
   className?: string;
 }
 
-export default function NotificationBlip({ className }: Props) {
+export function NotificationBlip({ children, className }: Props) {
   const classes = cx('notification-blip', className);
-  return <div className={classes} />;
+  return <div className={classes}>{children}</div>;
 }
\ No newline at end of file
diff --git a/lib/Notification/blip/styles/NotificationBlip.scss b/lib/Notification/blip/styles/NotificationBlip.scss
index 8e4b9070e..ef4af1af0 100644
--- a/lib/Notification/blip/styles/NotificationBlip.scss
+++ b/lib/Notification/blip/styles/NotificationBlip.scss
@@ -1,5 +1,5 @@
 .notification-blip {
-  @apply absolute h-full w-full;
+  @apply relative w-fit h-fit;
 }
 
 .notification-blip::after {
diff --git a/lib/index.ts b/lib/index.ts
index a1f5fc003..f8e404707 100644
--- a/lib/index.ts
+++ b/lib/index.ts
@@ -20,6 +20,7 @@ export { NotificationInlineDanger } from "./Notification/inline/NotificationInli
 export { NotificationInlineInformation } from "./Notification/inline/NotificationInlineInformation";
 export { NotificationInlineSuccess } from "./Notification/inline/NotificationInlineSuccess";
 export { NotificationInlineWarning } from "./Notification/inline/NotificationInlineWarning";
+export { NotificationBlip } from "./Notification/blip/NotificationBlip";
 export { Dropdown } from "./Dropdown";
 export { DropdownMenu } from "./DropdownMenu";
 export { ProgressButton } from "./ProgressButton";
diff --git a/stories/components/NotificationBlip.stories.tsx b/stories/components/NotificationBlip.stories.tsx
index 934df9eb8..f42b93e04 100644
--- a/stories/components/NotificationBlip.stories.tsx
+++ b/stories/components/NotificationBlip.stories.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Button, ButtonIcon } from "../../lib";
 import { Icon } from "../../lib";
-import NotificationBlipComponent from "../../lib/Notification/blip/NotificationBlip";
+import { NotificationBlip as NotificationBlipComponent } from "../../lib/Notification/blip/NotificationBlip";
 import StoryItem from "../styleguide/StoryItem";
 
 export default {
@@ -14,8 +14,8 @@ export const NotificationBlip = (args: any) => <>
     title="Notification blip"
     description="A visual indicator to inform the user they have notifications"
   >
-    <ButtonIcon name={'bell'}>
-      <NotificationBlipComponent />
-    </ButtonIcon>
+    <NotificationBlipComponent>
+      <ButtonIcon name={'bell'} />
+    </NotificationBlipComponent>
   </StoryItem>
 </>;
\ No newline at end of file