diff --git a/packages/react-components/react-drawer/etc/react-drawer.api.md b/packages/react-components/react-drawer/etc/react-drawer.api.md
index e14ba68115c786..28dcbac986b6f1 100644
--- a/packages/react-components/react-drawer/etc/react-drawer.api.md
+++ b/packages/react-components/react-drawer/etc/react-drawer.api.md
@@ -44,6 +44,23 @@ export const drawerCSSVars: {
     borderRadius: string;
 };
 
+// @public
+export const DrawerFooter: ForwardRefComponent<DrawerFooterProps>;
+
+// @public (undocumented)
+export const drawerFooterClassNames: SlotClassNames<DrawerFooterSlots>;
+
+// @public
+export type DrawerFooterProps = ComponentProps<DrawerFooterSlots>;
+
+// @public (undocumented)
+export type DrawerFooterSlots = {
+    root: Slot<'footer'>;
+};
+
+// @public
+export type DrawerFooterState = ComponentState<DrawerFooterSlots>;
+
 // @public
 export type DrawerProps = ComponentProps<Partial<DrawerSlots>> & {
     position?: 'left' | 'right';
@@ -71,6 +88,9 @@ export const renderDrawer_unstable: (state: DrawerState) => JSX.Element | null;
 // @public
 export const renderDrawerBody_unstable: (state: DrawerBodyState) => JSX.Element;
 
+// @public
+export const renderDrawerFooter_unstable: (state: DrawerFooterState) => JSX.Element;
+
 // @public
 export const useDrawer_unstable: (props: DrawerProps, ref: React_2.Ref<HTMLElement>) => DrawerState;
 
@@ -80,6 +100,12 @@ export const useDrawerBody_unstable: (props: DrawerBodyProps, ref: React_2.Ref<H
 // @public
 export const useDrawerBodyStyles_unstable: (state: DrawerBodyState) => DrawerBodyState;
 
+// @public
+export const useDrawerFooter_unstable: (props: DrawerFooterProps, ref: React_2.Ref<HTMLElement>) => DrawerFooterState;
+
+// @public
+export const useDrawerFooterStyles_unstable: (state: DrawerFooterState) => DrawerFooterState;
+
 // @public
 export const useDrawerStyles_unstable: (state: DrawerState) => DrawerState;
 
diff --git a/packages/react-components/react-drawer/src/DrawerFooter.ts b/packages/react-components/react-drawer/src/DrawerFooter.ts
new file mode 100644
index 00000000000000..6ca07a8a8c50ec
--- /dev/null
+++ b/packages/react-components/react-drawer/src/DrawerFooter.ts
@@ -0,0 +1 @@
+export * from './components/DrawerFooter/index';
diff --git a/packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.test.tsx b/packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.test.tsx
new file mode 100644
index 00000000000000..daedf947dd3c40
--- /dev/null
+++ b/packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.test.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { DrawerFooter } from './DrawerFooter';
+import { isConformant } from '../../testing/isConformant';
+
+describe('DrawerFooter', () => {
+  isConformant({
+    Component: DrawerFooter,
+    displayName: 'DrawerFooter',
+  });
+
+  it('renders a default state', () => {
+    const result = render(<DrawerFooter>Default DrawerFooter</DrawerFooter>);
+    expect(result.container).toMatchInlineSnapshot(`
+      <div>
+        <footer
+          class="fui-DrawerFooter"
+        >
+          Default DrawerFooter
+        </footer>
+      </div>
+    `);
+  });
+});
diff --git a/packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.tsx b/packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.tsx
new file mode 100644
index 00000000000000..daeef2bb7058f5
--- /dev/null
+++ b/packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { useDrawerFooter_unstable } from './useDrawerFooter';
+import { renderDrawerFooter_unstable } from './renderDrawerFooter';
+import { useDrawerFooterStyles_unstable } from './useDrawerFooterStyles';
+import type { DrawerFooterProps } from './DrawerFooter.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+
+/**
+ * DrawerFooter component - TODO: add more docs
+ */
+export const DrawerFooter: ForwardRefComponent<DrawerFooterProps> = React.forwardRef((props, ref) => {
+  const state = useDrawerFooter_unstable(props, ref);
+
+  useDrawerFooterStyles_unstable(state);
+  return renderDrawerFooter_unstable(state);
+});
+
+DrawerFooter.displayName = 'DrawerFooter';
diff --git a/packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.types.ts b/packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.types.ts
new file mode 100644
index 00000000000000..2484933259ba78
--- /dev/null
+++ b/packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.types.ts
@@ -0,0 +1,15 @@
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+
+export type DrawerFooterSlots = {
+  root: Slot<'footer'>;
+};
+
+/**
+ * DrawerFooter Props
+ */
+export type DrawerFooterProps = ComponentProps<DrawerFooterSlots>;
+
+/**
+ * State used in rendering DrawerFooter
+ */
+export type DrawerFooterState = ComponentState<DrawerFooterSlots>;
diff --git a/packages/react-components/react-drawer/src/components/DrawerFooter/index.ts b/packages/react-components/react-drawer/src/components/DrawerFooter/index.ts
new file mode 100644
index 00000000000000..758980a51facdc
--- /dev/null
+++ b/packages/react-components/react-drawer/src/components/DrawerFooter/index.ts
@@ -0,0 +1,5 @@
+export * from './DrawerFooter';
+export * from './DrawerFooter.types';
+export * from './renderDrawerFooter';
+export * from './useDrawerFooter';
+export * from './useDrawerFooterStyles';
diff --git a/packages/react-components/react-drawer/src/components/DrawerFooter/renderDrawerFooter.tsx b/packages/react-components/react-drawer/src/components/DrawerFooter/renderDrawerFooter.tsx
new file mode 100644
index 00000000000000..a9e3c41e44d4a7
--- /dev/null
+++ b/packages/react-components/react-drawer/src/components/DrawerFooter/renderDrawerFooter.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+import type { DrawerFooterState, DrawerFooterSlots } from './DrawerFooter.types';
+
+/**
+ * Render the final JSX of DrawerFooter
+ */
+export const renderDrawerFooter_unstable = (state: DrawerFooterState) => {
+  const { slots, slotProps } = getSlots<DrawerFooterSlots>(state);
+
+  return <slots.root {...slotProps.root} />;
+};
diff --git a/packages/react-components/react-drawer/src/components/DrawerFooter/useDrawerFooter.ts b/packages/react-components/react-drawer/src/components/DrawerFooter/useDrawerFooter.ts
new file mode 100644
index 00000000000000..a2181d5c138932
--- /dev/null
+++ b/packages/react-components/react-drawer/src/components/DrawerFooter/useDrawerFooter.ts
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { getNativeElementProps } from '@fluentui/react-utilities';
+import type { DrawerFooterProps, DrawerFooterState } from './DrawerFooter.types';
+
+/**
+ * Create the state required to render DrawerFooter.
+ *
+ * The returned state can be modified with hooks such as useDrawerFooterStyles_unstable,
+ * before being passed to renderDrawerFooter_unstable.
+ *
+ * @param props - props from this instance of DrawerFooter
+ * @param ref - reference to root HTMLElement of DrawerFooter
+ */
+export const useDrawerFooter_unstable = (props: DrawerFooterProps, ref: React.Ref<HTMLElement>): DrawerFooterState => {
+  return {
+    components: {
+      root: 'footer',
+    },
+
+    root: getNativeElementProps('footer', {
+      ref,
+      ...props,
+    }),
+  };
+};
diff --git a/packages/react-components/react-drawer/src/components/DrawerFooter/useDrawerFooterStyles.ts b/packages/react-components/react-drawer/src/components/DrawerFooter/useDrawerFooterStyles.ts
new file mode 100644
index 00000000000000..7e971c07a3a84e
--- /dev/null
+++ b/packages/react-components/react-drawer/src/components/DrawerFooter/useDrawerFooterStyles.ts
@@ -0,0 +1,33 @@
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import type { DrawerFooterSlots, DrawerFooterState } from './DrawerFooter.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+import { tokens } from '@fluentui/react-theme';
+
+export const drawerFooterClassNames: SlotClassNames<DrawerFooterSlots> = {
+  root: 'fui-DrawerFooter',
+};
+
+/**
+ * Styles for the root slot
+ */
+const useStyles = makeStyles({
+  root: {
+    ...shorthands.padding(tokens.spacingVerticalL, tokens.spacingHorizontalXXL, tokens.spacingVerticalXXL),
+
+    display: 'flex',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    columnGap: tokens.spacingHorizontalS,
+  },
+});
+
+/**
+ * Apply styling to the DrawerFooter slots based on the state
+ */
+export const useDrawerFooterStyles_unstable = (state: DrawerFooterState): DrawerFooterState => {
+  const styles = useStyles();
+
+  state.root.className = mergeClasses(drawerFooterClassNames.root, styles.root, state.root.className);
+
+  return state;
+};
diff --git a/packages/react-components/react-drawer/src/index.ts b/packages/react-components/react-drawer/src/index.ts
index 9a1bec39b7594f..f92da13e278f38 100644
--- a/packages/react-components/react-drawer/src/index.ts
+++ b/packages/react-components/react-drawer/src/index.ts
@@ -16,3 +16,12 @@ export {
   useDrawerBody_unstable,
 } from './DrawerBody';
 export type { DrawerBodyProps, DrawerBodySlots, DrawerBodyState } from './DrawerBody';
+
+export {
+  DrawerFooter,
+  drawerFooterClassNames,
+  renderDrawerFooter_unstable,
+  useDrawerFooterStyles_unstable,
+  useDrawerFooter_unstable,
+} from './DrawerFooter';
+export type { DrawerFooterProps, DrawerFooterSlots, DrawerFooterState } from './DrawerFooter';
diff --git a/packages/react-components/react-drawer/stories/DrawerBody/DrawerBodyDefault.stories.tsx b/packages/react-components/react-drawer/stories/DrawerBody/DrawerBodyDefault.stories.tsx
index 0cceeb797f80f6..4a0862a16c28c4 100644
--- a/packages/react-components/react-drawer/stories/DrawerBody/DrawerBodyDefault.stories.tsx
+++ b/packages/react-components/react-drawer/stories/DrawerBody/DrawerBodyDefault.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Drawer, DrawerBody, DrawerBodyProps } from '@fluentui/react-drawer';
-import { makeStyles, shorthands, tokens } from '@fluentui/react-components';
+import { Drawer, DrawerBody, DrawerBodyProps, DrawerFooter } from '@fluentui/react-drawer';
+import { Button, makeStyles, shorthands, tokens } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   root: {
@@ -21,7 +21,7 @@ const useStyles = makeStyles({
   },
 });
 
-const Header = (props: Partial<DrawerBodyProps>) => {
+const Header = () => {
   const styles = useStyles();
 
   return (
@@ -31,19 +31,18 @@ const Header = (props: Partial<DrawerBodyProps>) => {
   );
 };
 
-const Footer = (props: Partial<DrawerBodyProps>) => {
-  const styles = useStyles();
-
+const Footer = () => {
   return (
-    <footer className={styles.container}>
-      <button>Button</button>
-    </footer>
+    <DrawerFooter>
+      <Button appearance="primary">Primary</Button>
+      <Button>Secondary</Button>
+    </DrawerFooter>
   );
 };
 
-const Body = (props: Partial<DrawerBodyProps>) => {
+const Body = () => {
   return (
-    <DrawerBody {...props}>
+    <DrawerBody>
       Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus nam aut amet similique, iure vel voluptates
       cum cumque repellendus perferendis maiores officia unde in? Autem neque sequi maiores eum omnis. Lorem ipsum,
       dolor sit amet consectetur adipisicing elit. Perspiciatis ipsam explicabo tempora ipsum saepe nam. Eum aliquid