diff --git a/packages/pxweb2-ui/src/lib/components/ActionItem/ActionItem.module.scss b/packages/pxweb2-ui/src/lib/components/ActionItem/ActionItem.module.scss
index 0a10e72e0..e6a4870b4 100644
--- a/packages/pxweb2-ui/src/lib/components/ActionItem/ActionItem.module.scss
+++ b/packages/pxweb2-ui/src/lib/components/ActionItem/ActionItem.module.scss
@@ -24,6 +24,11 @@
     box-shadow: inset 0 0 0 3px var(--px-color-border-focus-boxshadow);
     border-radius: var(--px-border-radius-medium);
   }
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.4;
+    background: var(--px-color-background-default);
+  }
 }
 
 .iconWrapper {
@@ -74,3 +79,12 @@
     cursor: pointer;
   }
 }
+
+.actionItem:disabled .labelHover {
+  cursor: not-allowed;
+}
+
+.actionItem:disabled .iconWrapper-large {
+  opacity: 0.4;
+  background: var(--px-color-background-default);
+}
diff --git a/packages/pxweb2-ui/src/lib/components/ActionItem/ActionItem.stories.tsx b/packages/pxweb2-ui/src/lib/components/ActionItem/ActionItem.stories.tsx
index 5a245fdf1..60fbdc6a4 100644
--- a/packages/pxweb2-ui/src/lib/components/ActionItem/ActionItem.stories.tsx
+++ b/packages/pxweb2-ui/src/lib/components/ActionItem/ActionItem.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
+import { Meta, StoryObj, StoryFn } from '@storybook/react-vite';
 import { ActionItem } from './ActionItem';
 
 const meta: Meta<typeof ActionItem> = {
@@ -19,36 +19,46 @@ type Story = StoryObj<typeof ActionItem>;
 
 export const Default: Story = {};
 
-export const LargeDefault: Story = {
-  args: {
-    largeIconName: 'Table',
-    label: 'Action with description',
-    size: 'large',
-  },
-};
-
-export const MediumDefault: Story = {
-  args: {
-    iconName: 'File',
-    label: 'Medium default',
-    size: 'medium',
-  },
-};
-
-export const MediumWithDescription: Story = {
-  args: {
-    iconName: 'File',
-    label: 'Action with description',
-    size: 'medium',
-    description: 'This is a description of the action item.',
-  },
-};
-
-export const MediumWithLoading: Story = {
-  args: {
-    iconName: 'File',
-    label: 'Action with loading spinner',
-    size: 'medium',
-    isLoading: true,
-  },
+export const Variants: StoryFn<typeof ActionItem> = () => {
+  return (
+    <>
+      Medium
+      <br />
+      <br />
+      <ActionItem
+        label="Medium Action"
+        size="medium"
+        onClick={() => alert('Clicked medium action!')}
+      />
+      <br />
+      <br />
+      <ActionItem
+        label="Medium Action with Description"
+        size="medium"
+        description="This is a description."
+        onClick={() => alert('Clicked medium action with description!')}
+      />
+      <br />
+      <br />
+      <ActionItem label="Medium Action" size="medium" disabled />
+      <br />
+      <br />
+      Large
+      <br />
+      <br />
+      <ActionItem
+        label="Large Action"
+        size="large"
+        onClick={() => alert('Clicked large action!')}
+      />
+      <br />
+      <br />
+      <ActionItem
+        label="Large Action"
+        disabled
+        size="large"
+        onClick={() => alert('Clicked large action!')}
+      />
+    </>
+  );
 };