diff --git a/ui/components/ui/error-message/README.mdx b/ui/components/ui/error-message/README.mdx
deleted file mode 100644
index 777ee8927..000000000
--- a/ui/components/ui/error-message/README.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-
-import ErrorMessage from '.';
-
-# Error Message
-
-This component highlights error messages
-
-
-
-## Props
-
-
diff --git a/ui/components/ui/error-message/error-message.component.js b/ui/components/ui/error-message/error-message.component.js
index 53f50f90f..64ff8fc80 100644
--- a/ui/components/ui/error-message/error-message.component.js
+++ b/ui/components/ui/error-message/error-message.component.js
@@ -4,13 +4,14 @@ import { Icon, IconName, IconSize } from '../../component-library';
import { IconColor } from '../../../helpers/constants/design-system';
/**
- * @deprecated - Please use ActionableMessage type danger
- * @see ActionableMessage
- * @param {object} props
- * @param {string} props.errorMessage
- * @param {string} props.errorKey
- * @param {object} context
+ * @deprecated The `` component has been deprecated in favor of the new `` component from the component-library.
+ * Please update your code to use the new `` component instead, which can be found at ui/components/component-library/banner-alert/banner-alert.js.
+ * You can find documentation for the new BannerAlert component in the MetaMask Storybook:
+ * {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-banneralert--docs}
+ * If you would like to help with the replacement of the old ErrorMessage component, please submit a pull request against this GitHub issue:
+ * {@link https://github.com/MetaMask/metamask-extension/issues/20394}
*/
+
const ErrorMessage = (props, context) => {
const { errorMessage, errorKey } = props;
const error = errorKey ? context.t(errorKey) : errorMessage;
diff --git a/ui/components/ui/error-message/error-message.stories.js b/ui/components/ui/error-message/error-message.stories.js
index e800104ad..6f9add283 100644
--- a/ui/components/ui/error-message/error-message.stories.js
+++ b/ui/components/ui/error-message/error-message.stories.js
@@ -1,16 +1,9 @@
import React from 'react';
-import README from './README.mdx';
import ErrorMessage from '.';
export default {
- title: 'Components/UI/ErrorMessage',
-
+ title: 'Components/UI/ErrorMessage(deprecated)',
component: ErrorMessage,
- parameters: {
- docs: {
- page: README,
- },
- },
argTypes: {
errorMessage: { control: 'text' },
errorKey: { control: 'text' },