simstudioai · waleedlatif1 · Sep 22, 2026 · Sep 22, 2026
diff --git a/apps/sim/app/(auth)/components/auth-submit-button.tsx b/apps/sim/app/(auth)/components/auth-submit-button.tsx
@@ -1,6 +1,5 @@
 import type { ReactNode } from 'react'
 import { Chip, Loader } from '@sim/emcn'
-import { AUTH_BUTTON_CLASS } from '@/app/(auth)/components/constants'
 
 interface AuthSubmitButtonProps {
   children: ReactNode
@@ -32,7 +31,8 @@ export function AuthSubmitButton({
       onClick={onClick}
       disabled={disabled || loading}
       fullWidth
-      className={AUTH_BUTTON_CLASS}
+      size='lg'
+      align='center'
     >
       {loading ? (
         <span className='flex items-center gap-2'>

diff --git a/apps/sim/app/(auth)/components/constants.ts b/apps/sim/app/(auth)/components/constants.ts
diff --git a/apps/sim/app/(auth)/components/password-input.tsx b/apps/sim/app/(auth)/components/password-input.tsx
@@ -1,11 +1,10 @@
 'use client'
 
 import { useState } from 'react'
-import { ChipInput, type ChipInputProps, cn } from '@sim/emcn'
+import { ChipInput, type ChipInputProps } from '@sim/emcn'
 import { Eye, EyeOff } from '@sim/emcn/icons'
-import { AUTH_CONTROL_HEIGHT } from '@/app/(auth)/components/constants'
 
-type PasswordInputProps = Omit<ChipInputProps, 'type' | 'icon' | 'endAdornment'>
+type PasswordInputProps = Omit<ChipInputProps, 'type' | 'icon' | 'endAdornment' | 'size'>
 
 /**
  * A {@link ChipInput} that owns the password reveal toggle — the eye button is
@@ -19,7 +18,8 @@ export function PasswordInput({ error, className, ...props }: PasswordInputProps
   return (
     <ChipInput
       {...props}
-      className={cn(AUTH_CONTROL_HEIGHT, className)}
+      size='lg'
+      className={className}
       type={visible ? 'text' : 'password'}
       error={error}
       endAdornment={

diff --git a/apps/sim/app/(auth)/components/social-login-buttons.tsx b/apps/sim/app/(auth)/components/social-login-buttons.tsx
@@ -7,7 +7,6 @@ import { getErrorMessage } from '@sim/utils/errors'
 import { GithubIcon, GoogleIcon, MicrosoftIcon } from '@/components/icons'
 import { client } from '@/lib/auth/auth-client'
 import { DEFAULT_POST_AUTH_ROUTE } from '@/app/(auth)/auth-redirect'
-import { AUTH_BUTTON_CLASS } from '@/app/(auth)/components/constants'
 
 const logger = createLogger('SocialLoginButtons')
 
@@ -74,7 +73,8 @@ export function SocialLoginButtons({
       fullWidth
       leftIcon={GithubIcon}
       variant='outline'
-      className={AUTH_BUTTON_CLASS}
+      size='lg'
+      align='center'
       disabled={!githubAvailable || isGithubLoading}
       onClick={signInWithGithub}
     >
@@ -87,7 +87,8 @@ export function SocialLoginButtons({
       fullWidth
       leftIcon={GoogleIcon}
       variant='outline'
-      className={AUTH_BUTTON_CLASS}
+      size='lg'
+      align='center'
       disabled={!googleAvailable || isGoogleLoading}
       onClick={signInWithGoogle}
     >
@@ -100,7 +101,8 @@ export function SocialLoginButtons({
       fullWidth
       leftIcon={MicrosoftIcon}
       variant='outline'
-      className={AUTH_BUTTON_CLASS}
+      size='lg'
+      align='center'
       disabled={!microsoftAvailable || isMicrosoftLoading}
       onClick={signInWithMicrosoft}
     >

diff --git a/apps/sim/app/(auth)/components/sso-login-button.tsx b/apps/sim/app/(auth)/components/sso-login-button.tsx
@@ -1,8 +1,7 @@
 'use client'
-import { Chip, cn } from '@sim/emcn'
+import { Chip } from '@sim/emcn'
 import { useRouter } from 'next/navigation'
 import { isSsoEnabled } from '@/lib/core/config/env-flags'
-import { AUTH_BUTTON_CLASS } from '@/app/(auth)/components/constants'
 
 interface SSOLoginButtonProps {
   callbackURL?: string
@@ -31,7 +30,9 @@ export function SSOLoginButton({
       variant={variant}
       fullWidth
       onClick={handleSSOClick}
-      className={cn(AUTH_BUTTON_CLASS, className)}
+      size='lg'
+      align='center'
+      className={className}
     >
       Sign in with SSO
     </Chip>

diff --git a/apps/sim/app/(auth)/oauth/consent/consent-view.tsx b/apps/sim/app/(auth)/oauth/consent/consent-view.tsx
@@ -14,7 +14,6 @@ import {
   AuthSubmitButton,
   AuthTextLink,
 } from '@/app/(auth)/components'
-import { AUTH_BUTTON_CLASS } from '@/app/(auth)/components/constants'
 import { OAuthConsentLoading } from '@/app/(auth)/oauth/consent/loading'
 import {
   useOAuthConsent,
@@ -166,7 +165,8 @@ export function OAuthConsentView({
           variant='border'
           fullWidth
           disabled={isPending}
-          className={AUTH_BUTTON_CLASS}
+          size='lg'
+          align='center'
           onClick={() => decide(false)}
         >
           {consent.isPending && consent.variables === false ? 'Declining…' : 'Deny'}

diff --git a/apps/sim/app/(interfaces)/chat/components/auth/email/email-auth.tsx b/apps/sim/app/(interfaces)/chat/components/auth/email/email-auth.tsx
@@ -143,7 +143,7 @@ export default function EmailAuth({ identifier }: EmailAuthProps) {
                     autoCorrect='off'
                     value={email}
                     onChange={handleEmailChange}
-                    className='h-[34px]'
+                    size='lg'
                     error={Boolean(hasEmailError)}
                   />
                   {hasEmailError && (

diff --git a/apps/sim/app/(interfaces)/chat/components/auth/password/password-auth.tsx b/apps/sim/app/(interfaces)/chat/components/auth/password/password-auth.tsx
@@ -72,7 +72,6 @@ export default function PasswordAuth({ identifier }: PasswordAuthProps) {
                   placeholder='Enter password'
                   value={password}
                   onChange={handlePasswordChange}
-                  className='h-[34px]'
                   error={hasPasswordError}
                 />
                 <div

diff --git a/apps/sim/app/f/[token]/public-file-auth.tsx b/apps/sim/app/f/[token]/public-file-auth.tsx
@@ -60,7 +60,6 @@ export function PublicFileAuth({ token }: PublicFileAuthProps) {
               setPassword(e.target.value)
               setError(null)
             }}
-            className='h-[34px]'
             error={Boolean(error)}
           />
           {error ? <p className='text-[var(--text-error)] text-xs'>{error}</p> : null}

diff --git a/apps/sim/app/f/[token]/public-file-email-auth.tsx b/apps/sim/app/f/[token]/public-file-email-auth.tsx
@@ -104,7 +104,7 @@ export function PublicFileEmailAuth({ token }: PublicFileEmailAuthProps) {
                 setEmail(e.target.value)
                 setError(null)
               }}
-              className='h-[34px]'
+              size='lg'
               error={Boolean(error)}
             />
             {error ? <p className='text-[var(--text-error)] text-xs'>{error}</p> : null}

diff --git a/apps/sim/app/f/[token]/public-file-sso-auth.tsx b/apps/sim/app/f/[token]/public-file-sso-auth.tsx
@@ -82,7 +82,7 @@ export function PublicFileSSOAuth({ token }: PublicFileSSOAuthProps) {
               setEmail(e.target.value)
               setError(null)
             }}
-            className='h-[34px]'
+            size='lg'
             error={Boolean(error)}
           />
           {error ? <p className='text-[var(--text-error)] text-xs'>{error}</p> : null}

diff --git a/apps/sim/app/invite/components/status-card.tsx b/apps/sim/app/invite/components/status-card.tsx
@@ -1,7 +1,6 @@
 'use client'
 import { Chip, Loader } from '@sim/emcn'
 import { AuthSubmitButton } from '@/app/(auth)/components'
-import { AUTH_BUTTON_CLASS } from '@/app/(auth)/components/constants'
 import { InviteHeading } from '@/app/invite/components/invite-heading'
 
 /** A document navigation, so the marketing surface initializes its own theme store. */
@@ -81,7 +80,8 @@ export function InviteStatusCard({
               onClick={action.onClick}
               disabled={action.disabled || action.loading}
               variant='outline'
-              className={AUTH_BUTTON_CLASS}
+              size='lg'
+              align='center'
             >
               {action.loading ? (
                 <span className='flex items-center gap-2'>

diff --git a/apps/sim/app/unsubscribe/unsubscribe.tsx b/apps/sim/app/unsubscribe/unsubscribe.tsx
@@ -6,7 +6,6 @@ import { getErrorMessage } from '@sim/utils/errors'
 import { useSearchParams } from 'next/navigation'
 import type { UnsubscribeType } from '@/lib/api/contracts/user'
 import { AuthSubmitButton } from '@/app/(auth)/components'
-import { AUTH_BUTTON_CLASS } from '@/app/(auth)/components/constants'
 import { InviteHeading, InviteLayout } from '@/app/invite/components'
 import { useUnsubscribe, useUnsubscribeMutation } from '@/hooks/queries/unsubscribe'
 
@@ -140,7 +139,8 @@ function UnsubscribeContent() {
             data?.currentPreferences.unsubscribeMarketing
           }
           variant='outline'
-          className={AUTH_BUTTON_CLASS}
+          size='lg'
+          align='center'
         >
           {data?.currentPreferences.unsubscribeMarketing
             ? 'Unsubscribed from Marketing'
@@ -156,7 +156,8 @@ function UnsubscribeContent() {
             data?.currentPreferences.unsubscribeUpdates
           }
           variant='outline'
-          className={AUTH_BUTTON_CLASS}
+          size='lg'
+          align='center'
         >
           {data?.currentPreferences.unsubscribeUpdates
             ? 'Unsubscribed from Updates'
@@ -172,7 +173,8 @@ function UnsubscribeContent() {
             data?.currentPreferences.unsubscribeNotifications
           }
           variant='outline'
-          className={AUTH_BUTTON_CLASS}
+          size='lg'
+          align='center'
         >
           {data?.currentPreferences.unsubscribeNotifications
             ? 'Unsubscribed from Notifications'

diff --git a/...mponents/editor/components/sub-block/components/slack-setup-wizard/slack-setup-wizard.tsx b/...mponents/editor/components/sub-block/components/slack-setup-wizard/slack-setup-wizard.tsx
@@ -226,7 +226,7 @@ function StepConfigure({
           onChange={(e) => onAppNameChange(e.target.value)}
           disabled={disabled}
           placeholder={DEFAULT_APP_NAME}
-          className='h-9'
+          size='lg'
         />
       </div>
       <div className='grid grid-cols-2 gap-x-4 gap-y-4'>
@@ -416,7 +416,7 @@ function SecretField({ id, label, value, onChange, disabled, placeholder }: Secr
         onChange={onChange}
         disabled={disabled}
         placeholder={placeholder}
-        className='h-9'
+        size='lg'
       />
     </div>
   )

diff --git a/apps/sim/ee/sso/components/sso-auth.tsx b/apps/sim/ee/sso/components/sso-auth.tsx
@@ -127,7 +127,7 @@ export default function SSOAuth({ identifier }: SSOAuthProps) {
                 value={email}
                 onChange={handleEmailChange}
                 onKeyDown={handleKeyDown}
-                className='h-[34px]'
+                size='lg'
                 error={showEmailValidationError && emailErrors.length > 0}
               />
               {showEmailValidationError && emailErrors.length > 0 && (

diff --git a/apps/sim/ee/sso/components/sso-form.test.tsx b/apps/sim/ee/sso/components/sso-form.test.tsx
@@ -1,7 +1,7 @@
 /**
  * @vitest-environment jsdom
  */
-import { act, type ButtonHTMLAttributes, type InputHTMLAttributes, type ReactNode } from 'react'
+import { act, type InputHTMLAttributes, type ReactNode } from 'react'
 import { createRoot, type Root } from 'react-dom/client'
 import { renderToString } from 'react-dom/server'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
@@ -26,15 +26,16 @@ vi.mock('next/link', () => ({
 }))
 
 vi.mock('@sim/emcn', () => ({
-  Button: ({ children, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) => (
-    <button type='button' {...props}>
-      {children}
-    </button>
+  ChipLink: ({ href, children }: { href: string; children?: ReactNode }) => (
+    <a href={href}>{children}</a>
   ),
   ChipInput: ({
     error: _error,
+    size: _size,
     ...props
-  }: InputHTMLAttributes<HTMLInputElement> & { error?: boolean }) => <input {...props} />,
+  }: Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & { error?: boolean; size?: string }) => (
+    <input {...props} />
+  ),
   Label: ({ children }: { children?: ReactNode }) => <span>{children}</span>,
   cn: (...values: unknown[]) => values.filter(Boolean).join(' '),
 }))

diff --git a/apps/sim/ee/sso/components/sso-form.tsx b/apps/sim/ee/sso/components/sso-form.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { Button, ChipInput, Label } from '@sim/emcn'
+import { ChipInput, ChipLink, Label } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import Link from 'next/link'
 import { useSearchParams } from 'next/navigation'
@@ -213,7 +213,7 @@ function SSOFormContent({
               onChange={handleEmailChange}
               aria-invalid={hasEmailError || undefined}
               aria-describedby={hasEmailError ? 'sso-email-errors' : undefined}
-              className='h-[34px]'
+              size='lg'
               error={Boolean(hasEmailError)}
             />
             {hasEmailError && (
@@ -247,13 +247,15 @@ function SSOFormContent({
           </div>
 
           <div className='space-y-3'>
-            <Link
+            <ChipLink
               href={`/login${callbackUrl ? `?callbackUrl=${encodeURIComponent(callbackUrl)}` : ''}`}
+              variant='outline'
+              fullWidth
+              size='lg'
+              align='center'
             >
-              <Button variant='outline' className='w-full rounded-[10px]' type='button'>
-                Sign in with email
-              </Button>
-            </Link>
+              Sign in with email
+            </ChipLink>
           </div>
         </>
       )}