diff --git a/change/@fluentui-react-alert-5a7a5604-b13b-4904-b56d-4367ce6d5a81.json b/change/@fluentui-react-alert-5a7a5604-b13b-4904-b56d-4367ce6d5a81.json
new file mode 100644
index 00000000000000..fb85cd4a401ca8
--- /dev/null
+++ b/change/@fluentui-react-alert-5a7a5604-b13b-4904-b56d-4367ce6d5a81.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: deprecate component and utilities",
+  "packageName": "@fluentui/react-alert",
+  "email": "lingfan.gao@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-components-c1038377-b836-46fb-9656-909af19aeea8.json b/change/@fluentui-react-components-c1038377-b836-46fb-9656-909af19aeea8.json
new file mode 100644
index 00000000000000..b5dec15f3b9597
--- /dev/null
+++ b/change/@fluentui-react-components-c1038377-b836-46fb-9656-909af19aeea8.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: Deprecating Alert components and utilities.",
+  "packageName": "@fluentui/react-components",
+  "email": "Humberto.Morimoto@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-alert/README.md b/packages/react-components/react-alert/README.md
index 0fcf6d8c34bfff..951ced5a153ecd 100644
--- a/packages/react-components/react-alert/README.md
+++ b/packages/react-components/react-alert/README.md
@@ -1,6 +1,8 @@
 # @fluentui/react-alert
 
-**React Alert component for [Fluent UI React](https://react.fluentui.dev)**
+## DEPRECATED
 
-> WIP 🚧 - These are not production-ready components as we are still in a Beta phase.
-> See the [spec.md](./Spec.md) for usage and component API details
+This component is deprecated please use the following components instead:
+
+- Toast - @fluentui/react-toast
+- MessageBar - @fluentui/react-message-bar
diff --git a/packages/react-components/react-alert/etc/react-alert.api.md b/packages/react-components/react-alert/etc/react-alert.api.md
index b55bb212c013c9..26760069c2b361 100644
--- a/packages/react-components/react-alert/etc/react-alert.api.md
+++ b/packages/react-components/react-alert/etc/react-alert.api.md
@@ -15,19 +15,19 @@ import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
-// @public
+// @public @deprecated (undocumented)
 export const Alert: ForwardRefComponent<AlertProps>;
 
 // @public (undocumented)
 export const alertClassNames: SlotClassNames<AlertSlots>;
 
-// @public
+// @public @deprecated
 export type AlertProps = ComponentProps<AlertSlots> & {
     intent?: 'info' | 'success' | 'error' | 'warning';
     appearance?: 'primary' | 'inverted';
 };
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export type AlertSlots = {
     root: NonNullable<Slot<'div'>>;
     icon?: Slot<'span'>;
@@ -35,16 +35,16 @@ export type AlertSlots = {
     avatar?: Slot<typeof Avatar>;
 };
 
-// @public
+// @public @deprecated
 export type AlertState = ComponentState<AlertSlots> & Pick<AlertProps, 'intent'> & Required<Pick<AlertProps, 'appearance'>>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const renderAlert_unstable: (state: AlertState) => JSX.Element;
 
-// @public
+// @public @deprecated (undocumented)
 export const useAlert_unstable: (props: AlertProps, ref: React_2.Ref<HTMLElement>) => AlertState;
 
-// @public
+// @public @deprecated (undocumented)
 export const useAlertStyles_unstable: (state: AlertState) => AlertState;
 
 // (No @packageDocumentation comment for this package)
diff --git a/packages/react-components/react-alert/src/components/Alert/Alert.test.tsx b/packages/react-components/react-alert/src/components/Alert/Alert.test.tsx
index fea73e3f02df33..eee33e54136241 100644
--- a/packages/react-components/react-alert/src/components/Alert/Alert.test.tsx
+++ b/packages/react-components/react-alert/src/components/Alert/Alert.test.tsx
@@ -8,6 +8,7 @@ import { alertClassNames } from './useAlertStyles.styles';
 
 describe('Alert', () => {
   isConformant({
+    // eslint-disable-next-line deprecation/deprecation
     Component: Alert,
     displayName: 'Alert',
     testOptions: {
@@ -31,22 +32,26 @@ describe('Alert', () => {
   // TODO - add tests for aria attributes or any a11y behaviors
 
   it('renders a default state', () => {
+    // eslint-disable-next-line deprecation/deprecation
     render(<Alert>Test</Alert>);
     expect(screen.getByText('Test')).toBeTruthy();
   });
 
   it('renders an icon', () => {
+    // eslint-disable-next-line deprecation/deprecation
     render(<Alert icon={<div data-testid="foo" />}>Test</Alert>);
     expect(screen.getByTestId('foo')).toBeTruthy();
   });
 
   it('renders an avatar', () => {
+    // eslint-disable-next-line deprecation/deprecation
     render(<Alert avatar={{ name: 'John Doe' }}>Test</Alert>);
     expect(screen.getByText('JD')).toBeTruthy();
   });
 
   it('renders a button', () => {
     render(
+      // eslint-disable-next-line deprecation/deprecation
       <Alert action={{ children: 'Undo' }} appearance="inverted">
         Test
       </Alert>,
@@ -56,6 +61,7 @@ describe('Alert', () => {
 
   it('prioritizes icon over intent prop', () => {
     render(
+      // eslint-disable-next-line deprecation/deprecation
       <Alert intent="success" icon={<div data-testid="foo" />}>
         Test
       </Alert>,
@@ -66,9 +72,11 @@ describe('Alert', () => {
   it('sets alert role based on intent', () => {
     render(
       <>
+        {/* eslint-disable-next-line deprecation/deprecation */}
         <Alert intent="error" data-testid="error">
           Test
         </Alert>
+        {/* eslint-disable-next-line deprecation/deprecation */}
         <Alert intent="error" data-testid="warning">
           Test
         </Alert>
@@ -79,6 +87,7 @@ describe('Alert', () => {
   });
 
   it('sets status role by default', () => {
+    // eslint-disable-next-line deprecation/deprecation
     render(<Alert data-testid="default">Test</Alert>);
     expect(screen.getByTestId('default').getAttribute('role')).toBe('status');
   });
diff --git a/packages/react-components/react-alert/src/components/Alert/Alert.tsx b/packages/react-components/react-alert/src/components/Alert/Alert.tsx
index cfa91747e5ba94..e3814ce324bf00 100644
--- a/packages/react-components/react-alert/src/components/Alert/Alert.tsx
+++ b/packages/react-components/react-alert/src/components/Alert/Alert.tsx
@@ -8,14 +8,21 @@ import type { AlertProps } from './Alert.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
+ * @deprecated please use the Toast or MessageBar component
  * An Alert component displays a brief, important message to attract a user's attention
  *  without interrupting their current task.
  */
+// eslint-disable-next-line deprecation/deprecation
 export const Alert: ForwardRefComponent<AlertProps> = React.forwardRef((props, ref) => {
+  // eslint-disable-next-line deprecation/deprecation
   const state = useAlert_unstable(props, ref);
 
+  // eslint-disable-next-line deprecation/deprecation
   useAlertStyles_unstable(state);
+  // eslint-disable-next-line deprecation/deprecation
   return renderAlert_unstable(state);
+  // eslint-disable-next-line deprecation/deprecation
 }) as ForwardRefComponent<AlertProps>;
 
+// eslint-disable-next-line deprecation/deprecation
 Alert.displayName = 'Alert';
diff --git a/packages/react-components/react-alert/src/components/Alert/Alert.types.ts b/packages/react-components/react-alert/src/components/Alert/Alert.types.ts
index 2c6bd8319c8a63..8980fc72193a5e 100644
--- a/packages/react-components/react-alert/src/components/Alert/Alert.types.ts
+++ b/packages/react-components/react-alert/src/components/Alert/Alert.types.ts
@@ -3,6 +3,9 @@ import { Button } from '@fluentui/react-button';
 
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 
+/**
+ * @deprecated please use the Toast or MessageBar component
+ */
 export type AlertSlots = {
   /**
    * The root slot is the top level container for the alert component
@@ -24,7 +27,9 @@ export type AlertSlots = {
 
 /**
  * Alert Props
+ * @deprecated please use the Toast or MessageBar component
  */
+// eslint-disable-next-line deprecation/deprecation
 export type AlertProps = ComponentProps<AlertSlots> & {
   /**
    * The intent prop, if present, determines the icon to be rendered in the icon slot. The icon prop
@@ -40,7 +45,11 @@ export type AlertProps = ComponentProps<AlertSlots> & {
 
 /**
  * State used in rendering Alert
+ * @deprecated please use the Toast or MessageBar component
  */
+// eslint-disable-next-line deprecation/deprecation
 export type AlertState = ComponentState<AlertSlots> &
+  // eslint-disable-next-line deprecation/deprecation
   Pick<AlertProps, 'intent'> &
+  // eslint-disable-next-line deprecation/deprecation
   Required<Pick<AlertProps, 'appearance'>>;
diff --git a/packages/react-components/react-alert/src/components/Alert/renderAlert.tsx b/packages/react-components/react-alert/src/components/Alert/renderAlert.tsx
index 0b9025ddbc4544..8cfdf8c321fe61 100644
--- a/packages/react-components/react-alert/src/components/Alert/renderAlert.tsx
+++ b/packages/react-components/react-alert/src/components/Alert/renderAlert.tsx
@@ -4,7 +4,12 @@ import { assertSlots } from '@fluentui/react-utilities';
 
 import type { AlertState, AlertSlots } from './Alert.types';
 
+/**
+ * @deprecated please use the Toast or MessageBar component
+ */
+// eslint-disable-next-line deprecation/deprecation
 export const renderAlert_unstable = (state: AlertState) => {
+  // eslint-disable-next-line deprecation/deprecation
   assertSlots<AlertSlots>(state);
 
   return (
diff --git a/packages/react-components/react-alert/src/components/Alert/useAlert.tsx b/packages/react-components/react-alert/src/components/Alert/useAlert.tsx
index 07fbd8b6d1f9f5..0ba5e3316394f4 100644
--- a/packages/react-components/react-alert/src/components/Alert/useAlert.tsx
+++ b/packages/react-components/react-alert/src/components/Alert/useAlert.tsx
@@ -8,6 +8,7 @@ import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import type { AlertProps, AlertState } from './Alert.types';
 
 /**
+ * @deprecated please use the Toast or MessageBar component
  * Create the state required to render Alert.
  *
  * The returned state can be modified with hooks such as useAlertStyles_unstable,
@@ -16,6 +17,7 @@ import type { AlertProps, AlertState } from './Alert.types';
  * @param props - props from this instance of Alert
  * @param ref - reference to root HTMLElement of Alert
  */
+// eslint-disable-next-line deprecation/deprecation
 export const useAlert_unstable = (props: AlertProps, ref: React.Ref<HTMLElement>): AlertState => {
   const { appearance = 'primary', intent } = props;
 
diff --git a/packages/react-components/react-alert/src/components/Alert/useAlertStyles.styles.ts b/packages/react-components/react-alert/src/components/Alert/useAlertStyles.styles.ts
index 20e3ae1904ade0..3120c3a110d801 100644
--- a/packages/react-components/react-alert/src/components/Alert/useAlertStyles.styles.ts
+++ b/packages/react-components/react-alert/src/components/Alert/useAlertStyles.styles.ts
@@ -4,6 +4,7 @@ import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import type { AlertSlots, AlertState } from './Alert.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
+// eslint-disable-next-line deprecation/deprecation
 export const alertClassNames: SlotClassNames<AlertSlots> = {
   root: 'fui-Alert',
   icon: 'fui-Alert__icon',
@@ -89,8 +90,10 @@ const useActionButtonColorInverted = makeStyles({
 });
 
 /**
+ * @deprecated please use the Toast or MessageBar component
  * Apply styling to the Alert slots based on the state
  */
+// eslint-disable-next-line deprecation/deprecation
 export const useAlertStyles_unstable = (state: AlertState): AlertState => {
   const inverted = state.appearance === 'inverted';
   const styles = useStyles();
diff --git a/packages/react-components/react-alert/src/index.ts b/packages/react-components/react-alert/src/index.ts
index e2129539082424..2a5e97b4077bde 100644
--- a/packages/react-components/react-alert/src/index.ts
+++ b/packages/react-components/react-alert/src/index.ts
@@ -1,2 +1,4 @@
+// eslint-disable-next-line deprecation/deprecation
 export { Alert, alertClassNames, renderAlert_unstable, useAlertStyles_unstable, useAlert_unstable } from './Alert';
+// eslint-disable-next-line deprecation/deprecation
 export type { AlertProps, AlertSlots, AlertState } from './Alert';
diff --git a/packages/react-components/react-alert/stories/Alert/AlertAction.stories.tsx b/packages/react-components/react-alert/stories/Alert/AlertAction.stories.tsx
index b220aaa5a79e90..92fa3b21362514 100644
--- a/packages/react-components/react-alert/stories/Alert/AlertAction.stories.tsx
+++ b/packages/react-components/react-alert/stories/Alert/AlertAction.stories.tsx
@@ -5,9 +5,11 @@ import { Alert } from '@fluentui/react-alert';
 
 export const Action = () => (
   <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+    {/* eslint-disable-next-line deprecation/deprecation */}
     <Alert intent="success" action="Undo">
       Message sent
     </Alert>
+    {/* eslint-disable-next-line deprecation/deprecation */}
     <Alert
       intent="error"
       action={{
diff --git a/packages/react-components/react-alert/stories/Alert/AlertAppearance.stories.tsx b/packages/react-components/react-alert/stories/Alert/AlertAppearance.stories.tsx
index 8b9738fa194199..3326d94ad87419 100644
--- a/packages/react-components/react-alert/stories/Alert/AlertAppearance.stories.tsx
+++ b/packages/react-components/react-alert/stories/Alert/AlertAppearance.stories.tsx
@@ -6,15 +6,19 @@ const renderAlerts = (appearance: 'primary' | 'inverted') => (
   <div style={{ flexGrow: 1 }}>
     <p>{appearance}</p>
     <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+      {/* eslint-disable-next-line deprecation/deprecation */}
       <Alert appearance={appearance} intent="success" action="Undo">
         Success text
       </Alert>
+      {/* eslint-disable-next-line deprecation/deprecation */}
       <Alert appearance={appearance} intent="error" action="Retry">
         Error text
       </Alert>
+      {/* eslint-disable-next-line deprecation/deprecation */}
       <Alert appearance={appearance} intent="warning" action="Review">
         Warning text
       </Alert>
+      {/* eslint-disable-next-line deprecation/deprecation */}
       <Alert appearance={appearance} intent="info" action="Dismiss">
         Info text
       </Alert>
diff --git a/packages/react-components/react-alert/stories/Alert/AlertAvatar.stories.tsx b/packages/react-components/react-alert/stories/Alert/AlertAvatar.stories.tsx
index 7dc6449b48288c..1444a2f430ab12 100644
--- a/packages/react-components/react-alert/stories/Alert/AlertAvatar.stories.tsx
+++ b/packages/react-components/react-alert/stories/Alert/AlertAvatar.stories.tsx
@@ -5,9 +5,11 @@ import { Alert } from '@fluentui/react-alert';
 
 export const Avatar = () => (
   <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+    {/* eslint-disable-next-line deprecation/deprecation */}
     <Alert action="Undo" avatar={{ name: 'Jane Doe', size: 24, color: 'dark-red' }}>
       sent you a message
     </Alert>
+    {/* eslint-disable-next-line deprecation/deprecation */}
     <Alert
       action={{
         icon: <DismissCircleRegular />,
diff --git a/packages/react-components/react-alert/stories/Alert/AlertDefault.stories.tsx b/packages/react-components/react-alert/stories/Alert/AlertDefault.stories.tsx
index bdbdfe897c1311..ee9fdd45d4ae40 100644
--- a/packages/react-components/react-alert/stories/Alert/AlertDefault.stories.tsx
+++ b/packages/react-components/react-alert/stories/Alert/AlertDefault.stories.tsx
@@ -2,4 +2,5 @@ import * as React from 'react';
 
 import { Alert } from '@fluentui/react-alert';
 
+// eslint-disable-next-line deprecation/deprecation
 export const Default = () => <Alert>This is a default alert</Alert>;
diff --git a/packages/react-components/react-alert/stories/Alert/AlertIcon.stories.tsx b/packages/react-components/react-alert/stories/Alert/AlertIcon.stories.tsx
index 93360e40237011..4d8a237a775440 100644
--- a/packages/react-components/react-alert/stories/Alert/AlertIcon.stories.tsx
+++ b/packages/react-components/react-alert/stories/Alert/AlertIcon.stories.tsx
@@ -4,6 +4,7 @@ import { DeleteRegular } from '@fluentui/react-icons';
 import { Alert } from '@fluentui/react-alert';
 
 export const Icon = () => (
+  // eslint-disable-next-line deprecation/deprecation
   <Alert icon={<DeleteRegular />} action="Undo">
     Chat deleted
   </Alert>
diff --git a/packages/react-components/react-alert/stories/Alert/AlertIntent.stories.tsx b/packages/react-components/react-alert/stories/Alert/AlertIntent.stories.tsx
index e0de45db2ee7a5..47d3860dd1bbd9 100644
--- a/packages/react-components/react-alert/stories/Alert/AlertIntent.stories.tsx
+++ b/packages/react-components/react-alert/stories/Alert/AlertIntent.stories.tsx
@@ -3,15 +3,19 @@ import { Alert } from '@fluentui/react-alert';
 
 export const Intent = () => (
   <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+    {/* eslint-disable-next-line deprecation/deprecation */}
     <Alert intent="success" action="Undo">
       Success text
     </Alert>
+    {/* eslint-disable-next-line deprecation/deprecation */}
     <Alert intent="error" action="Retry">
       Error text
     </Alert>
+    {/* eslint-disable-next-line deprecation/deprecation */}
     <Alert intent="warning" action="Review">
       Warning text
     </Alert>
+    {/* eslint-disable-next-line deprecation/deprecation */}
     <Alert intent="info" action="Dismiss">
       Info text
     </Alert>
diff --git a/packages/react-components/react-alert/stories/Alert/index.stories.tsx b/packages/react-components/react-alert/stories/Alert/index.stories.tsx
deleted file mode 100644
index 0cf68f377f2d83..00000000000000
--- a/packages/react-components/react-alert/stories/Alert/index.stories.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Alert } from '@fluentui/react-alert';
-import descriptionMd from './AlertDescription.md';
-
-export { Default } from './AlertDefault.stories';
-export { Intent } from './AlertIntent.stories';
-export { Icon } from './AlertIcon.stories';
-export { Avatar } from './AlertAvatar.stories';
-export { Action } from './AlertAction.stories';
-export { Appearance } from './AlertAppearance.stories';
-
-export default {
-  title: 'Preview Components/Alert',
-  component: Alert,
-  parameters: {
-    docs: {
-      description: {
-        component: [descriptionMd].join('\n'),
-      },
-    },
-  },
-};
diff --git a/packages/react-components/react-components/src/unstable/index.ts b/packages/react-components/react-components/src/unstable/index.ts
index 9f683bf65473ea..feb97a48fd0563 100644
--- a/packages/react-components/react-components/src/unstable/index.ts
+++ b/packages/react-components/react-components/src/unstable/index.ts
@@ -1,5 +1,6 @@
 // Stub for unstable exports
 
+/* eslint-disable deprecation/deprecation */
 export {
   Alert,
   alertClassNames,
@@ -9,7 +10,6 @@ export {
 } from '@fluentui/react-alert';
 export type { AlertProps, AlertSlots, AlertState } from '@fluentui/react-alert';
 
-/* eslint-disable deprecation/deprecation */
 export {
   InfoButton,
   infoButtonClassNames,