feat(emcn): button-group

Author: emir-karabeg

…sim/app/(auth)/components/cta-button.tsx …app/(auth)/components/branded-button.tsxapps/sim/app/(auth)/components/cta-button.tsx renamed to apps/sim/app/(auth)/components/branded-button.tsx apps/sim/app/(auth)/components/cta-button.tsx renamed to apps/sim/app/(auth)/components/branded-button.tsx

@@ -4,9 +4,9 @@ import { forwardRef, useState } from 'react'
 import { ArrowRight, ChevronRight, Loader2 } from 'lucide-react'
 import { Button, type ButtonProps as EmcnButtonProps } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
-import { useCtaButtonClass } from '@/hooks/use-cta-button-class'
+import { useBrandedButtonClass } from '@/hooks/use-branded-button-class'
 
-export interface CTAButtonProps extends Omit<EmcnButtonProps, 'variant' | 'size'> {
+export interface BrandedButtonProps extends Omit<EmcnButtonProps, 'variant' | 'size'> {
   /** Shows loading spinner and disables button */
   loading?: boolean
   /** Text to show when loading (appends "..." automatically) */
@@ -18,22 +18,22 @@ export interface CTAButtonProps extends Omit<EmcnButtonProps, 'variant' | 'size'
 }
 
 /**
- * Branded CTA button for auth and status pages.
+ * Branded button for auth and status pages.
  * Automatically detects whitelabel customization and applies appropriate styling.
  *
  * @example
  * ```tsx
  * // Primary branded button with arrow
- * <CTAButton onClick={handleSubmit}>Sign In</CTAButton>
+ * <BrandedButton onClick={handleSubmit}>Sign In</BrandedButton>
  *
  * // Loading state
- * <CTAButton loading loadingText="Signing in">Sign In</CTAButton>
+ * <BrandedButton loading loadingText="Signing in">Sign In</BrandedButton>
  *
  * // Without arrow animation
- * <CTAButton showArrow={false}>Continue</CTAButton>
+ * <BrandedButton showArrow={false}>Continue</BrandedButton>
  * ```
  */
-export const CTAButton = forwardRef<HTMLButtonElement, CTAButtonProps>(
+export const BrandedButton = forwardRef<HTMLButtonElement, BrandedButtonProps>(
   (
     {
       children,
@@ -49,7 +49,7 @@ export const CTAButton = forwardRef<HTMLButtonElement, CTAButtonProps>(
     },
     ref
   ) => {
-    const buttonClass = useCtaButtonClass()
+    const buttonClass = useBrandedButtonClass()
     const [isHovered, setIsHovered] = useState(false)
 
     const handleMouseEnter = (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -65,8 +65,8 @@ export const CTAButton = forwardRef<HTMLButtonElement, CTAButtonProps>(
     return (
       <Button
         ref={ref}
-        variant='cta'
-        size='cta'
+        variant='branded'
+        size='branded'
         disabled={disabled || loading}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
@@ -97,4 +97,4 @@ export const CTAButton = forwardRef<HTMLButtonElement, CTAButtonProps>(
   }
 )
 
-CTAButton.displayName = 'CTAButton'
+BrandedButton.displayName = 'BrandedButton'

apps/sim/app/(auth)/components/sso-login-button.tsx

@@ -34,7 +34,7 @@ export function SSOLoginButton({
   }
 
   const primaryBtnClasses = cn(
-    primaryClassName || 'cta-button-gradient',
+    primaryClassName || 'branded-button-gradient',
     'flex w-full items-center justify-center gap-2 rounded-[10px] border font-medium text-[15px] text-white transition-all duration-200'
   )
 

apps/sim/app/(auth)/components/status-page-layout.tsx

@@ -30,7 +30,7 @@ export interface StatusPageLayoutProps {
  *   title="Page Not Found"
  *   description="The page you're looking for doesn't exist."
  * >
- *   <CTAButton onClick={() => router.push('/')}>Return to Home</CTAButton>
+ *   <BrandedButton onClick={() => router.push('/')}>Return to Home</BrandedButton>
  * </StatusPageLayout>
  * ```
  */

apps/sim/app/(auth)/login/login-form.tsx

@@ -105,7 +105,7 @@ export default function LoginPage({
   const [password, setPassword] = useState('')
   const [passwordErrors, setPasswordErrors] = useState<string[]>([])
   const [showValidationError, setShowValidationError] = useState(false)
-  const [buttonClass, setButtonClass] = useState('cta-button-gradient')
+  const [buttonClass, setButtonClass] = useState('branded-button-gradient')
   const [isButtonHovered, setIsButtonHovered] = useState(false)
 
   const [callbackUrl, setCallbackUrl] = useState('/workspace')
@@ -146,9 +146,9 @@ export default function LoginPage({
       const brandAccent = computedStyle.getPropertyValue('--brand-accent-hex').trim()
 
       if (brandAccent && brandAccent !== '#6f3dfa') {
-        setButtonClass('cta-button-custom')
+        setButtonClass('branded-button-custom')
       } else {
-        setButtonClass('cta-button-gradient')
+        setButtonClass('branded-button-gradient')
       }
     }
 

apps/sim/app/(auth)/reset-password/reset-password-form.tsx

@@ -27,7 +27,7 @@ export function RequestResetForm({
   statusMessage,
   className,
 }: RequestResetFormProps) {
-  const [buttonClass, setButtonClass] = useState('cta-button-gradient')
+  const [buttonClass, setButtonClass] = useState('branded-button-gradient')
   const [isButtonHovered, setIsButtonHovered] = useState(false)
 
   useEffect(() => {
@@ -36,9 +36,9 @@ export function RequestResetForm({
       const brandAccent = computedStyle.getPropertyValue('--brand-accent-hex').trim()
 
       if (brandAccent && brandAccent !== '#6f3dfa') {
-        setButtonClass('cta-button-custom')
+        setButtonClass('branded-button-custom')
       } else {
-        setButtonClass('cta-button-gradient')
+        setButtonClass('branded-button-gradient')
       }
     }
 
@@ -138,7 +138,7 @@ export function SetNewPasswordForm({
   const [validationMessage, setValidationMessage] = useState('')
   const [showPassword, setShowPassword] = useState(false)
   const [showConfirmPassword, setShowConfirmPassword] = useState(false)
-  const [buttonClass, setButtonClass] = useState('cta-button-gradient')
+  const [buttonClass, setButtonClass] = useState('branded-button-gradient')
   const [isButtonHovered, setIsButtonHovered] = useState(false)
 
   useEffect(() => {
@@ -147,9 +147,9 @@ export function SetNewPasswordForm({
       const brandAccent = computedStyle.getPropertyValue('--brand-accent-hex').trim()
 
       if (brandAccent && brandAccent !== '#6f3dfa') {
-        setButtonClass('cta-button-custom')
+        setButtonClass('branded-button-custom')
       } else {
-        setButtonClass('cta-button-gradient')
+        setButtonClass('branded-button-gradient')
       }
     }
 

apps/sim/app/(auth)/signup/signup-form.tsx

@@ -95,7 +95,7 @@ function SignupFormContent({
   const [showEmailValidationError, setShowEmailValidationError] = useState(false)
   const [redirectUrl, setRedirectUrl] = useState('')
   const [isInviteFlow, setIsInviteFlow] = useState(false)
-  const [buttonClass, setButtonClass] = useState('cta-button-gradient')
+  const [buttonClass, setButtonClass] = useState('branded-button-gradient')
   const [isButtonHovered, setIsButtonHovered] = useState(false)
 
   const [name, setName] = useState('')
@@ -128,9 +128,9 @@ function SignupFormContent({
       const brandAccent = computedStyle.getPropertyValue('--brand-accent-hex').trim()
 
       if (brandAccent && brandAccent !== '#6f3dfa') {
-        setButtonClass('cta-button-custom')
+        setButtonClass('branded-button-custom')
       } else {
-        setButtonClass('cta-button-gradient')
+        setButtonClass('branded-button-gradient')
       }
     }
 

apps/sim/app/(auth)/sso/sso-form.tsx

@@ -57,7 +57,7 @@ export default function SSOForm() {
   const [email, setEmail] = useState('')
   const [emailErrors, setEmailErrors] = useState<string[]>([])
   const [showEmailValidationError, setShowEmailValidationError] = useState(false)
-  const [buttonClass, setButtonClass] = useState('cta-button-gradient')
+  const [buttonClass, setButtonClass] = useState('branded-button-gradient')
   const [callbackUrl, setCallbackUrl] = useState('/workspace')
 
   useEffect(() => {
@@ -96,9 +96,9 @@ export default function SSOForm() {
       const brandAccent = computedStyle.getPropertyValue('--brand-accent-hex').trim()
 
       if (brandAccent && brandAccent !== '#6f3dfa') {
-        setButtonClass('cta-button-custom')
+        setButtonClass('branded-button-custom')
       } else {
-        setButtonClass('cta-button-gradient')
+        setButtonClass('branded-button-gradient')
       }
     }
 

apps/sim/app/(auth)/verify/verify-content.tsx

@@ -58,17 +58,17 @@ function VerificationForm({
     setCountdown(30)
   }
 
-  const [buttonClass, setButtonClass] = useState('cta-button-gradient')
+  const [buttonClass, setButtonClass] = useState('branded-button-gradient')
 
   useEffect(() => {
     const checkCustomBrand = () => {
       const computedStyle = getComputedStyle(document.documentElement)
       const brandAccent = computedStyle.getPropertyValue('--brand-accent-hex').trim()
 
       if (brandAccent && brandAccent !== '#6f3dfa') {
-        setButtonClass('cta-button-custom')
+        setButtonClass('branded-button-custom')
       } else {
-        setButtonClass('cta-button-gradient')
+        setButtonClass('branded-button-gradient')
       }
     }
 

apps/sim/app/_styles/globals.css

@@ -553,23 +553,23 @@ input[type="search"]::-ms-clear {
     animation: placeholder-pulse 1.5s ease-in-out infinite;
   }
 
-  .cta-button-gradient {
+  .branded-button-gradient {
     background: linear-gradient(to bottom, #8357ff, #6f3dfa) !important;
     border-color: #6f3dfa !important;
     box-shadow: inset 0 2px 4px 0 #9b77ff !important;
   }
 
-  .cta-button-gradient:hover {
+  .branded-button-gradient:hover {
     background: linear-gradient(to bottom, #8357ff, #6f3dfa) !important;
     opacity: 0.9;
   }
 
-  .cta-button-custom {
+  .branded-button-custom {
     background: var(--brand-primary-hex) !important;
     border-color: var(--brand-primary-hex) !important;
   }
 
-  .cta-button-custom:hover {
+  .branded-button-custom:hover {
     background: var(--brand-primary-hover-hex) !important;
     border-color: var(--brand-primary-hover-hex) !important;
   }

apps/sim/app/chat/components/auth/email/email-auth.tsx

@@ -10,7 +10,7 @@ import { quickValidateEmail } from '@/lib/messaging/email/validation'
 import { inter } from '@/app/_styles/fonts/inter/inter'
 import { soehne } from '@/app/_styles/fonts/soehne/soehne'
 import AuthBackground from '@/app/(auth)/components/auth-background'
-import { CTAButton } from '@/app/(auth)/components/cta-button'
+import { BrandedButton } from '@/app/(auth)/components/branded-button'
 import { SupportFooter } from '@/app/(auth)/components/support-footer'
 import Nav from '@/app/(landing)/components/nav/nav'
 
@@ -245,9 +245,9 @@ export default function EmailAuth({ identifier, onAuthSuccess }: EmailAuthProps)
                       )}
                     </div>
 
-                    <CTAButton type='submit' loading={isSendingOtp} loadingText='Sending Code'>
+                    <BrandedButton type='submit' loading={isSendingOtp} loadingText='Sending Code'>
                       Continue
-                    </CTAButton>
+                    </BrandedButton>
                   </form>
                 ) : (
                   <div className='space-y-6'>
@@ -293,14 +293,14 @@ export default function EmailAuth({ identifier, onAuthSuccess }: EmailAuthProps)
                       </div>
                     )}
 
-                    <CTAButton
+                    <BrandedButton
                       onClick={() => handleVerifyOtp()}
                       disabled={otpValue.length !== 6}
                       loading={isVerifyingOtp}
                       loadingText='Verifying'
                     >
                       Verify Email
-                    </CTAButton>
+                    </BrandedButton>
 
                     <div className='text-center'>
                       <p className='text-muted-foreground text-sm'>