diff --git a/libs/components/src/item/item.stories.ts b/libs/components/src/item/item.stories.ts
index 80c1b70e118..1198fce89cb 100644
--- a/libs/components/src/item/item.stories.ts
+++ b/libs/components/src/item/item.stories.ts
@@ -346,6 +346,132 @@ export const SingleActionWithBadge: Story = {
   }),
 };
 
+export const CompactMode: Story = {
+  render: (args) => ({
+    props: args,
+    template: /*html*/ `
+    <div class="tw-bit-compact">
+      <bit-item-group aria-label="Multiple Action List">
+        <bit-item>
+          <button bit-item-content>
+            <i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
+            Foo
+            <span slot="secondary">Bar</span>
+          </button>
+
+          <ng-container slot="end">
+            <bit-item-action>
+              <button type="button" bitBadge variant="primary">Auto-fill</button>
+            </bit-item-action>
+            <bit-item-action>
+              <button type="button" bitIconButton="bwi-clone" size="small"></button>
+            </bit-item-action>
+            <bit-item-action>
+              <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
+            </bit-item-action>
+          </ng-container>
+        </bit-item>
+        <bit-item>
+          <button bit-item-content>
+            <i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
+            Foo
+            <span slot="secondary">Bar</span>
+          </button>
+
+          <ng-container slot="end">
+            <bit-item-action>
+              <button type="button" bitBadge variant="primary">Auto-fill</button>
+            </bit-item-action>
+            <bit-item-action>
+              <button type="button" bitIconButton="bwi-clone" size="small"></button>
+            </bit-item-action>
+            <bit-item-action>
+              <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
+            </bit-item-action>
+          </ng-container>
+        </bit-item>
+        <bit-item>
+          <button bit-item-content>
+            <i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
+            Foo
+            <span slot="secondary">Bar</span>
+          </button>
+
+          <ng-container slot="end">
+            <bit-item-action>
+              <button type="button" bitBadge variant="primary">Auto-fill</button>
+            </bit-item-action>
+            <bit-item-action>
+              <button type="button" bitIconButton="bwi-clone" size="small"></button>
+            </bit-item-action>
+            <bit-item-action>
+              <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
+            </bit-item-action>
+          </ng-container>
+        </bit-item>
+        <bit-item>
+          <button bit-item-content>
+            <i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
+            Foo
+            <span slot="secondary">Bar</span>
+          </button>
+
+          <ng-container slot="end">
+            <bit-item-action>
+              <button type="button" bitBadge variant="primary">Auto-fill</button>
+            </bit-item-action>
+            <bit-item-action>
+              <button type="button" bitIconButton="bwi-clone" size="small"></button>
+            </bit-item-action>
+            <bit-item-action>
+              <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
+            </bit-item-action>
+          </ng-container>
+        </bit-item>
+        <bit-item>
+          <button bit-item-content>
+            <i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
+            Foo
+            <span slot="secondary">Bar</span>
+          </button>
+
+          <ng-container slot="end">
+            <bit-item-action>
+              <button type="button" bitBadge variant="primary">Auto-fill</button>
+            </bit-item-action>
+            <bit-item-action>
+              <button type="button" bitIconButton="bwi-clone" size="small"></button>
+            </bit-item-action>
+            <bit-item-action>
+              <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
+            </bit-item-action>
+          </ng-container>
+        </bit-item>
+        <bit-item>
+          <button bit-item-content>
+            <i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
+            Foo
+            <span slot="secondary">Bar</span>
+          </button>
+
+          <ng-container slot="end">
+            <bit-item-action>
+              <button type="button" bitBadge variant="primary">Auto-fill</button>
+            </bit-item-action>
+            <bit-item-action>
+              <button type="button" bitIconButton="bwi-clone" size="small"></button>
+            </bit-item-action>
+            <bit-item-action>
+              <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
+            </bit-item-action>
+          </ng-container>
+        </bit-item>
+      </bit-item-group>
+    </div>
+    `,
+  }),
+};
+
 export const VirtualScrolling: Story = {
   render: (_args) => ({
     props: {