feat(button): migrate button to css modules

.github/workflows/chromatic.yml

@@ -1,27 +1,42 @@
 name: "Chromatic"
-on: push
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: false
+
 jobs:
   chromatic:
     name: Run Chromatic
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
         with:
           fetch-depth: 0
+
       - name: Setup pnpm
-        uses: pnpm/action-setup@v3
-        with:
-          version: 8
+        uses: pnpm/action-setup@v4
+        if: ${{ steps.release.outputs.release_created }}
+
       - name: Setup Node.js 24.x
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: 24
           cache: "pnpm"
+
       - name: Install Dependencies and Build
         run: |
           pnpm install
           pnpm build
+
       - name: Run Chromatic
         uses: chromaui/action@latest
         with:

.github/workflows/release.yml

@@ -5,7 +5,9 @@ on:
     branches:
       - main
 
-concurrency: ${{ github.workflow }}-${{ github.ref }}
+concurrency:
+  group: release
+  cancel-in-progress: false
 
 permissions:
   contents: write
@@ -17,27 +19,22 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Release Please
         uses: googleapis/release-please-action@v4
         id: release
 
       - name: Setup pnpm
+        uses: pnpm/action-setup@v4
         if: ${{ steps.release.outputs.release_created }}
-        uses: pnpm/action-setup@v3
-        with:
-          version: 8
 
       - name: Setup Node.js 24.x
         if: ${{ steps.release.outputs.release_created }}
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: 24
           cache: "pnpm"
-          registry-url: "https://registry.npmjs.org"
-        env:
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
 
       - name: Install Dependencies
         if: ${{ steps.release.outputs.release_created }}

.github/workflows/test-ui.yml

@@ -2,6 +2,10 @@ name: UI Tests
 
 on: [push]
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
   test:
     runs-on: ubuntu-latest
@@ -11,21 +15,18 @@ jobs:
       image: mcr.microsoft.com/playwright:v1.58.2-noble
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
         with:
           fetch-depth: 0
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v3
-        with:
-          version: 8
+        uses: pnpm/action-setup@v4
 
-      - name: Setup Node
-        uses: actions/setup-node@v4
+      - name: Setup Node.js 24.x
+        uses: actions/setup-node@v6
         with:
           node-version: 24
           cache: "pnpm"
-          registry-url: "https://registry.npmjs.org"
 
       - name: Install dependencies
         run: pnpm install

apps/docs/stories/button.stories.tsx

@@ -69,7 +69,7 @@ const meta: Meta<typeof Button> = {
 		},
 		size: {
 			control: 'select',
-			options: ['xs', 'sm', 'md', 'lg', 'icon'],
+			options: ['sm', 'md', 'icon'],
 			description: 'The size of the button',
 			table: {
 				defaultValue: { summary: 'md' },
@@ -290,7 +290,12 @@ export const ButtonShowcase: Story = {
 									>
 										{variant} loading
 									</Button>
-									<Button variant={variant} color={color} title={`${variant} icon only`}>
+									<Button
+										variant={variant}
+										color={color}
+										size="icon"
+										title={`${variant} icon only`}
+									>
 										{<Star />}
 									</Button>
 								</div>
@@ -327,7 +332,7 @@ export const Sizes: Story = {
 			<div className="space-y-4">
 				<h2 className="text-base font-semibold">Size Variations</h2>
 				<div className="space-y-8">
-					{[ButtonSize.XS, ButtonSize.SM, ButtonSize.MD, ButtonSize.LG].map((size) => (
+					{[ButtonSize.SM, ButtonSize.MD].map((size) => (
 						<div key={size} className="space-y-4">
 							<h3 className="text-sm font-medium capitalize">{size}</h3>
 							<Button {...args} size={size} prefix={<ChevronLeft />} suffix={<ChevronRight />}>
@@ -377,7 +382,7 @@ export const IconButtons: Story = {
 							key={variant}
 							variant={variant}
 							suffix={<Code size={32} />}
-							size={ButtonSize.Icon}
+							size="icon"
 						/>
 					))}
 				</div>
@@ -389,7 +394,7 @@ export const IconButtons: Story = {
 					size of the icon by passing the "size" prop to the icon.
 				</p>
 				<div className="flex gap-4 mt-4">
-					{[ButtonSize.XS, ButtonSize.SM, ButtonSize.MD, ButtonSize.LG].map((size) => (
+					{[ButtonSize.SM, ButtonSize.MD, ButtonSize.Icon].map((size) => (
 						<Button {...args} key={size} size={size} prefix={<Code />} />
 					))}
 				</div>

package.json

@@ -54,7 +54,7 @@
 		"semver": ">=7.5.2",
 		"tmp": "0.2.4"
 	},
-	"packageManager": "pnpm@8.15.6",
+	"packageManager": "pnpm@10.30.3",
 	"name": "design-system",
 	"dependencies": {
 		"@signozhq/design-tokens": "2.1.2",