diff --git a/src/components/BannerNotification/BannerNotification.module.css b/src/components/BannerNotification/BannerNotification.module.css
new file mode 100644
index 000000000..566143f22
--- /dev/null
+++ b/src/components/BannerNotification/BannerNotification.module.css
@@ -0,0 +1,87 @@
+@import '../../design-tokens/mixins.css';
+
+/*------------------------------------*\
+    # BANNER NOTIFICATION
+\*------------------------------------*/
+
+/**
+ * Message of information, success, caution, or warning to the user.
+ */
+.banner {
+  /* Position is relative to allow for absolute-positioned close button. */
+  position: relative;
+  /* Grid is used to separate the icon from the text with correct spacing. */
+  display: flex;
+  gap: 1rem;
+  padding: 1rem;
+
+  border: 0.125rem solid;
+  border-left: 1rem solid;
+  border-radius: calc(var(--eds-theme-border-radius-objects-sm) * 1px);
+
+  &.banner-notification--status-informational {
+    color: var(--eds-theme-color-text-utility-informational);
+    background-color: var(--eds-theme-color-background-utility-information-low-emphasis);
+  }
+
+  &.banner-notification--status-critical {
+    color: var(--eds-theme-color-text-utility-critical);
+    background-color: var(--eds-theme-color-background-utility-critical-low-emphasis);
+  }
+
+  &.banner-notification--status-favorable {
+    color: var(--eds-theme-color-text-utility-favorable);
+    background-color: var(--eds-theme-color-background-utility-favorable-low-emphasis);
+  }
+
+  &.banner-notification--status-warning {
+    color: var(--eds-theme-color-text-utility-warning);
+    background-color: var(--eds-theme-color-background-utility-warning-low-emphasis);
+  }
+}
+
+.banner-notification__icon {
+  flex-shrink: 0;
+}
+
+.banner-notification__body {
+  flex-grow: 2;
+  display: flex;
+
+  &.banner-notification--has-vertical-cta {
+    flex-direction: column;
+  }
+
+  &.banner-notification--has-horizontal-cta {
+    flex-direction: row;
+  }
+}
+
+.banner-notification__call-to-action {
+  .banner-notification--has-vertical-cta & {
+    margin-top: 1rem;
+  }
+
+  .banner-notificatino-has-horizontal-cta & {
+    margin-left: 1rem;
+  }
+}
+
+.banner-notification__text {
+  flex-grow: 2;
+}
+
+/**
+ * Close button
+ *
+ * Button used to dismiss a banner.
+ */
+.banner-notification__close-button {
+  align-self: flex-start;
+  color: var(--eds-theme-color-text-utility-default-secondary);
+}
+
+.banner-notification__sub-title {
+  color: var(--eds-theme-color-text-utility-default-secondary);
+}
+
diff --git a/src/components/BannerNotification/BannerNotification.stories.tsx b/src/components/BannerNotification/BannerNotification.stories.tsx
new file mode 100644
index 000000000..2b8be10f1
--- /dev/null
+++ b/src/components/BannerNotification/BannerNotification.stories.tsx
@@ -0,0 +1,87 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import React from 'react';
+
+import { BannerNotification } from './BannerNotification';
+import { ButtonV2 as Button } from '../Button';
+
+export default {
+  title: 'Components/V2/BannerNotification',
+  component: BannerNotification,
+  parameters: {
+    badges: ['intro-1.0', 'current-2.0'],
+  },
+  args: {
+    title: 'Alert title which communicates info to the user',
+    subTitle: ' Subtitle which provides additional detail',
+    callToAction: (
+      <Button rank="secondary" size="sm" variant="default">
+        Call to Action
+      </Button>
+    ),
+  },
+  argTypes: {
+    subTitle: {
+      control: {
+        type: 'text',
+      },
+    },
+    callToAction: {
+      control: {
+        type: null,
+      },
+    },
+  },
+} as Meta<Args>;
+
+type Args = React.ComponentProps<typeof BannerNotification>;
+
+const dismissMethod = () => {
+  console.log('dismissing~');
+};
+
+export const Default: StoryObj<Args> = {};
+
+export const Warning: StoryObj<Args> = {
+  args: {
+    status: 'warning',
+  },
+};
+
+/**
+ * When using critical, make sure `Button` has a matching variant specified.
+ * TODO-AH: design of the secondary critical button has a customization to the background that needs verification.
+ */
+export const Critical: StoryObj<Args> = {
+  args: {
+    status: 'critical',
+    callToAction: (
+      <Button rank="secondary" size="sm" variant="critical">
+        Call to Action
+      </Button>
+    ),
+  },
+};
+
+export const CriticalHorizontal: StoryObj<Args> = {
+  args: {
+    status: 'critical',
+    buttonLayout: 'horizontal',
+    callToAction: (
+      <Button rank="secondary" size="sm" variant="critical">
+        Call to Action
+      </Button>
+    ),
+  },
+};
+
+export const Favorable: StoryObj<Args> = {
+  args: {
+    status: 'favorable',
+  },
+};
+
+export const Dismissable: StoryObj<Args> = {
+  args: {
+    onDismiss: dismissMethod,
+  },
+};
diff --git a/src/components/BannerNotification/BannerNotification.test.ts b/src/components/BannerNotification/BannerNotification.test.ts
new file mode 100644
index 000000000..d3dccd066
--- /dev/null
+++ b/src/components/BannerNotification/BannerNotification.test.ts
@@ -0,0 +1,6 @@
+import { generateSnapshots } from '@chanzuckerberg/story-utils';
+import * as stories from './BannerNotification.stories';
+
+describe('<BannerNotification />', () => {
+  generateSnapshots(stories);
+});
diff --git a/src/components/BannerNotification/BannerNotification.tsx b/src/components/BannerNotification/BannerNotification.tsx
new file mode 100644
index 000000000..bdb28bcd9
--- /dev/null
+++ b/src/components/BannerNotification/BannerNotification.tsx
@@ -0,0 +1,146 @@
+import clsx from 'clsx';
+import React, { type ReactNode } from 'react';
+
+import type { Status } from '../../util/variant-types';
+import Heading from '../Heading';
+import Icon, { type IconName } from '../Icon';
+import Text from '../Text';
+
+import styles from './BannerNotification.module.css';
+
+/**
+ * TODO-AH:
+ * - feedback on api naming in figma
+ * - handling of aria-live for a11y
+ */
+
+export type BannerNotificationProps = {
+  // Component API
+  /**
+   * CSS class names that can be appended to the component.
+   */
+  className?: string;
+  /**
+   * Callback when banner is dismissed. When passed in, renders banner with a close icon in the top right.
+   */
+  onDismiss?: () => void;
+  // Design API
+  /**
+   *
+   */
+  buttonLayout?: 'vertical' | 'horizontal';
+  /**
+   * TODO-AH: ensure this is a button
+   */
+  callToAction?: ReactNode;
+  /**
+   * Keyword to characterize the state of the notification
+   */
+  status?: Status;
+  /**
+   * Secondary text used to describe the notification in more detail
+   */
+  subTitle?: string;
+  /**
+   * The title/heading of the banner
+   */
+  title?: string;
+};
+
+/**
+ * Map statuses to existing icon names
+ * TODO-AH: de-dupe this with the function in InlineNotification
+ *
+ * @param status component status
+ * @returns the matching icon name
+ */
+function getIconNameFromStatus(status: Status): IconName {
+  const map: Record<Status, IconName> = {
+    informational: 'info',
+    critical: 'dangerous',
+    warning: 'warning',
+    favorable: 'check-circle',
+  };
+  return map[status];
+}
+
+/**
+ * `import {BannerNotification} from "@chanzuckerberg/eds";`
+ *
+ * An alert placed at the top of a page which impacts the entire experience on a screen.
+ */
+export const BannerNotification = ({
+  buttonLayout = 'vertical',
+  callToAction,
+  className,
+  subTitle,
+  onDismiss,
+  status = 'informational',
+  title,
+}: BannerNotificationProps) => {
+  const componentClassName = clsx(
+    // Base styles
+    styles['banner'],
+    status && styles[`banner-notification--status-${status}`],
+    // Other options
+    onDismiss && styles['banner--dismissable'],
+    className,
+  );
+
+  return (
+    <aside className={componentClassName}>
+      <Icon
+        className={styles['banner-notification__icon']}
+        name={getIconNameFromStatus(status)}
+        purpose="decorative"
+        size="1.5rem"
+      />
+
+      <div
+        className={clsx(
+          styles['banner-notification__body'],
+          buttonLayout &&
+            styles[`banner-notification--has-${buttonLayout}-cta`],
+        )}
+      >
+        <div className={styles['banner-notification__text']}>
+          {title && (
+            <Heading as="h3" preset="title-md">
+              {title}
+            </Heading>
+          )}
+          {subTitle && (
+            <Text
+              as="p"
+              className={styles['banner-notification__sub-title']}
+              preset="body-sm"
+            >
+              {subTitle}
+            </Text>
+          )}
+        </div>
+        {callToAction && (
+          <div className={styles['banner-notification__call-to-action']}>
+            {callToAction}
+          </div>
+        )}
+      </div>
+
+      {onDismiss && (
+        <button
+          className={styles['banner-notification__close-button']}
+          onClick={onDismiss}
+        >
+          <Icon
+            name="close"
+            purpose="informative"
+            size="1.5rem"
+            title="dismiss notification"
+          />
+        </button>
+      )}
+    </aside>
+  );
+};
+
+BannerNotification.displayName = 'BannerNotification';
diff --git a/src/components/BannerNotification/__snapshots__/BannerNotification.test.ts.snap b/src/components/BannerNotification/__snapshots__/BannerNotification.test.ts.snap
new file mode 100644
index 000000000..e3c8761a9
--- /dev/null
+++ b/src/components/BannerNotification/__snapshots__/BannerNotification.test.ts.snap
@@ -0,0 +1,340 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<BannerNotification /> Critical story renders snapshot 1`] = `
+<aside
+  class="banner banner-notification--status-critical"
+>
+  <svg
+    aria-hidden="true"
+    class="icon banner-notification__icon"
+    fill="currentColor"
+    height="1.5rem"
+    style="--icon-size: 1.5rem;"
+    viewBox="0 0 24 24"
+    width="1.5rem"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M14.9,3H9.1C8.57,3,8.06,3.21,7.68,3.59l-4.1,4.1C3.21,8.06,3,8.57,3,9.1v5.8c0,0.53,0.21,1.04,0.59,1.41l4.1,4.1 C8.06,20.79,8.57,21,9.1,21h5.8c0.53,0,1.04-0.21,1.41-0.59l4.1-4.1C20.79,15.94,21,15.43,21,14.9V9.1c0-0.53-0.21-1.04-0.59-1.41 l-4.1-4.1C15.94,3.21,15.43,3,14.9,3z M15.54,15.54L15.54,15.54c-0.39,0.39-1.02,0.39-1.41,0L12,13.41l-2.12,2.12 c-0.39,0.39-1.02,0.39-1.41,0l0,0c-0.39-0.39-0.39-1.02,0-1.41L10.59,12L8.46,9.88c-0.39-0.39-0.39-1.02,0-1.41l0,0 c0.39-0.39,1.02-0.39,1.41,0L12,10.59l2.12-2.12c0.39-0.39,1.02-0.39,1.41,0l0,0c0.39,0.39,0.39,1.02,0,1.41L13.41,12l2.12,2.12 C15.93,14.51,15.93,15.15,15.54,15.54z"
+    />
+  </svg>
+  <div
+    class="banner-notification__body banner-notification--has-vertical-cta"
+  >
+    <div
+      class="banner-notification__text"
+    >
+      <h3
+        class="heading heading--title-md"
+      >
+        Alert title which communicates info to the user
+      </h3>
+      <p
+        class="text text--body-sm banner-notification__sub-title"
+      >
+         Subtitle which provides additional detail
+      </p>
+    </div>
+    <div
+      class="banner-notification__call-to-action"
+    >
+      <button
+        class="button button--layout-none button--secondary button--sm button--variant-critical"
+        type="button"
+      >
+        <span
+          class="button__text"
+        >
+          Call to Action
+        </span>
+      </button>
+    </div>
+  </div>
+</aside>
+`;
+
+exports[`<BannerNotification /> CriticalHorizontal story renders snapshot 1`] = `
+<aside
+  class="banner banner-notification--status-critical"
+>
+  <svg
+    aria-hidden="true"
+    class="icon banner-notification__icon"
+    fill="currentColor"
+    height="1.5rem"
+    style="--icon-size: 1.5rem;"
+    viewBox="0 0 24 24"
+    width="1.5rem"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M14.9,3H9.1C8.57,3,8.06,3.21,7.68,3.59l-4.1,4.1C3.21,8.06,3,8.57,3,9.1v5.8c0,0.53,0.21,1.04,0.59,1.41l4.1,4.1 C8.06,20.79,8.57,21,9.1,21h5.8c0.53,0,1.04-0.21,1.41-0.59l4.1-4.1C20.79,15.94,21,15.43,21,14.9V9.1c0-0.53-0.21-1.04-0.59-1.41 l-4.1-4.1C15.94,3.21,15.43,3,14.9,3z M15.54,15.54L15.54,15.54c-0.39,0.39-1.02,0.39-1.41,0L12,13.41l-2.12,2.12 c-0.39,0.39-1.02,0.39-1.41,0l0,0c-0.39-0.39-0.39-1.02,0-1.41L10.59,12L8.46,9.88c-0.39-0.39-0.39-1.02,0-1.41l0,0 c0.39-0.39,1.02-0.39,1.41,0L12,10.59l2.12-2.12c0.39-0.39,1.02-0.39,1.41,0l0,0c0.39,0.39,0.39,1.02,0,1.41L13.41,12l2.12,2.12 C15.93,14.51,15.93,15.15,15.54,15.54z"
+    />
+  </svg>
+  <div
+    class="banner-notification__body banner-notification--has-horizontal-cta"
+  >
+    <div
+      class="banner-notification__text"
+    >
+      <h3
+        class="heading heading--title-md"
+      >
+        Alert title which communicates info to the user
+      </h3>
+      <p
+        class="text text--body-sm banner-notification__sub-title"
+      >
+         Subtitle which provides additional detail
+      </p>
+    </div>
+    <div
+      class="banner-notification__call-to-action"
+    >
+      <button
+        class="button button--layout-none button--secondary button--sm button--variant-critical"
+        type="button"
+      >
+        <span
+          class="button__text"
+        >
+          Call to Action
+        </span>
+      </button>
+    </div>
+  </div>
+</aside>
+`;
+
+exports[`<BannerNotification /> Default story renders snapshot 1`] = `
+<aside
+  class="banner banner-notification--status-informational"
+>
+  <svg
+    aria-hidden="true"
+    class="icon banner-notification__icon"
+    fill="currentColor"
+    height="1.5rem"
+    style="--icon-size: 1.5rem;"
+    viewBox="0 0 24 24"
+    width="1.5rem"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 22C10.6167 22 9.31667 21.7373 8.1 21.212C6.88333 20.6873 5.825 19.975 4.925 19.075C4.025 18.175 3.31267 17.1167 2.788 15.9C2.26267 14.6833 2 13.3833 2 12C2 10.6167 2.26267 9.31667 2.788 8.1C3.31267 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.31233 8.1 2.787C9.31667 2.26233 10.6167 2 12 2C13.3833 2 14.6833 2.26233 15.9 2.787C17.1167 3.31233 18.175 4.025 19.075 4.925C19.975 5.825 20.6873 6.88333 21.212 8.1C21.7373 9.31667 22 10.6167 22 12C22 13.3833 21.7373 14.6833 21.212 15.9C20.6873 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6873 15.9 21.212C14.6833 21.7373 13.3833 22 12 22ZM12 9C12.2833 9 12.521 8.904 12.713 8.712C12.9043 8.52067 13 8.28333 13 8C13 7.71667 12.9043 7.479 12.713 7.287C12.521 7.09567 12.2833 7 12 7C11.7167 7 11.4793 7.09567 11.288 7.287C11.096 7.479 11 7.71667 11 8C11 8.28333 11.096 8.52067 11.288 8.712C11.4793 8.904 11.7167 9 12 9ZM11 17H13V11H11V17Z"
+    />
+  </svg>
+  <div
+    class="banner-notification__body banner-notification--has-vertical-cta"
+  >
+    <div
+      class="banner-notification__text"
+    >
+      <h3
+        class="heading heading--title-md"
+      >
+        Alert title which communicates info to the user
+      </h3>
+      <p
+        class="text text--body-sm banner-notification__sub-title"
+      >
+         Subtitle which provides additional detail
+      </p>
+    </div>
+    <div
+      class="banner-notification__call-to-action"
+    >
+      <button
+        class="button button--layout-none button--secondary button--sm button--variant-default"
+        type="button"
+      >
+        <span
+          class="button__text"
+        >
+          Call to Action
+        </span>
+      </button>
+    </div>
+  </div>
+</aside>
+`;
+
+exports[`<BannerNotification /> Dismissable story renders snapshot 1`] = `
+<aside
+  class="banner banner-notification--status-informational banner--dismissable"
+>
+  <svg
+    aria-hidden="true"
+    class="icon banner-notification__icon"
+    fill="currentColor"
+    height="1.5rem"
+    style="--icon-size: 1.5rem;"
+    viewBox="0 0 24 24"
+    width="1.5rem"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 22C10.6167 22 9.31667 21.7373 8.1 21.212C6.88333 20.6873 5.825 19.975 4.925 19.075C4.025 18.175 3.31267 17.1167 2.788 15.9C2.26267 14.6833 2 13.3833 2 12C2 10.6167 2.26267 9.31667 2.788 8.1C3.31267 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.31233 8.1 2.787C9.31667 2.26233 10.6167 2 12 2C13.3833 2 14.6833 2.26233 15.9 2.787C17.1167 3.31233 18.175 4.025 19.075 4.925C19.975 5.825 20.6873 6.88333 21.212 8.1C21.7373 9.31667 22 10.6167 22 12C22 13.3833 21.7373 14.6833 21.212 15.9C20.6873 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6873 15.9 21.212C14.6833 21.7373 13.3833 22 12 22ZM12 9C12.2833 9 12.521 8.904 12.713 8.712C12.9043 8.52067 13 8.28333 13 8C13 7.71667 12.9043 7.479 12.713 7.287C12.521 7.09567 12.2833 7 12 7C11.7167 7 11.4793 7.09567 11.288 7.287C11.096 7.479 11 7.71667 11 8C11 8.28333 11.096 8.52067 11.288 8.712C11.4793 8.904 11.7167 9 12 9ZM11 17H13V11H11V17Z"
+    />
+  </svg>
+  <div
+    class="banner-notification__body banner-notification--has-vertical-cta"
+  >
+    <div
+      class="banner-notification__text"
+    >
+      <h3
+        class="heading heading--title-md"
+      >
+        Alert title which communicates info to the user
+      </h3>
+      <p
+        class="text text--body-sm banner-notification__sub-title"
+      >
+         Subtitle which provides additional detail
+      </p>
+    </div>
+    <div
+      class="banner-notification__call-to-action"
+    >
+      <button
+        class="button button--layout-none button--secondary button--sm button--variant-default"
+        type="button"
+      >
+        <span
+          class="button__text"
+        >
+          Call to Action
+        </span>
+      </button>
+    </div>
+  </div>
+  <button
+    class="banner-notification__close-button"
+  >
+    <svg
+      class="icon"
+      fill="currentColor"
+      height="1.5rem"
+      role="img"
+      style="--icon-size: 1.5rem;"
+      viewBox="0 0 24 24"
+      width="1.5rem"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title>
+        dismiss notification
+      </title>
+      <path
+        d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
+      />
+    </svg>
+  </button>
+</aside>
+`;
+
+exports[`<BannerNotification /> Favorable story renders snapshot 1`] = `
+<aside
+  class="banner banner-notification--status-favorable"
+>
+  <svg
+    aria-hidden="true"
+    class="icon banner-notification__icon"
+    fill="currentColor"
+    height="1.5rem"
+    style="--icon-size: 1.5rem;"
+    viewBox="0 0 24 24"
+    width="1.5rem"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 22C10.6167 22 9.31667 21.7373 8.1 21.212C6.88333 20.6873 5.825 19.975 4.925 19.075C4.025 18.175 3.31267 17.1167 2.788 15.9C2.26267 14.6833 2 13.3833 2 12C2 10.6167 2.26267 9.31667 2.788 8.1C3.31267 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.31233 8.1 2.787C9.31667 2.26233 10.6167 2 12 2C13.3833 2 14.6833 2.26233 15.9 2.787C17.1167 3.31233 18.175 4.025 19.075 4.925C19.975 5.825 20.6873 6.88333 21.212 8.1C21.7373 9.31667 22 10.6167 22 12C22 13.3833 21.7373 14.6833 21.212 15.9C20.6873 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6873 15.9 21.212C14.6833 21.7373 13.3833 22 12 22ZM10.6 16.6L17.65 9.55L16.25 8.15L10.6 13.8L7.75 10.95L6.35 12.35L10.6 16.6Z"
+    />
+  </svg>
+  <div
+    class="banner-notification__body banner-notification--has-vertical-cta"
+  >
+    <div
+      class="banner-notification__text"
+    >
+      <h3
+        class="heading heading--title-md"
+      >
+        Alert title which communicates info to the user
+      </h3>
+      <p
+        class="text text--body-sm banner-notification__sub-title"
+      >
+         Subtitle which provides additional detail
+      </p>
+    </div>
+    <div
+      class="banner-notification__call-to-action"
+    >
+      <button
+        class="button button--layout-none button--secondary button--sm button--variant-default"
+        type="button"
+      >
+        <span
+          class="button__text"
+        >
+          Call to Action
+        </span>
+      </button>
+    </div>
+  </div>
+</aside>
+`;
+
+exports[`<BannerNotification /> Warning story renders snapshot 1`] = `
+<aside
+  class="banner banner-notification--status-warning"
+>
+  <svg
+    aria-hidden="true"
+    class="icon banner-notification__icon"
+    fill="currentColor"
+    height="1.5rem"
+    style="--icon-size: 1.5rem;"
+    viewBox="0 0 24 24"
+    width="1.5rem"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1 21L12 2L23 21H1ZM11 15H13V10H11V15ZM12 18C12.2833 18 12.521 17.904 12.713 17.712C12.9043 17.5207 13 17.2833 13 17C13 16.7167 12.9043 16.4793 12.713 16.288C12.521 16.096 12.2833 16 12 16C11.7167 16 11.4793 16.096 11.288 16.288C11.096 16.4793 11 16.7167 11 17C11 17.2833 11.096 17.5207 11.288 17.712C11.4793 17.904 11.7167 18 12 18Z"
+    />
+  </svg>
+  <div
+    class="banner-notification__body banner-notification--has-vertical-cta"
+  >
+    <div
+      class="banner-notification__text"
+    >
+      <h3
+        class="heading heading--title-md"
+      >
+        Alert title which communicates info to the user
+      </h3>
+      <p
+        class="text text--body-sm banner-notification__sub-title"
+      >
+         Subtitle which provides additional detail
+      </p>
+    </div>
+    <div
+      class="banner-notification__call-to-action"
+    >
+      <button
+        class="button button--layout-none button--secondary button--sm button--variant-default"
+        type="button"
+      >
+        <span
+          class="button__text"
+        >
+          Call to Action
+        </span>
+      </button>
+    </div>
+  </div>
+</aside>
+`;
diff --git a/src/components/BannerNotification/index.ts b/src/components/BannerNotification/index.ts
new file mode 100644
index 000000000..434f43b80
--- /dev/null
+++ b/src/components/BannerNotification/index.ts
@@ -0,0 +1,2 @@
+export { BannerNotification as default } from './BannerNotification';
+export type { BannerNotificationProps } from './BannerNotification';
diff --git a/src/components/InlineNotification/InlineNotification-v2.tsx b/src/components/InlineNotification/InlineNotification-v2.tsx
index a307a9d3a..9c37caa78 100644
--- a/src/components/InlineNotification/InlineNotification-v2.tsx
+++ b/src/components/InlineNotification/InlineNotification-v2.tsx
@@ -22,17 +22,17 @@ type InlineNotificationProps = {
   className?: string;
   // Design API
   /**
-   * The text contents of the tag, nested inside the component, in addition to the icon.
-   */
-  title: string;
-  /**
-   * Text used for the main description of the notification
+   * Keyword to characterize the state of the notification
    */
   status?: Status;
   /**
    * Secondary text used to describe the notification in more detail
    */
   subTitle?: string;
+  /**
+   * The text contents of the tag, nested inside the component, in addition to the icon.
+   */
+  title: string;
 };
 
 /**
@@ -53,7 +53,7 @@ function getIconNameFromStatus(status: Status): IconName {
 /**
  * `import {InlineNotification} from "@chanzuckerberg/eds";`
  *
- * This component provides an inline banner accompanied with an icon for messaging users.
+ * An alert placed within a section of a page to provide a contextual notification. For example, an error which applies to multiple fields within a form.
  */
 export const InlineNotification = ({
   className,