diff --git a/packages/admin-ui/.storybook/main.ts b/packages/admin-ui/.storybook/main.ts
index 1fdf253a3a9..8090aabb88e 100644
--- a/packages/admin-ui/.storybook/main.ts
+++ b/packages/admin-ui/.storybook/main.ts
@@ -11,7 +11,11 @@ function getAbsolutePath(value: string): any {
 }
 
 const config: StorybookConfig = {
-    stories: ["../docs/stories/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+    stories: [
+        "../docs/stories/**/*.mdx",
+        "../src/**/*.mdx",
+        "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+    ],
     staticDirs: ["../assets"],
     addons: [
         getAbsolutePath("@storybook/addon-a11y"),
diff --git a/packages/admin-ui/assets/images/storybook/button/button-group.png b/packages/admin-ui/assets/images/storybook/button/button-group.png
new file mode 100644
index 00000000000..9cc5b69a54f
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/button/button-group.png differ
diff --git a/packages/admin-ui/assets/images/storybook/button/contruction.png b/packages/admin-ui/assets/images/storybook/button/contruction.png
new file mode 100644
index 00000000000..4aaba254cc9
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/button/contruction.png differ
diff --git a/packages/admin-ui/assets/images/storybook/button/icon-usage.png b/packages/admin-ui/assets/images/storybook/button/icon-usage.png
new file mode 100644
index 00000000000..226474dc709
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/button/icon-usage.png differ
diff --git a/packages/admin-ui/assets/images/storybook/button/icon-variant.png b/packages/admin-ui/assets/images/storybook/button/icon-variant.png
new file mode 100644
index 00000000000..9028a0bb6c4
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/button/icon-variant.png differ
diff --git a/packages/admin-ui/assets/images/storybook/button/primary-button-usage.png b/packages/admin-ui/assets/images/storybook/button/primary-button-usage.png
new file mode 100644
index 00000000000..f62588971c3
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/button/primary-button-usage.png differ
diff --git a/packages/admin-ui/assets/images/storybook/button/size.png b/packages/admin-ui/assets/images/storybook/button/size.png
new file mode 100644
index 00000000000..0f737a63ead
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/button/size.png differ
diff --git a/packages/admin-ui/assets/images/storybook/button/states.png b/packages/admin-ui/assets/images/storybook/button/states.png
new file mode 100644
index 00000000000..f56b1f6aa83
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/button/states.png differ
diff --git a/packages/admin-ui/assets/images/storybook/button/type.png b/packages/admin-ui/assets/images/storybook/button/type.png
new file mode 100644
index 00000000000..21608f410cc
Binary files /dev/null and b/packages/admin-ui/assets/images/storybook/button/type.png differ
diff --git a/packages/admin-ui/src/Button/Button.mdx b/packages/admin-ui/src/Button/Button.mdx
new file mode 100644
index 00000000000..51a882215bb
--- /dev/null
+++ b/packages/admin-ui/src/Button/Button.mdx
@@ -0,0 +1,71 @@
+import { ArgsTable, Canvas, Meta } from '@storybook/blocks';
+import { Button } from './Button';
+
+import * as ButtonStories from './Button.stories';
+
+<Meta of={ButtonStories} />
+
+# Button
+
+- [Overview](#overview)
+- [Props](#props)
+- [Anatomy](#anatomy)
+  - [Construction](#construction)
+  - [Type](#type)
+  - [Size](#size)
+  - [States](#states)
+  - [Button icon variants](#button-icon-variants)
+- [Usage](#usage)
+  - [Icon Usage](#icon-usage)
+  - [Use primary buttons sparingly](#use-primary-buttons-sparingly)
+  - [Button Group](#button-group)
+
+## Overview
+
+The Button component is a key UI element that enables users to trigger actions or events, such as submitting forms, navigating pages, or interacting with system functionality. Its purpose is to provide a clear, intuitive way for users to interact with an system. Buttons are relevant in virtually all interfaces, ensuring user engagement by offering a simple, recognizable mechanism for executing commands. They are essential for usability, guiding user behavior and driving application workflows.
+
+<Canvas of={ButtonStories.Primary}/>
+
+## Props
+
+<ArgsTable of={Button.Primary} />
+
+## Anatomy
+
+### Construction
+<img src="/images/storybook/button/contruction.png" alt="Construction"/>
+
+### Type
+<img src="/images/storybook/button/type.png" alt="Type"/>
+
+### Size
+Buttons come in four different sizes: small, medium, large, and xl. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page.
+
+<img src="/images/storybook/button/size.png" alt="Size"/>
+
+### States
+<img src="/images/storybook/button/states.png" alt="States"/>
+
+### Button icon variants
+It is recommended that buttons display a label for accessibility purposes with an optional icon addition as a leading and trailing icon option. An icon should only be used in a button when it's absolutely necessary and when it has a strong association with the label text.
+
+Webiny Design system also supports the usage of buttons with icon only. Icon only buttons should be used as a space saving option and within dense interface space, for common and repeated actions and for clutter reduction. For accessibility and recognition purposes an **icon button is required to provide a tooltip** with the button title.
+
+<img src="/images/storybook/button/icon-variant.png" alt="Icon Variant"/>
+
+## Usage
+
+### Icon Usage
+An icon should only be used in a button when it's benefitial and when it has a meaningful association with the label.
+
+<img src="/images/storybook/button/icon-usage.png" alt="Icon Usage"/>
+
+### Use primary buttons sparingly
+Use primary buttons as the desired action for users. Competing primary buttons may leave the user unsure of next steps in their user journey. As a rule of thumb limit primary buttons to 1 in contained UIs and 3 in full page UIs.
+
+<img src="/images/storybook/button/primary-button-usage.png" alt="Primary Button Usage"/>
+
+### Button Group
+When used in groups, buttons should support only maximum of two type variants, with an exception of third variant being ghost extension button (eg. ellipsis). Avoid using random type and icon options within the button groups. Avoid using different sizes within the same group.
+
+<img src="/images/storybook/button/button-group.png" alt="Button Group"/>
diff --git a/packages/admin-ui/src/Button/Button.stories.tsx b/packages/admin-ui/src/Button/Button.stories.tsx
index 83c75ad0c28..70754818ca8 100644
--- a/packages/admin-ui/src/Button/Button.stories.tsx
+++ b/packages/admin-ui/src/Button/Button.stories.tsx
@@ -8,7 +8,6 @@ const meta: Meta<typeof Button> = {
     title: "Components/Button",
     component: Button,
     // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-    tags: ["autodocs"],
     // More on argTypes: https://storybook.js.org/docs/api/argtypes
     argTypes: {
         variant: { control: "select", options: ["primary", "secondary", "outline", "ghost"] },