diff --git a/packages/web-react/scripts/entryPoints.js b/packages/web-react/scripts/entryPoints.js
index 5b6fd38449..a00b37a578 100644
--- a/packages/web-react/scripts/entryPoints.js
+++ b/packages/web-react/scripts/entryPoints.js
@@ -45,6 +45,7 @@ const entryPoints = [
   { dirs: ['components', 'TextFieldBase'] },
   { dirs: ['components', 'Toast'] },
   { dirs: ['components', 'Tooltip'] },
+  { dirs: ['components', 'UNSTABLE_ActionLayout'] },
   { dirs: ['components', 'UNSTABLE_Avatar'] },
   { dirs: ['components', 'UNSTABLE_Divider'] },
   { dirs: ['components', 'UNSTABLE_Slider'] },
diff --git a/packages/web-react/src/components/UNSTABLE_ActionLayout/README.md b/packages/web-react/src/components/UNSTABLE_ActionLayout/README.md
new file mode 100644
index 0000000000..2ce89438cd
--- /dev/null
+++ b/packages/web-react/src/components/UNSTABLE_ActionLayout/README.md
@@ -0,0 +1,4 @@
+# UNSTABLE ActionLayout
+
+⚠️ This component is UNSTABLE. It may significantly change at any point in the future.
+Please use it with caution.
diff --git a/packages/web-react/src/components/UNSTABLE_ActionLayout/UNSTABLE_ActionLayout.tsx b/packages/web-react/src/components/UNSTABLE_ActionLayout/UNSTABLE_ActionLayout.tsx
new file mode 100644
index 0000000000..6b0c1e1765
--- /dev/null
+++ b/packages/web-react/src/components/UNSTABLE_ActionLayout/UNSTABLE_ActionLayout.tsx
@@ -0,0 +1,19 @@
+import classNames from 'classnames';
+import React, { ReactElement } from 'react';
+import { useStyleProps } from '../../hooks';
+import { SpiritActionLayoutProps } from '../../types/actionLayout';
+import { useActionLayoutStyleProps } from './useActionLayoutStyleProps';
+
+export const UNSTABLE_ActionLayout = (props: SpiritActionLayoutProps): ReactElement => {
+  const { children, ...restProps } = props;
+  const { classProps, props: modifiedProps } = useActionLayoutStyleProps(restProps);
+  const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
+
+  return (
+    <div {...otherProps} className={classNames(classProps.root, styleProps.className)} style={styleProps.style}>
+      {children}
+    </div>
+  );
+};
+
+export default UNSTABLE_ActionLayout;
diff --git a/packages/web-react/src/components/UNSTABLE_ActionLayout/__tests__/UNSTABLE_ActionLayout.test.tsx b/packages/web-react/src/components/UNSTABLE_ActionLayout/__tests__/UNSTABLE_ActionLayout.test.tsx
new file mode 100644
index 0000000000..e55477ae2d
--- /dev/null
+++ b/packages/web-react/src/components/UNSTABLE_ActionLayout/__tests__/UNSTABLE_ActionLayout.test.tsx
@@ -0,0 +1,27 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
+import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
+import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
+import UNSTABLE_ActionLayout from '../UNSTABLE_ActionLayout';
+
+describe('UNSTABLE_ActionLayout', () => {
+  classNamePrefixProviderTest(UNSTABLE_ActionLayout, 'UNSTABLE_ActionLayout');
+
+  stylePropsTest(UNSTABLE_ActionLayout);
+
+  restPropsTest(UNSTABLE_ActionLayout, 'div');
+
+  beforeEach(() => {
+    render(<UNSTABLE_ActionLayout>Content</UNSTABLE_ActionLayout>);
+  });
+
+  it('should render content', () => {
+    expect(screen.getByText('Content')).toBeInTheDocument();
+  });
+
+  it('should render children', () => {
+    expect(screen.getByText('Content')).toHaveClass('UNSTABLE_ActionLayout');
+  });
+});
diff --git a/packages/web-react/src/components/UNSTABLE_ActionLayout/__tests__/useActionLayoutStyleProps.test.ts b/packages/web-react/src/components/UNSTABLE_ActionLayout/__tests__/useActionLayoutStyleProps.test.ts
new file mode 100644
index 0000000000..bd5a7701be
--- /dev/null
+++ b/packages/web-react/src/components/UNSTABLE_ActionLayout/__tests__/useActionLayoutStyleProps.test.ts
@@ -0,0 +1,11 @@
+import { renderHook } from '@testing-library/react';
+import { useActionLayoutStyleProps } from '../useActionLayoutStyleProps';
+
+describe('useActionLayoutStyleProps', () => {
+  it('should return defaults', () => {
+    const props = {};
+    const { result } = renderHook(() => useActionLayoutStyleProps(props));
+
+    expect(result.current.classProps.root).toBe('UNSTABLE_ActionLayout');
+  });
+});
diff --git a/packages/web-react/src/components/UNSTABLE_ActionLayout/demo/ActionLayoutDefault.tsx b/packages/web-react/src/components/UNSTABLE_ActionLayout/demo/ActionLayoutDefault.tsx
new file mode 100644
index 0000000000..bf8884d638
--- /dev/null
+++ b/packages/web-react/src/components/UNSTABLE_ActionLayout/demo/ActionLayoutDefault.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { ButtonLink } from '../../Button';
+import { UNSTABLE_ActionLayout } from '../index';
+
+const ActionLayoutDefault = () => (
+  <UNSTABLE_ActionLayout>
+    <ButtonLink color="primary" href="#">
+      Primary Action
+    </ButtonLink>
+    <ButtonLink color="secondary" href="#">
+      Secondary Action
+    </ButtonLink>
+  </UNSTABLE_ActionLayout>
+);
+
+export default ActionLayoutDefault;
diff --git a/packages/web-react/src/components/UNSTABLE_ActionLayout/demo/index.tsx b/packages/web-react/src/components/UNSTABLE_ActionLayout/demo/index.tsx
new file mode 100644
index 0000000000..0f71f08083
--- /dev/null
+++ b/packages/web-react/src/components/UNSTABLE_ActionLayout/demo/index.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import DocsSection from '../../../../docs/DocsSections';
+import ActionLayoutDefault from './ActionLayoutDefault';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <DocsSection title="Default" stackAlignment="stretch">
+      <ActionLayoutDefault />
+    </DocsSection>
+  </React.StrictMode>,
+);
diff --git a/packages/web-react/src/components/UNSTABLE_ActionLayout/index.html b/packages/web-react/src/components/UNSTABLE_ActionLayout/index.html
new file mode 100644
index 0000000000..23972ef557
--- /dev/null
+++ b/packages/web-react/src/components/UNSTABLE_ActionLayout/index.html
@@ -0,0 +1 @@
+{{> web-react/demo}}
diff --git a/packages/web-react/src/components/UNSTABLE_ActionLayout/index.ts b/packages/web-react/src/components/UNSTABLE_ActionLayout/index.ts
new file mode 100644
index 0000000000..db68ba9893
--- /dev/null
+++ b/packages/web-react/src/components/UNSTABLE_ActionLayout/index.ts
@@ -0,0 +1,3 @@
+export { default as UNSTABLE_ActionLayout } from './UNSTABLE_ActionLayout';
+export * from './UNSTABLE_ActionLayout';
+export * from './useActionLayoutStyleProps';
diff --git a/packages/web-react/src/components/UNSTABLE_ActionLayout/stories/UNSTABLE_ActionLayout.stories.tsx b/packages/web-react/src/components/UNSTABLE_ActionLayout/stories/UNSTABLE_ActionLayout.stories.tsx
new file mode 100644
index 0000000000..54d5e781cf
--- /dev/null
+++ b/packages/web-react/src/components/UNSTABLE_ActionLayout/stories/UNSTABLE_ActionLayout.stories.tsx
@@ -0,0 +1,36 @@
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { ButtonLink } from '../../Button';
+import ReadMe from '../README.md';
+import { UNSTABLE_ActionLayout } from '..';
+
+const meta: Meta<typeof UNSTABLE_ActionLayout> = {
+  title: 'Experimental/UNSTABLE_ActionLayout',
+  component: UNSTABLE_ActionLayout,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {},
+  args: {
+    children: (
+      <>
+        <ButtonLink color="primary" href="/">
+          Primary Action
+        </ButtonLink>
+        <ButtonLink color="secondary" href="/">
+          Secondary Action
+        </ButtonLink>
+      </>
+    ),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof UNSTABLE_ActionLayout>;
+
+export const Playground: Story = {
+  name: 'UNSTABLE_ActionLayout',
+};
diff --git a/packages/web-react/src/components/UNSTABLE_ActionLayout/useActionLayoutStyleProps.ts b/packages/web-react/src/components/UNSTABLE_ActionLayout/useActionLayoutStyleProps.ts
new file mode 100644
index 0000000000..d7dd415cdf
--- /dev/null
+++ b/packages/web-react/src/components/UNSTABLE_ActionLayout/useActionLayoutStyleProps.ts
@@ -0,0 +1,20 @@
+import { useClassNamePrefix } from '../../hooks';
+import { SpiritActionLayoutProps } from '../../types/actionLayout';
+
+export interface ActionLayoutStyles<T> {
+  classProps: {
+    root: string;
+  };
+  props: T;
+}
+
+export function useActionLayoutStyleProps(props: SpiritActionLayoutProps): ActionLayoutStyles<SpiritActionLayoutProps> {
+  const actionLayoutClass = useClassNamePrefix('UNSTABLE_ActionLayout');
+
+  return {
+    classProps: {
+      root: actionLayoutClass,
+    },
+    props,
+  };
+}
diff --git a/packages/web-react/src/types/actionLayout.ts b/packages/web-react/src/types/actionLayout.ts
new file mode 100644
index 0000000000..89a7f0dcc3
--- /dev/null
+++ b/packages/web-react/src/types/actionLayout.ts
@@ -0,0 +1,3 @@
+import { ChildrenProps, StyleProps } from './shared';
+
+export interface SpiritActionLayoutProps extends ChildrenProps, StyleProps {}