diff --git a/ui/components/ui/callout/callout.js b/ui/components/ui/callout/callout.js
index 6c28dc117..c2a8f671d 100644
--- a/ui/components/ui/callout/callout.js
+++ b/ui/components/ui/callout/callout.js
@@ -2,10 +2,18 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import InfoIconInverted from '../icon/info-icon-inverted.component';
-import { SEVERITIES, Color } from '../../../helpers/constants/design-system';
+import { Severity, TextColor } from '../../../helpers/constants/design-system';
 import { MILLISECOND } from '../../../../shared/constants/time';
-import Typography from '../typography';
-import { ButtonIcon, IconName, IconSize } from '../../component-library';
+import { ButtonIcon, IconName, IconSize, Text } from '../../component-library';
+
+/**
+ * @deprecated `<Callout />` has been deprecated in favor of the `<BannerAlert />`
+ * component in ./ui/components/component-library/banner-alert/banner-alert.js.
+ * See storybook documentation for BannerAlert here:
+ * {@see {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-banneralert--default-story#banneralert}}
+ *
+ * Help to replace `Callout` with `BannerAlert` by submitting a PR
+ */
 
 export default function Callout({
   severity,
@@ -38,9 +46,9 @@ export default function Callout({
   return (
     <div className={calloutClassName}>
       <InfoIconInverted severity={severity} />
-      <Typography color={Color.textDefault} className="callout__content">
+      <Text color={TextColor.textDefault} className="callout__content">
         {children}
-      </Typography>
+      </Text>
       {dismiss && (
         <ButtonIcon
           iconName={IconName.Close}
@@ -61,7 +69,7 @@ export default function Callout({
 }
 
 Callout.propTypes = {
-  severity: PropTypes.oneOf(Object.values(SEVERITIES)).isRequired,
+  severity: PropTypes.oneOf(Object.values(Severity)).isRequired,
   children: PropTypes.node.isRequired,
   dismiss: PropTypes.func,
   isFirst: PropTypes.bool,
diff --git a/ui/pages/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap b/ui/pages/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap
index db8197210..f91a8f82b 100644
--- a/ui/pages/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap
+++ b/ui/pages/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap
@@ -407,7 +407,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 2`] = `
           />
         </svg>
         <p
-          class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography callout__content typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+          class="box mm-text callout__content mm-text--body-md box--flex-direction-row box--color-text-default"
         >
           <span>
             This custom network is not recognized
@@ -438,7 +438,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 2`] = `
           />
         </svg>
         <p
-          class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography callout__content typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+          class="box mm-text callout__content mm-text--body-md box--flex-direction-row box--color-text-default"
         >
           <span>
             <span>
diff --git a/ui/pages/confirmation/templates/__snapshots__/switch-ethereum-chain.test.js.snap b/ui/pages/confirmation/templates/__snapshots__/switch-ethereum-chain.test.js.snap
index ff707e2f2..1043c0a12 100644
--- a/ui/pages/confirmation/templates/__snapshots__/switch-ethereum-chain.test.js.snap
+++ b/ui/pages/confirmation/templates/__snapshots__/switch-ethereum-chain.test.js.snap
@@ -241,7 +241,7 @@ exports[`switch-ethereum-chain confirmation should show alert if there are pendi
           />
         </svg>
         <p
-          class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography callout__content typography--p typography--weight-normal typography--style-normal typography--color-text-default"
+          class="box mm-text callout__content mm-text--body-md box--flex-direction-row box--color-text-default"
         >
           <span>
             Switching networks will cancel all pending confirmations