From b54bbc6cff079bdb46038f70d0da6de6718c2937 Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Thu, 8 Jan 2026 11:43:36 +0000
Subject: [PATCH] Add Button variants story (#30491)

GitOrigin-RevId: 98d0cd965832de79de493d46ef9c989daff7be9b
---
 .../stories/shared/buttons.stories.tsx        | 44 +++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 services/web/frontend/stories/shared/buttons.stories.tsx

diff --git a/services/web/frontend/stories/shared/buttons.stories.tsx b/services/web/frontend/stories/shared/buttons.stories.tsx
new file mode 100644
index 0000000000..c536a50f05
--- /dev/null
+++ b/services/web/frontend/stories/shared/buttons.stories.tsx
@@ -0,0 +1,44 @@
+import { Meta, StoryObj } from '@storybook/react'
+import OLButton from '@/shared/components/ol/ol-button'
+import { ButtonProps } from '@/shared/components/types/button-props'
+
+export default {
+  title: 'Shared / Components / Button',
+  component: OLButton,
+} satisfies Meta
+
+type Story = StoryObj<typeof OLButton>
+
+const variants: ButtonProps['variant'][] = [
+  'primary',
+  'secondary',
+  'ghost',
+  'danger',
+  'danger-ghost',
+  'premium',
+  'premium-secondary',
+  'link',
+]
+
+export const Variants: Story = {
+  render() {
+    return (
+      <div className="d-flex flex-column gap-2">
+        {variants.map(variant => (
+          <div key={variant} className="d-flex gap-2">
+            <OLButton variant={variant}>Button</OLButton>
+            <OLButton variant={variant} isLoading>
+              Button
+            </OLButton>
+            <OLButton variant={variant} disabled>
+              Button
+            </OLButton>
+            <OLButton variant={variant} size="sm">
+              Button
+            </OLButton>
+          </div>
+        ))}
+      </div>
+    )
+  },
+}