fix: button (#5470)

web/app/(shareLayout)/webapp-signin/page.tsx

                 variant='primary'
                 onClick={() => { handleSSOLogin() }}
                 disabled={isLoading}
-                className="w-full !fone-medium !text-sm"
+                className="w-full !text-sm"
               >{t('login.sso')}
               </Button>
             </div>

web/app/activate/activateForm.tsx

             <h2 className="text-[32px] font-bold text-gray-900">{t('login.invalid')}</h2>
           </div>
           <div className="w-full mx-auto mt-6">
-            <Button variant='primary' className='w-full !fone-medium !text-sm'>
+            <Button variant='primary' className='w-full !text-sm'>
               <a href="https://dify.ai">{t('login.explore')}</a>
             </Button>
           </div>
               <div>
                 <Button
                   variant='primary'
-                  className='w-full !fone-medium !text-sm'
+                  className='w-full !text-sm'
                   onClick={handleActivate}
                 >
                   {`${t('login.join')} ${checkRes.workspace_name}`}
             </h2>
           </div>
           <div className="w-full mx-auto mt-6">
-            <Button variant='primary' className='w-full !fone-medium !text-sm'>
+            <Button variant='primary' className='w-full !text-sm'>
               <a href="/signin">{t('login.activated')}</a>
             </Button>
           </div>

web/app/components/app/annotation/add-annotation-modal/index.tsx

                   <div>{t('appAnnotation.addModal.createNext')}</div>
                 </div>
                 <div className='mt-2 flex space-x-2'>
-                  <Button className='!h-7 !text-xs !font-medium' onClick={onHide}>{t('common.operation.cancel')}</Button>
-                  <Button className='!h-7 !text-xs !font-medium' variant='primary' onClick={handleSave} loading={isSaving} disabled={isAnnotationFull}>{t('common.operation.add')}</Button>
+                  <Button className='h-7 text-xs' onClick={onHide}>{t('common.operation.cancel')}</Button>
+                  <Button className='h-7 text-xs' variant='primary' onClick={handleSave} loading={isSaving} disabled={isAnnotationFull}>{t('common.operation.add')}</Button>
                 </div>
               </div>
             </div>

web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx

                 autoFocus
               />
               <div className='mt-2 flex space-x-2'>
-                <Button className='!h-7 !text-xs !font-medium' variant='primary' onClick={handleSave}>{t('common.operation.save')}</Button>
-                <Button className='!h-7 !text-xs !font-medium' onClick={handleCancel}>{t('common.operation.cancel')}</Button>
+                <Button size='small' variant='primary' onClick={handleSave}>{t('common.operation.save')}</Button>
+                <Button size='small' onClick={handleCancel}>{t('common.operation.cancel')}</Button>
               </div>
             </div>
           )}

web/app/components/app/app-publisher/index.tsx

 } from 'react'
 import { useTranslation } from 'react-i18next'
 import dayjs from 'dayjs'
-import classNames from 'classnames'
 import { RiArrowDownSLine } from '@remixicon/react'
 import type { ModelAndParameter } from '../configuration/debug/types'
 import SuggestedAction from './suggested-action'
       <PortalToFollowElemTrigger onClick={handleTrigger}>
         <Button
           variant='primary'
-          className={`
-            pl-3 pr-2 py-0 h-8 text-[13px] font-medium
-            ${disabled && 'cursor-not-allowed opacity-50'}
-          `}
+          className='pl-3 pr-1'
+          disabled={disabled}
         >
           {t('workflow.common.publish')}
           <RiArrowDownSLine className='ml-0.5' />
                   </div>
                   <Button
                     className={`
-                      ml-2 px-2 py-0 h-6 shadow-xs rounded-md text-xs font-medium text-primary-600 border-[0.5px] bg-white border-gray-200
+                      ml-2 px-2 text-primary-600
                       ${published && 'text-primary-300 border-gray-100'}
                     `}
+                    size='small'
                     onClick={handleRestore}
                     disabled={published}
                   >
               : (
                 <Button
                   variant='primary'
-                  className={classNames(
-                    'mt-3 px-3 py-0 w-full h-8 border-[0.5px] border-primary-700 rounded-lg text-[13px] font-medium',
-                    (publishDisabled || published) && 'border-transparent',
-                  )}
+                  className='w-full mt-3'
                   onClick={() => handlePublish()}
                   disabled={publishDisabled || published}
                 >

web/app/components/app/app-publisher/publish-with-multiple-model.tsx

         <Button
           variant='primary'
           disabled={!validModelConfigs.length}
-          className='mt-3 px-3 py-0 w-full h-8 border-[0.5px] border-primary-700 rounded-lg text-[13px] font-medium'
+          className='mt-3 w-full'
         >
           {t('appDebug.operation.applyConfig')}
           <RiArrowDownSLine className='ml-0.5 w-3 h-3' />

web/app/components/app/configuration/base/warning-mask/cannot-query-dataset.tsx

       description={t('appDebug.feature.dataSet.queryVariable.unableToQueryDataSetTip')}
       footer={
         <div className='flex space-x-2'>
-          <Button variant='primary' className='flex items-center justify-start !h-8 !w-[96px]' onClick={onConfirm}>
+          <Button variant='primary' className='flex justify-start !w-[96px]' onClick={onConfirm}>
             <span className='text-[13px] font-medium'>{t('appDebug.feature.dataSet.queryVariable.ok')}</span>
           </Button>
         </div>

web/app/components/app/configuration/base/warning-mask/formatting-changed.tsx

       description={t('appDebug.formattingChangedText')}
       footer={
         <div className='flex space-x-2'>
-          <Button variant='primary' className='flex items-center space-x-2' onClick={onConfirm}>
+          <Button variant='primary' className='flex space-x-2' onClick={onConfirm}>
             {icon}
             <span>{t('common.operation.refresh')}</span>
           </Button>

web/app/components/app/configuration/base/warning-mask/has-not-set-api.tsx

       title={isTrailFinished ? t('appDebug.notSetAPIKey.trailFinished') : t('appDebug.notSetAPIKey.title')}
       description={t('appDebug.notSetAPIKey.description')}
       footer={
-        <Button variant='primary' className='flex items-center space-x-2' onClick={onSetting}>
+        <Button variant='primary' className='flex space-x-2' onClick={onSetting}>
           <span>{t('appDebug.notSetAPIKey.settingBtn')}</span>
           {icon}
         </Button>}

web/app/components/app/configuration/config-prompt/confirm-add-var/index.tsx

           </div>
         </div>
         <div className='mt-7 flex justify-end space-x-2'>
-          <Button className='w-20 h-8 !text-[13px]' onClick={onCancel}>{t('common.operation.cancel')}</Button>
-          <Button className='w-20 h-8 !text-[13px]' variant='primary' onClick={onConfrim}>{t('common.operation.add')}</Button>
+          <Button onClick={onCancel}>{t('common.operation.cancel')}</Button>
+          <Button variant='primary' onClick={onConfrim}>{t('common.operation.add')}</Button>
         </div>
       </div>
 

web/app/components/app/configuration/config/agent-setting-button.tsx

 
   return (
     <>
-      <Button onClick={() => setIsShowAgentSetting(true)} className='shrink-0 mr-2 !px-3 !h-8 !text-[13px] font-medium text-gray-700'>
+      <Button onClick={() => setIsShowAgentSetting(true)} className='shrink-0 mr-2'>
         <Settings01 className='mr-1 w-4 h-4 text-gray-500' />
         {t('appDebug.agent.setting.name')}
       </Button>

web/app/components/app/configuration/config/agent/agent-setting/index.tsx

         >
           <Button
             onClick={onCancel}
-            className='mr-2 text-sm font-medium'
+            className='mr-2'
           >
             {t('common.operation.cancel')}
           </Button>
           <Button
             variant='primary'
-            className='text-sm font-medium'
             onClick={handleSave}
           >
             {t('common.operation.save')}

web/app/components/app/configuration/config/automatic/get-automatic-res.tsx

 
             <div className='mt-6 flex justify-end'>
               <Button
-                className='flex space-x-2 items-center !h-8'
+                className='flex space-x-2'
                 variant='primary'
                 onClick={onGenerate}
                 disabled={isLoading}

web/app/components/app/configuration/ctrl-btn-group/index.tsx

     <div className="fixed left-[224px] bottom-0 w-[519px] h-[64px]">
       <div className={`${s.ctrlBtn} flex items-center h-full pl-4  gap-2 bg-white`}>
         <Button variant='primary' onClick={onSave}>{t('appDebug.operation.applyConfig')}</Button>
-        <Button variant='default' onClick={onReset}>{t('appDebug.operation.resetConfig')}</Button>
+        <Button onClick={onReset}>{t('appDebug.operation.resetConfig')}</Button>
       </div>
     </div>
   )

web/app/components/app/configuration/dataset-config/select-dataset/index.tsx

             {selected.length > 0 && `${selected.length} ${t('appDebug.feature.dataSet.selected')}`}
           </div>
           <div className='flex space-x-2'>
-            <Button className='!w-24 !h-9' onClick={onClose}>{t('common.operation.cancel')}</Button>
-            <Button className='!w-24 !h-9' variant='primary' onClick={handleSelect} disabled={hasNoData}>{t('common.operation.add')}</Button>
+            <Button onClick={onClose}>{t('common.operation.cancel')}</Button>
+            <Button variant='primary' onClick={handleSelect} disabled={hasNoData}>{t('common.operation.add')}</Button>
           </div>
         </div>
       )}

web/app/components/app/configuration/dataset-config/settings-modal/index.tsx

       >
         <Button
           onClick={onCancel}
-          className='mr-2 text-sm font-medium'
+          className='mr-2'
         >
           {t('common.operation.cancel')}
         </Button>
         <Button
           variant='primary'
-          className='text-sm font-medium'
           disabled={loading}
           onClick={handleSave}
         >

web/app/components/app/configuration/debug/index.tsx

                 ? (
                   <>
                     <Button
-                      className={`
-                        h-8 px-2.5 text-[13px] font-medium text-primary-600 bg-white
-                        ${multipleModelConfigs.length >= 4 && 'opacity-30'}
-                      `}
+                      variant='secondary-accent'
                       onClick={() => onMultipleModelConfigsChange(true, [...multipleModelConfigs, { id: `${Date.now()}`, model: '', provider: '', parameters: {} }])}
                       disabled={multipleModelConfigs.length >= 4}
                     >
                 : null
             }
             {mode !== AppType.completion && (
-              <Button className='flex items-center gap-1 !h-8 !bg-white' onClick={clearConversation}>
+              <Button variant='secondary-accent' className='gap-1' onClick={clearConversation}>
                 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <path d="M2.66663 2.66629V5.99963H3.05463M3.05463 5.99963C3.49719 4.90505 4.29041 3.98823 5.30998 3.39287C6.32954 2.7975 7.51783 2.55724 8.68861 2.70972C9.85938 2.8622 10.9465 3.39882 11.7795 4.23548C12.6126 5.07213 13.1445 6.16154 13.292 7.33296M3.05463 5.99963H5.99996M13.3333 13.333V9.99963H12.946M12.946 9.99963C12.5028 11.0936 11.7093 12.0097 10.6898 12.6045C9.67038 13.1993 8.48245 13.4393 7.31203 13.2869C6.1416 13.1344 5.05476 12.5982 4.22165 11.7621C3.38854 10.926 2.8562 9.83726 2.70796 8.66629M12.946 9.99963H9.99996" stroke="#1C64F2" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                 </svg>

web/app/components/app/configuration/features/chat-group/opening-statement/index.tsx

   const headerRight = !readonly ? (
     isFocus ? (
       <div className='flex items-center space-x-1'>
-        <div className='px-3 leading-[18px] text-xs font-medium text-gray-700 cursor-pointer' onClick={handleCancel}>{t('common.operation.cancel')}</div>
-        <Button className='!h-8 !px-3 text-xs' onClick={handleConfirm} variant="primary">{t('common.operation.save')}</Button>
+        <Button
+          variant='ghost'
+          size='small'
+          onClick={handleCancel}
+        >
+          {t('common.operation.cancel')}
+        </Button>
+        <Button
+          onClick={handleConfirm}
+          variant="primary"
+          size='small'
+        >
+          {t('common.operation.save')}
+        </Button>
       </div>
     ) : (
       <OperationBtn type='edit' actionName={hasValue ? '' : t('appDebug.openingStatement.writeOpener') as string} onClick={handleEdit} />

web/app/components/app/configuration/prompt-value-panel/index.tsx

             <div className="mt-5 border-b border-gray-100"></div>
             <div className="flex justify-between mt-4 px-4">
               <Button
-                className='!h-8 !p-3'
                 onClick={onClear}
                 disabled={false}
               >

web/app/components/app/configuration/toolbox/annotation/config-param-modal.tsx

       </div>
 
       <div className='mt-6 flex gap-2 justify-end'>
-        <Button className='!text-sm' onClick={onHide}>{t('common.operation.cancel')}</Button>
+        <Button onClick={onHide}>{t('common.operation.cancel')}</Button>
         <Button
           variant='primary'
           onClick={handleSave}
-          className='flex items-center border-[0.5px] !text-sm'
           loading={isLoading}
         >
           <div></div>

web/app/components/app/configuration/toolbox/moderation/moderation-setting-modal.tsx

       <div className='flex items-center justify-end'>
         <Button
           onClick={onCancel}
-          className='mr-2 text-sm font-medium'
+          className='mr-2'
         >
           {t('common.operation.cancel')}
         </Button>
         <Button
           variant='primary'
-          className='text-sm font-medium'
           onClick={handleSave}
           disabled={localeData.type === 'openai_moderation' && !openaiProviderConfiged}
         >

web/app/components/app/configuration/tools/external-data-tool-modal.tsx

       <div className='flex items-center justify-end mt-6'>
         <Button
           onClick={onCancel}
-          className='mr-2 text-sm font-medium'
+          className='mr-2'
         >
           {t('common.operation.cancel')}
         </Button>
         <Button
           variant='primary'
-          className='text-sm font-medium'
           onClick={handleSave}
         >
           {t('common.operation.save')}

web/app/components/app/create-app-modal/index.tsx

       <div className='pt-2 px-8'>
         <div className='py-2 text-sm font-medium leading-[20px] text-gray-900'>{t('app.newApp.captionDescription')}</div>
         <textarea
-          className='w-full h-10 px-3 py-2 text-sm font-normal bg-gray-100 rounded-lg border border-transparent outline-none appearance-none caret-primary-600 placeholder:text-gray-400 hover:bg-gray-50 hover:border hover:border-gray-300 focus:bg-gray-50 focus:border focus:border-gray-300 focus:shadow-xs h-[80px] resize-none'
+          className='w-full px-3 py-2 text-sm font-normal bg-gray-100 rounded-lg border border-transparent outline-none appearance-none caret-primary-600 placeholder:text-gray-400 hover:bg-gray-50 hover:border hover:border-gray-300 focus:bg-gray-50 focus:border focus:border-gray-300 focus:shadow-xs h-[80px] resize-none'
           placeholder={t('app.newApp.appDescriptionPlaceholder') || ''}
           value={description}
           onChange={e => setDescription(e.target.value)}
         </div>
       )}
       <div className='px-8 py-6 flex justify-end'>
-        <Button className='mr-2 text-gray-700 text-sm font-medium' onClick={onClose}>{t('app.newApp.Cancel')}</Button>
-        <Button className='text-sm font-medium' disabled={isAppsFull || !name} variant="primary" onClick={onCreate}>{t('app.newApp.Create')}</Button>
+        <Button className='mr-2' onClick={onClose}>{t('app.newApp.Cancel')}</Button>
+        <Button disabled={isAppsFull || !name} variant="primary" onClick={onCreate}>{t('app.newApp.Create')}</Button>
       </div>
       <div className='absolute right-6 top-6 p-2 cursor-pointer z-20' onClick={onClose}>
         <RiCloseLine className='w-4 h-4 text-gray-500' />

web/app/components/app/create-from-dsl-modal/index.tsx

       />
       {isAppsFull && <AppsFull loc='app-create-dsl' />}
       <div className='pt-6 flex justify-end'>
-        <Button className='mr-2 text-gray-700 text-sm font-medium' onClick={onClose}>{t('app.newApp.Cancel')}</Button>
-        <Button className='text-sm font-medium' disabled={isAppsFull || !currentFile} variant="primary" onClick={onCreate}>{t('app.newApp.Create')}</Button>
+        <Button className='mr-2' onClick={onClose}>{t('app.newApp.Cancel')}</Button>
+        <Button disabled={isAppsFull || !currentFile} variant="primary" onClick={onCreate}>{t('app.newApp.Create')}</Button>
       </div>
     </Modal>
   )

web/app/components/app/create-from-dsl-modal/uploader.tsx

               <span className='shrink-0 text-gray-500'>.yml</span>
             </div>
             <div className='hidden group-hover:flex items-center'>
-              <Button className='!h-8 !px-3 !py-[6px] bg-white !text-[13px] !leading-[18px] text-gray-700' onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.change')}</Button>
+              <Button onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.change')}</Button>
               <div className='mx-2 w-px h-4 bg-gray-200' />
               <div className='p-2 cursor-pointer' onClick={removeFile}>
                 <RiDeleteBinLine className='w-4 h-4 text-gray-500' />

web/app/components/app/overview/appCard.tsx

                 : !runningStatus
             return (
               <Button
-                className="mr-2 border-[0.5px] !h-8 hover:outline hover:outline-[0.5px] hover:outline-gray-300 text-gray-700 font-medium bg-white shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)]"
+                className="mr-2"
                 key={op.opName}
                 onClick={genClickFuncByName(op.opName)}
                 disabled={disabled}

web/app/components/app/overview/customize/index.tsx

           <div className='text-gray-900'>{t(`${prefixCustomize}.way1.step1`)}</div>
           <div className='text-gray-500 text-xs mt-1 mb-2'>{t(`${prefixCustomize}.way1.step1Tip`)}</div>
           <a href={`https://github.com/langgenius/${isChatApp ? 'webapp-conversation' : 'webapp-text-generator'}`} target='_blank' rel='noopener noreferrer'>
-            <Button className='text-gray-800 text-sm w-fit'><GithubIcon className='text-gray-800 mr-2' />{t(`${prefixCustomize}.way1.step1Operation`)}</Button>
+            <Button><GithubIcon className='text-gray-800 mr-2' />{t(`${prefixCustomize}.way1.step1Operation`)}</Button>
           </a>
         </div>
       </div>
           <div className='text-gray-900'>{t(`${prefixCustomize}.way1.step3`)}</div>
           <div className='text-gray-500 text-xs mt-1 mb-2'>{t(`${prefixCustomize}.way1.step2Tip`)}</div>
           <a href="https://vercel.com/docs/concepts/deployments/git/vercel-for-github" target='_blank' rel='noopener noreferrer'>
-            <Button className='text-gray-800 text-sm w-fit'>
+            <Button>
               <div className='mr-1.5 border-solid border-t-0 border-r-[7px] border-l-[7px] border-b-[12px] border-r-transparent border-b-black border-l-transparent border-t-transparent'></div>
               <span>{t(`${prefixCustomize}.way1.step2Operation`)}</span>
             </Button>
       <Tag bordered={true} hideBg={true} className='text-primary-600 border-primary-600 uppercase'>{t(`${prefixCustomize}.way`)} 2</Tag>
       <p className='mt-2 text-base font-medium text-gray-800'>{t(`${prefixCustomize}.way2.name`)}</p>
       <Button
-        className='w-36 mt-2'
+        className='mt-2'
         onClick={() =>
           window.open(
             `https://docs.dify.ai/${locale !== LanguagesSupported[1]

web/app/components/app/overview/settings/index.tsx

           />
         </>}
         <div className='mt-10 flex justify-end'>
-          <Button className='mr-2 flex-shrink-0 !text-sm' onClick={onHide}>{t('common.operation.cancel')}</Button>
-          <Button variant='primary' className='flex-shrink-0 !text-sm' onClick={onClickSave} loading={saveLoading}>{t('common.operation.save')}</Button>
+          <Button className='mr-2' onClick={onHide}>{t('common.operation.cancel')}</Button>
+          <Button variant='primary' onClick={onClickSave} loading={saveLoading}>{t('common.operation.save')}</Button>
         </div>
         {showEmojiPicker && <EmojiPicker
           onSelect={(icon, icon_background) => {

web/app/components/app/switch-app-modal/index.tsx

             <label htmlFor="removeOriginal" className="ml-2 text-sm leading-5 text-gray-700 cursor-pointer">{t('app.removeOriginal')}</label>
           </div>
           <div className='flex items-center'>
-            <Button className='mr-2 text-gray-700 text-sm font-medium' onClick={onClose}>{t('app.newApp.Cancel')}</Button>
-            <Button className='text-sm font-medium border-red-700 border-[0.5px]' disabled={isAppsFull || !name} variant="warning" onClick={goStart}>{t('app.switchStart')}</Button>
+            <Button className='mr-2' onClick={onClose}>{t('app.newApp.Cancel')}</Button>
+            <Button className='border-red-700' disabled={isAppsFull || !name} variant="warning" onClick={goStart}>{t('app.switchStart')}</Button>
           </div>
         </div>
       </Modal>

web/app/components/app/text-generate/saved-items/no-data/index.tsx

         {t('share.generation.savedNoData.description')}
       </div>
       <Button
-        className='mt-4 !h-8 !px-3'
+        className='mt-4'
         onClick={onStartCreateContent}
       >
         <div className='flex items-center space-x-2 text-primary-600 text-[13px] font-medium'>

web/app/components/base/button/index.css

 @tailwind components;
 
 @layer components {
-  body .btn {
-    @apply inline-flex justify-center items-center content-center h-9 leading-5 rounded-lg px-4 py-2 text-base cursor-pointer whitespace-nowrap;
+  .btn {
+    @apply inline-flex justify-center items-center border-[0.5px] font-medium cursor-pointer whitespace-nowrap shadow;
   }
 
-  body .btn-default {
-    @apply border-solid border border-gray-200 cursor-pointer text-gray-700 hover:bg-white hover:shadow-sm hover:border-gray-300;
+  .btn-disabled {
+    @apply opacity-60 cursor-not-allowed;
   }
 
-  body .btn-default-disabled {
-    @apply border-solid border border-gray-200 bg-gray-200 cursor-not-allowed text-gray-800;
+  .btn-small {
+    @apply px-2 h-6 rounded-md text-xs
   }
 
-  body .btn-primary {
-    @apply bg-primary-600 hover:bg-primary-600/75 cursor-pointer text-white hover:shadow-sm;
+  .btn-medium {
+    @apply px-3.5 h-8 rounded-lg text-[13px]
   }
 
-  body .btn-primary-disabled {
-    @apply bg-primary-200 cursor-not-allowed text-white;
+  .btn-large {
+    @apply px-4 h-9 rounded-[10px] text-sm font-semibold
   }
 
-  body .btn-warning {
-    @apply bg-red-600 hover:bg-red-600/75 cursor-pointer text-white hover:shadow-sm;
+  .btn-secondary {
+    @apply bg-white hover:bg-white/80 border-gray-200 hover:border-gray-300 text-gray-700;
   }
 
-  body .btn-warning-disabled {
-    @apply bg-red-600/75 cursor-not-allowed text-white;
+  .btn-secondary-accent {
+    @apply bg-white hover:bg-white/80 border-gray-200 hover:border-gray-300 text-primary-600;
+  }
+
+  .btn-primary {
+    @apply bg-primary-600 hover:bg-primary-700 text-white;
+  }
+
+  .btn-warning {
+    @apply bg-red-600 hover:bg-red-700 text-white;
+  }
+
+  .btn-ghost {
+    @apply bg-transparent hover:bg-gray-200 border-transparent shadow-none text-gray-700;
   }
 }

web/app/components/base/button/index.tsx

 import Spinner from '../spinner'
 
 const buttonVariants = cva(
-  'btn disabled:pointer-events-none',
+  'btn disabled:btn-disabled',
   {
     variants: {
       variant: {
-        primary: 'btn-primary disabled:btn-primary-disabled',
-        warning:
-          'btn-warning disabled:btn-warning-disabled',
-        default: 'btn-default disabled:btn-default-disabled',
+        'primary': 'btn-primary',
+        'warning': 'btn-warning',
+        'secondary': 'btn-secondary',
+        'secondary-accent': 'btn-secondary-accent',
+        'ghost': 'btn-ghost',
+      },
+      size: {
+        small: 'btn-small',
+        medium: 'btn-medium',
+        large: 'btn-large',
       },
     },
     defaultVariants: {
-      variant: 'default',
+      variant: 'secondary',
+      size: 'medium',
     },
   },
 )
 } & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants>
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, loading, children, ...props }, ref) => {
+  ({ className, variant, size, loading, children, ...props }, ref) => {
     return (
       <button
         type='button'
-        className={classNames(buttonVariants({ variant, className }))}
+        className={classNames(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       >

web/app/components/base/chat/chat-with-history/config-panel/index.tsx

                   {t('share.chat.configStatusDes')}
                 </div>
                 <Button
-                  className='shrink-0 px-2 py-0 h-6 bg-white text-xs font-medium text-primary-600 rounded-md'
+                  variant='secondary-accent'
+                  size='small'
+                  className='shrink-0'
                   onClick={() => setCollapsed(false)}
                 >
                   <Edit02 className='mr-1 w-3 h-3' />
               <div className={`pl-[136px] flex items-center ${isMobile && '!pl-0'}`}>
                 <Button
                   variant='primary'
-                  className='mr-2 text-sm font-medium'
+                  className='mr-2'
                   onClick={() => {
                     setCollapsed(true)
                     handleStartChat()
                   {t('common.operation.save')}
                 </Button>
                 <Button
-                  className='text-sm font-medium'
                   onClick={() => setCollapsed(true)}
                 >
                   {t('common.operation.cancel')}
             <div className='p-6 rounded-b-xl'>
               <Form />
               <Button
-                className={`px-4 py-0 h-9 ${inputsForms.length && !isMobile && 'ml-[136px]'}`}
+                className={`${inputsForms.length && !isMobile && 'ml-[136px]'}`}
                 variant='primary'
+                size='large'
                 onClick={handleStartChat}
               >
                 <MessageDotsCircle className='mr-2 w-4 h-4 text-white' />

web/app/components/base/chat/chat-with-history/sidebar/index.tsx

       }
       <div className='shrink-0 p-4'>
         <Button
-          className='justify-start px-3 py-0 w-full h-9 text-sm font-medium text-primary-600'
+          variant='secondary-accent'
+          className='justify-start w-full'
           onClick={handleNewConversation}
         >
           <Edit05 className='mr-2 w-4 h-4' />

web/app/components/base/chat/chat/index.tsx

             {
               !noStopResponding && isResponding && (
                 <div className='flex justify-center mb-2'>
-                  <Button className='py-0 px-3 h-7 bg-white shadow-xs' onClick={onStopResponding}>
+                  <Button onClick={onStopResponding}>
                     <StopCircle className='mr-[5px] w-3.5 h-3.5 text-gray-500' />
                     <span className='text-xs text-gray-500 font-normal'>{t('appDebug.operation.stopResponding')}</span>
                   </Button>

web/app/components/base/chat/chat/try-to-ask.tsx

           suggestedQuestions.map((suggestQuestion, index) => (
             <Button
               key={index}
-              className='mb-2 mr-2 last:mr-0 px-3 py-[5px] bg-white text-primary-600 text-xs font-medium'
+              variant='secondary-accent'
+              className='mb-2 mr-2 last:mr-0'
               onClick={() => onSend(suggestQuestion)}
             >
               {suggestQuestion}

web/app/components/base/chat/embedded-chatbot/config-panel/index.tsx

                   {t('share.chat.configStatusDes')}
                 </div>
                 <Button
-                  className='shrink-0 px-2 py-0 h-6 bg-white text-xs font-medium text-primary-600 rounded-md'
+                  variant='secondary-accent'
+                  size='small'
+                  className='shrink-0'
                   onClick={() => setCollapsed(false)}
                 >
                   <Edit02 className='mr-1 w-3 h-3' />
               <div className={cn('pl-[136px] flex items-center', isMobile && '!pl-0')}>
                 <Button
                   variant='primary'
-                  className='mr-2 text-sm font-medium'
+                  className='mr-2'
                   onClick={() => {
                     setCollapsed(true)
                     handleStartChat()
                   {t('common.operation.save')}
                 </Button>
                 <Button
-                  className='text-sm font-medium'
                   onClick={() => setCollapsed(true)}
                 >
                   {t('common.operation.cancel')}
             <div className='p-6 rounded-b-xl'>
               <Form />
               <Button
-                className={cn('px-4 py-0 h-9', inputsForms.length && !isMobile && 'ml-[136px]')}
+                className={cn(inputsForms.length && !isMobile && 'ml-[136px]')}
                 variant='primary'
+                size='large'
                 onClick={handleStartChat}
               >
                 <MessageDotsCircle className='mr-2 w-4 h-4 text-white' />

web/app/components/base/confirm-ui/index.tsx

       </div>
 
       <div className='flex gap-3 mt-4 ml-12'>
-        <Button variant='primary' onClick={onConfirm} className='flex items-center justify-center min-w-20 text-center text-white rounded-lg cursor-pointer h-9 '>{confirmText || t('common.operation.confirm')}</Button>
-        <Button onClick={onCancel} className='flex items-center justify-center min-w-20 text-center text-gray-500 border rounded-lg cursor-pointer h-9 border-color-gray-200'>{cancelText || t('common.operation.cancel')}</Button>
+        <Button variant='primary' onClick={onConfirm}>{confirmText || t('common.operation.confirm')}</Button>
+        <Button onClick={onCancel}>{cancelText || t('common.operation.cancel')}</Button>
       </div>
     </div>
 

web/app/components/base/confirm/common.tsx

               {
                 showOperateCancel && (
                   <Button
-                    className='mr-2 min-w-24 text-sm font-medium !text-gray-700'
+                    className='mr-2'
                     onClick={onCancel}
                   >
                     {t('common.operation.cancel')}

web/app/components/base/emoji-picker/index.tsx

     </div>
     <Divider className='m-0' />
     <div className='w-full flex items-center justify-center p-3 gap-2'>
-      <Button variant="default" className='w-full' onClick={() => {
+      <Button className='w-full' onClick={() => {
         onClose && onClose()
       }}>
         {t('app.emoji.cancel')}

web/app/components/base/features/feature-choose/index.tsx

     <>
       <Button
         className={`
-          px-3 py-0 h-8 rounded-lg border border-primary-100 bg-primary-25 shadow-xs text-xs font-semibold text-primary-600
-          ${disabled && 'cursor-not-allowed opacity-50'}
+          border-primary-100 bg-primary-25 text-xs font-semibold text-primary-600
         `}
         onClick={() => !disabled && setShowFeaturesModal(true)}
       >

web/app/components/base/features/feature-panel/moderation/moderation-setting-modal.tsx

       <div className='flex items-center justify-end'>
         <Button
           onClick={onCancel}
-          className='mr-2 text-sm font-medium'
+          className='mr-2'
         >
           {t('common.operation.cancel')}
         </Button>
         <Button
           variant='primary'
-          className='text-sm font-medium'
           onClick={handleSave}
           disabled={localeData.type === 'openai_moderation' && !openaiProviderConfiged}
         >

web/app/components/base/features/feature-panel/opening-statement/index.tsx

   const headerRight = !readonly ? (
     isFocus ? (
       <div className='flex items-center space-x-1'>
-        <div className='px-3 leading-[18px] text-xs font-medium text-gray-700 cursor-pointer' onClick={handleCancel}>{t('common.operation.cancel')}</div>
-        <Button className='!h-8 !px-3 text-xs' onClick={handleConfirm} variant="primary">{t('common.operation.save')}</Button>
+        <Button
+          variant='ghost'
+          size='small'
+          onClick={handleCancel}
+        >
+          {t('common.operation.cancel')}
+        </Button>
+        <Button size='small' onClick={handleConfirm} variant="primary">{t('common.operation.save')}</Button>
       </div>
     ) : (
       <OperationBtn type='edit' actionName={hasValue ? '' : t('appDebug.openingStatement.writeOpener') as string} onClick={handleEdit} />

web/app/components/base/image-uploader/image-link-input.tsx

       />
       <Button
         variant='primary'
-        className='!h-6 text-xs font-medium'
+        size='small'
         disabled={!imageLink || disabled}
         onClick={handleClick}
       >

web/app/components/base/modal/delete-confirm-modal/index.tsx

           <Button
             variant='warning'
             onClick={onRemove}
-            className='border-red-700 border-[0.5px]'
+            className='border-red-700'
           >
             {t('common.operation.sure')}
           </Button>

web/app/components/base/tag-management/tag-remove-modal.tsx

         {t('common.tag.deleteTip')}
       </div>
       <div className='pt-6 flex items-center justify-end'>
-        <Button className='mr-2 text-gray-700 text-sm font-medium' onClick={onClose}>{t('common.operation.cancel')}</Button>
-        <Button className='text-sm font-medium border-red-700 border-[0.5px]' variant="warning" onClick={onConfirm}>{t('common.operation.delete')}</Button>
+        <Button className='mr-2' onClick={onClose}>{t('common.operation.cancel')}</Button>
+        <Button className='border-red-700' variant="warning" onClick={onConfirm}>{t('common.operation.delete')}</Button>
       </div>
     </Modal>
   )

web/app/components/custom/custom-app-header-brand/index.tsx

       </div>
       <div className='flex items-center mb-2'>
         <Button
-          className={`
-            !h-8 !px-3 bg-white !text-[13px]
-            ${plan.type === Plan.sandbox ? 'opacity-40' : ''}
-          `}
           disabled={plan.type === Plan.sandbox}
         >
           <ImagePlus className='mr-2 w-4 h-4' />
         </Button>
         <div className='mx-2 h-5 w-[1px] bg-black/5'></div>
         <Button
-          className={`
-            !h-8 !px-3 bg-white !text-[13px]
-            ${plan.type === Plan.sandbox ? 'opacity-40' : ''}
-          `}
           disabled={plan.type === Plan.sandbox}
         >
           {t('custom.restore')}

web/app/components/custom/custom-web-app-brand/index.tsx

             !uploading && (
               <Button
                 className={`
-                  relative mr-2 !h-8 !px-3 bg-white !text-[13px]
-                  ${uploadDisabled ? 'opacity-40' : ''}
+                  relative mr-2
                 `}
                 disabled={uploadDisabled}
               >
           {
             uploading && (
               <Button
-                className='relative mr-2 !h-8 !px-3 bg-white !text-[13px] opacity-40'
+                className='relative mr-2'
                 disabled={true}
               >
                 <RiLoader2Line className='animate-spin mr-2 w-4 h-4' />
               <>
                 <Button
                   variant='primary'
-                  className='mr-2 !h-8 !px-3 !py-0 !text-[13px]'
+                  className='mr-2'
                   onClick={handleApply}
                   disabled={webappBrandRemoved || !isCurrentWorkspaceManager}
                 >
                   {t('custom.apply')}
                 </Button>
                 <Button
-                  className='mr-2 !h-8 !px-3 !text-[13px] bg-white'
+                  className='mr-2'
                   onClick={handleCancel}
                   disabled={webappBrandRemoved || !isCurrentWorkspaceManager}
                 >
           }
           <div className='mr-2 h-5 w-[1px] bg-black/5'></div>
           <Button
-            className={`
-              !h-8 !px-3 bg-white !text-[13px]
-              ${(uploadDisabled || (!webappLogo && !webappBrandRemoved)) ? 'opacity-40' : ''}
-            `}
             disabled={uploadDisabled || (!webappLogo && !webappBrandRemoved)}
             onClick={handleRestore}
           >

web/app/components/datasets/create/step-two/index.tsx

                     </div>
                   </div>
                   <div className={s.formFooter}>
-                    <Button variant="primary" className={cn(s.button, '!h-8')} onClick={confirmChangeCustomConfig}>{t('datasetCreation.stepTwo.preview')}</Button>
-                    <Button className={cn(s.button, 'ml-2 !h-8')} onClick={resetRules}>{t('datasetCreation.stepTwo.reset')}</Button>
+                    <Button variant="primary" className={cn(s.button)} onClick={confirmChangeCustomConfig}>{t('datasetCreation.stepTwo.preview')}</Button>
+                    <Button className={cn(s.button, 'ml-2')} onClick={resetRules}>{t('datasetCreation.stepTwo.reset')}</Button>
                   </div>
                 </div>
               )}
               <div className='grow flex items-center'>
                 <div>{t('datasetCreation.stepTwo.previewTitle')}</div>
                 {docForm === DocForm.QA && !previewSwitched && (
-                  <Button className='ml-2 !h-[26px] !py-[3px] !px-2 !text-xs !font-medium !text-primary-600' onClick={previewSwitch}>{t('datasetCreation.stepTwo.previewButton')}</Button>
+                  <Button className='ml-2' variant='secondary-accent' onClick={previewSwitch}>{t('datasetCreation.stepTwo.previewButton')}</Button>
                 )}
               </div>
               <div className='flex items-center justify-center w-6 h-6 cursor-pointer' onClick={hidePreview}>

web/app/components/datasets/create/website/firecrawl/base/url-input.tsx

       <Button
         variant='primary'
         onClick={handleOnRun}
-        className='ml-2 !h-8 text-[13px] font-medium'
+        className='ml-2'
         loading={isRunning}
       >
         {!isRunning ? t(`${I18N_PREFIX}.run`) : ''}

web/app/components/datasets/create/website/no-data.tsx

           {t(`${I18N_PREFIX}.fireCrawlNotConfiguredDescription`)}
         </div>
       </div>
-      <Button variant='primary' onClick={onConfig} className='!h-8 text-[13px] font-medium ' >
+      <Button variant='primary' onClick={onConfig}>
         {t(`${I18N_PREFIX}.configure`)}
       </Button>
     </div>

web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx

               <span className='shrink-0 text-gray-500'>.csv</span>
             </div>
             <div className='hidden group-hover:flex items-center'>
-              <Button className='!h-8 !px-3 !py-[6px] bg-white !text-[13px] !leading-[18px] text-gray-700' onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.change')}</Button>
+              <Button onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.change')}</Button>
               <div className='mx-2 w-px h-4 bg-gray-200' />
               <div className='p-2 cursor-pointer' onClick={removeFile}>
                 <RiDeleteBinLine className='w-4 h-4 text-gray-500' />

web/app/components/datasets/documents/detail/batch-modal/index.tsx

         docForm={docForm}
       />
       <div className='mt-[28px] pt-6 flex justify-end'>
-        <Button className='mr-2 text-gray-700 text-sm font-medium' onClick={onCancel}>
+        <Button className='mr-2' onClick={onCancel}>
           {t('datasetDocuments.list.batchModal.cancel')}
         </Button>
-        <Button className='text-sm font-medium' variant="primary" onClick={handleSend} disabled={!currentCSV}>
+        <Button variant="primary" onClick={handleSend} disabled={!currentCSV}>
           {t('datasetDocuments.list.batchModal.run')}
         </Button>
       </div>

web/app/components/datasets/documents/detail/completed/SegmentCard.tsx

               onClick={async () => {
                 await onDelete?.(id)
               }}
-              className='border-red-700 border-[0.5px]'
+              className='border-red-700'
             >
               {t('common.operation.sure')}
             </Button>

web/app/components/datasets/documents/detail/completed/index.tsx

         {isEditing && (
           <>
             <Button
-              className='mr-2 !h-7 !px-3 !py-[5px] text-xs font-medium text-gray-700 !rounded-md'
               onClick={handleCancel}>
               {t('common.operation.cancel')}
             </Button>
             <Button
               variant='primary'
-              className='!h-7 !px-3 !py-[5px] text-xs font-medium !rounded-md'
               onClick={handleSave}
               disabled={loading}
             >

web/app/components/datasets/documents/detail/new-segment-modal.tsx

         </div>
         <div className='flex justify-end'>
           <Button
-            className='mr-2 !h-9 !px-4 !py-2 text-sm font-medium text-gray-700 !rounded-lg'
             onClick={handleCancel}>
             {t('common.operation.cancel')}
           </Button>
           <Button
             variant='primary'
-            className='!h-9 !px-4 !py-2 text-sm font-medium !rounded-lg'
             onClick={handleSave}
             disabled={loading}
           >

web/app/components/datasets/documents/index.tsx

           <div className='flex gap-2 justify-center items-center !h-8'>
             <RetryButton datasetId={datasetId} />
             {embeddingAvailable && (
-              <Button variant='primary' onClick={routeToDocCreate} className='!h-8 !text-[13px] !shrink-0'>
+              <Button variant='primary' onClick={routeToDocCreate} className='shrink-0'>
                 <PlusIcon className='h-4 w-4 mr-2 stroke-current' />
                 {isDataSourceNotion && t('datasetDocuments.list.addPages')}
                 {isDataSourceWeb && t('datasetDocuments.list.addUrl')}

web/app/components/datasets/documents/list.tsx

           <Button
             variant='warning'
             onClick={() => onOperate('delete')}
-            className='border-red-700 border-[0.5px]'
+            className='border-red-700'
           >
             {t('common.operation.sure')}
           </Button>

web/app/components/datasets/rename-modal/index.tsx

         </div>
       </div>
       <div className='pt-6 flex justify-end'>
-        <Button className='mr-2 text-gray-700 text-sm font-medium' onClick={onClose}>{t('common.operation.cancel')}</Button>
-        <Button className='text-sm font-medium' disabled={loading} variant="primary" onClick={onConfirm}>{t('common.operation.save')}</Button>
+        <Button className='mr-2' onClick={onClose}>{t('common.operation.cancel')}</Button>
+        <Button disabled={loading} variant="primary" onClick={onConfirm}>{t('common.operation.save')}</Button>
       </div>
     </Modal>
   )

web/app/components/datasets/settings/form/index.tsx

           <div className={labelClass} />
           <div className='w-[480px]'>
             <Button
-              className='min-w-24 text-sm'
+              className='min-w-24'
               variant='primary'
               onClick={handleSave}
             >

web/app/components/develop/secret-key/secret-key-button.tsx

   const { t } = useTranslation()
   return (
     <>
-      <Button className={`px-3 ${className}`} variant='default' onClick={() => setVisible(true)}>
+      <Button className={`px-3 ${className}`} onClick={() => setVisible(true)}>
         <div className={'flex items-center justify-center w-4 h-4 mr-2'}>
           <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" className={iconCls}>
             <path d="M9 3.66672C9.35362 3.66672 9.69276 3.80719 9.94281 4.05724C10.1929 4.30729 10.3333 4.64643 10.3333 5.00005M13 5.00005C13.0002 5.62483 12.854 6.24097 12.5732 6.79908C12.2924 7.3572 11.8847 7.84177 11.3829 8.21397C10.8811 8.58617 10.2991 8.83564 9.68347 8.94239C9.06788 9.04915 8.43584 9.01022 7.838 8.82872L6.33333 10.3334H5V11.6667H3.66667V13.0001H1.66667C1.48986 13.0001 1.32029 12.9298 1.19526 12.8048C1.07024 12.6798 1 12.5102 1 12.3334V10.6094C1.00004 10.4326 1.0703 10.263 1.19533 10.1381L5.17133 6.16205C5.00497 5.61206 4.95904 5.03268 5.0367 4.46335C5.11435 3.89402 5.31375 3.3481 5.62133 2.86275C5.92891 2.3774 6.33744 1.96401 6.81913 1.65073C7.30082 1.33745 7.84434 1.13162 8.41272 1.04725C8.9811 0.96289 9.56098 1.00197 10.1129 1.16184C10.6648 1.32171 11.1758 1.59861 11.6111 1.97369C12.0464 2.34878 12.3958 2.81324 12.6354 3.33548C12.8751 3.85771 12.9994 4.42545 13 5.00005Z" stroke="#1F2A37" strokeLinecap="round" strokeLinejoin="round" />

web/app/components/develop/secret-key/secret-key-generate.tsx

         <InputCopy className='w-full' value={newKey?.token} />
       </div>
       <div className='flex justify-end my-4'>
-        <Button variant='default' className={`flex-shrink-0 ${s.w64}`} onClick={onClose}>
+        <Button className={`flex-shrink-0 ${s.w64}`} onClick={onClose}>
           <span className='text-xs font-medium text-gray-800'>{t('appApi.actionMsg.ok')}</span>
         </Button>
       </div>

web/app/components/develop/secret-key/secret-key-modal.tsx

         )
       }
       <div className='flex'>
-        <Button variant='default' className={`flex flex-shrink-0 mt-4 ${s.autoWidth}`} onClick={onCreate} disabled={ !currentWorkspace || !isCurrentWorkspaceManager}>
+        <Button className={`flex flex-shrink-0 mt-4 ${s.autoWidth}`} onClick={onCreate} disabled={ !currentWorkspace || !isCurrentWorkspaceManager}>
           <PlusIcon className='flex flex-shrink-0 w-4 h-4' />
           <div className='text-xs font-medium text-gray-800'>{t('appApi.apiKeyModal.createNewSecretKey')}</div>
         </Button>

web/app/components/explore/app-card/index.tsx

       {isExplore && canCreate && (
         <div className={cn('hidden items-center flex-wrap min-h-[42px] px-[14px] pt-2 pb-[10px] group-hover:flex')}>
           <div className={cn('flex items-center w-full space-x-2')}>
-            <Button variant='primary' className='grow flex items-center !h-7' onClick={() => onCreate()}>
+            <Button variant='primary' className='grow h-7' onClick={() => onCreate()}>
               <PlusIcon className='w-4 h-4 mr-1' />
               <span className='text-xs'>{t('explore.appCard.addToWorkspace')}</span>
             </Button>
       {!isExplore && (
         <div className={cn('hidden items-center flex-wrap min-h-[42px] px-[14px] pt-2 pb-[10px] group-hover:flex')}>
           <div className={cn('flex items-center w-full space-x-2')}>
-            <Button variant='primary' className='grow flex items-center !h-7' onClick={() => onCreate()}>
+            <Button variant='primary' className='grow h-7' onClick={() => onCreate()}>
               <PlusIcon className='w-4 h-4 mr-1' />
               <span className='text-xs'>{t('app.newApp.useTemplate')}</span>
             </Button>

web/app/components/header/account-setting/account-page/index.tsx

         <div className='mb-8'>
           <div className='mb-1 text-sm font-medium text-gray-900'>{t('common.account.password')}</div>
           <div className='mb-2 text-xs text-gray-500'>{t('common.account.passwordTip')}</div>
-          <Button className='font-medium !text-gray-700 !px-3 !py-[7px] !text-[13px]' onClick={() => setEditPasswordModalVisible(true)}>{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</Button>
+          <Button onClick={() => setEditPasswordModalVisible(true)}>{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</Button>
         </div>
       )}
       <div className='mb-6 border-[0.5px] border-gray-100' />
             wrapperClassName='mt-2'
           />
         )}
-        {!IS_CE_EDITION && <Button className='mt-2 font-medium text-[#D92D20] !px-3 !py-[7px] !text-[13px]' onClick={() => setShowDeleteAccountModal(true)}>{t('common.account.delete')}</Button>}
+        {!IS_CE_EDITION && <Button className='mt-2 text-[#D92D20]' onClick={() => setShowDeleteAccountModal(true)}>{t('common.account.delete')}</Button>}
       </div>
       {editNameModalVisible && (
         <Modal
             onChange={e => setEditName(e.target.value)}
           />
           <div className='flex justify-end mt-10'>
-            <Button className='mr-2 text-sm font-medium' onClick={() => setEditNameModalVisible(false)}>{t('common.operation.cancel')}</Button>
+            <Button className='mr-2' onClick={() => setEditNameModalVisible(false)}>{t('common.operation.cancel')}</Button>
             <Button
               disabled={editing || !editName}
               variant='primary'
-              className='text-sm font-medium'
               onClick={handleSaveName}
             >
               {t('common.operation.save')}
             onChange={e => setConfirmPassword(e.target.value)}
           />
           <div className='flex justify-end mt-10'>
-            <Button className='mr-2 text-sm font-medium' onClick={() => {
+            <Button className='mr-2' onClick={() => {
               setEditPasswordModalVisible(false)
               resetPasswordForm()
             }}>{t('common.operation.cancel')}</Button>
             <Button
               disabled={editing}
               variant='primary'
-              className='text-sm font-medium'
               onClick={handleSavePassowrd}
             >
               {userProfile.is_password_set ? t('common.operation.reset') : t('common.operation.save')}
           </div>
           <div className='my-2 px-3 py-2 rounded-lg bg-gray-100 text-sm font-medium leading-5 text-gray-800'>{`Delete Account: ${userProfile.email}`}</div>
           <div className='pt-6 flex justify-end items-center'>
-            <Button className='w-24 text-gray-700 text-sm font-medium' onClick={() => setShowDeleteAccountModal(false)}>{t('common.operation.ok')}</Button>
+            <Button className='w-24' onClick={() => setShowDeleteAccountModal(false)}>{t('common.operation.ok')}</Button>
           </div>
         </Modal>
       )}

web/app/components/header/account-setting/api-based-extension-page/modal.tsx

       <div className='flex items-center justify-end mt-6'>
         <Button
           onClick={onCancel}
-          className='mr-2 text-sm font-medium'
+          className='mr-2'
         >
           {t('common.operation.cancel')}
         </Button>
         <Button
           variant='primary'
-          className='text-sm font-medium'
           disabled={!localeData.name || !localeData.api_endpoint || !localeData.api_key || loading}
           onClick={handleSave}
         >

web/app/components/header/account-setting/data-source-page/data-source-website/config-firecrawl-modal.tsx

                 </a>
                 <div className='flex'>
                   <Button
-                    className='mr-2 h-9 text-sm font-medium text-gray-700'
+                    size='large'
+                    className='mr-2'
                     onClick={onCancel}
                   >
                     {t('common.operation.cancel')}
                   </Button>
                   <Button
-                    className='h-9 text-sm font-medium'
                     variant='primary'
+                    size='large'
                     onClick={handleSave}
                     loading={isSaving}
                   >

web/app/components/header/account-setting/members-page/invite-modal/index.tsx

           </Listbox>
           <Button
             tabIndex={0}
-            className='w-full text-sm font-medium'
+            className='w-full'
             onClick={handleSend}
             disabled={!emails.length}
             variant='primary'

web/app/components/header/account-setting/members-page/invited-modal/index.tsx

         )}
         <div className='flex justify-end'>
           <Button
-            className='w-[96px] text-sm font-medium'
+            className='w-[96px]'
             onClick={onCancel}
             variant='primary'
           >

web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx

                   {
                     isEditMode && (
                       <Button
-                        className='mr-2 h-9 text-sm font-medium text-[#D92D20]'
+                        size='large'
+                        className='mr-2 text-[#D92D20]'
                         onClick={() => setShowConfirm(true)}
                       >
                         {t('common.operation.remove')}
                     )
                   }
                   <Button
-                    className='mr-2 h-9 text-sm font-medium text-gray-700'
+                    size='large'
+                    className='mr-2'
                     onClick={onCancel}
                   >
                     {t('common.operation.cancel')}
                   </Button>
                   <Button
-                    className='h-9 text-sm font-medium'
+                    size='large'
                     variant='primary'
                     onClick={handleSave}
                     disabled={

web/app/components/header/account-setting/model-provider-page/model-modal/model-load-balancing-entry-modal.tsx

                   {
                     isEditMode && (
                       <Button
-                        className='mr-2 h-9 text-sm font-medium text-[#D92D20]'
+                        size='large'
+                        className='mr-2 text-[#D92D20]'
                         onClick={() => setShowConfirm(true)}
                       >
                         {t('common.operation.remove')}
                     )
                   }
                   <Button
-                    className='mr-2 h-9 text-sm font-medium text-gray-700'
+                    size='large'
+                    className='mr-2'
                     onClick={onCancel}
                   >
                     {t('common.operation.cancel')}
                   </Button>
                   <Button
-                    className='h-9 text-sm font-medium'
+                    size='large'
                     variant='primary'
                     onClick={handleSave}
                     disabled={loading || filteredRequiredFormSchemas.some(item => value[item.variable] === undefined)}

web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx

             </div>
             <div className='flex items-center gap-0.5'>
               <Button
-                className='grow px-0 h-6 bg-white text-xs font-medium rounded-md'
+                className='grow'
+                size='small'
                 onClick={onSetup}
               >
                 <Settings01 className='mr-1 w-3 h-3' />

web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx

           model.fetch_from === ConfigurationMethodEnum.customizableModel
             ? (
               <Button
-                className='hidden group-hover:flex py-0 h-7 text-xs font-medium text-gray-700'
+                className='hidden group-hover:flex h-7'
                 onClick={() => onConfig({ __model_name: model.model, __model_type: model.model_type })}
               >
                 <Settings01 className='mr-[5px] w-3.5 h-3.5' />
             : ((modelLoadBalancingEnabled || plan.type === Plan.sandbox) && !model.deprecated && [ModelStatusEnum.active, ModelStatusEnum.disabled].includes(model.status))
               ? (
                 <Button
-                  className='opacity-0 group-hover:opacity-100 px-3 h-[28px] text-xs text-gray-700 rounded-md transition-opacity'
+                  className='opacity-0 group-hover:opacity-100 h-[28px] transition-opacity'
                   onClick={() => onModifyLoadBalancing?.(model)}
                 >
                   <Balance className='mr-1 w-[14px] h-[14px]' />

web/app/components/header/account-setting/model-provider-page/provider-card/index.tsx

                 return (
                   <Button
                     key={method}
-                    className={'h-7 bg-white text-xs text-gray-700 shrink-0'}
+                    className={'h-7 text-xs shrink-0'}
                     onClick={() => onOpenModal(method)}
                   >
                     <Settings01 className={`mr-[5px] w-3.5 h-3.5 ${s.icon}`} />
               return (
                 <Button
                   key={method}
-                  className='px-0 h-7 bg-white text-xs text-gray-700'
+                  className='px-0 h-7 text-xs'
                   onClick={() => onOpenModal(method)}
                 >
                   <RiAddLine className='mr-[5px] w-3.5 h-3.5' />

web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx

           </div>
           <div className='flex items-center justify-end px-6 py-4'>
             <Button
-              className='mr-2 !h-8 !text-[13px]'
               onClick={() => setOpen(false)}
             >
               {t('common.operation.cancel')}
             </Button>
             <Button
               variant='primary'
-              className='!h-8 !text-[13px]'
               onClick={handleSave}
               disabled={!isCurrentWorkspaceManager}
             >

web/app/components/share/chat/sidebar/index.tsx

       <div className="flex flex-shrink-0 p-4 !pb-0">
         <Button
           onClick={() => onStartChat({})}
-          className="flex group w-full flex-shrink-0 !justify-start !h-9 text-primary-600 items-center text-sm">
+          variant='secondary-accent'
+          className="group w-full flex-shrink-0 justify-start">
           <PencilSquareIcon className="mr-2 h-4 w-4" /> {t('share.chat.newChat')}
         </Button>
       </div>

web/app/components/share/chat/value-panel/index.tsx

   return (
     <div className={cn(className, 'flex mt-3 space-x-2 mobile:ml-0 tablet:ml-[128px] text-sm')}>
       <Button
-        className='text-sm'
         variant='primary'
         onClick={onConfirm}
       >
         {t('common.operation.save')}
       </Button>
       <Button
-        className='text-sm'
         onClick={onCancel}
       >
         {t('common.operation.cancel')}

web/app/components/share/chat/welcome/massive-component.tsx

   return (
     <Button
       variant='primary'
-      className={cn(className, `px-4 inline-flex items-center ${s.customBtn} gap-2`)}
+      className={cn(className, `px-4 ${s.customBtn} gap-2`)}
       onClick={onClick}>
       <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path fillRule="evenodd" clipRule="evenodd" d="M18 10.5C18 14.366 14.418 17.5 10 17.5C8.58005 17.506 7.17955 17.1698 5.917 16.52L2 17.5L3.338 14.377C2.493 13.267 2 11.934 2 10.5C2 6.634 5.582 3.5 10 3.5C14.418 3.5 18 6.634 18 10.5ZM7 9.5H5V11.5H7V9.5ZM15 9.5H13V11.5H15V9.5ZM9 9.5H11V11.5H9V9.5Z" fill="white" />

web/app/components/share/chatbot/sidebar/index.tsx

       <div className="flex flex-shrink-0 p-4 !pb-0">
         <Button
           onClick={() => { onCurrentIdChange('-1') }}
-          className="group flex w-full flex-shrink-0 !justify-start !h-9 text-primary-600 items-center text-sm">
+          variant='secondary-accent'
+          className="group w-full flex-shrink-0">
           <PencilSquareIcon className="mr-2 h-4 w-4" /> {t('share.chat.newChat')}
         </Button>
       </div>

web/app/components/share/chatbot/value-panel/index.tsx

   return (
     <div className={cn(className, 'flex mt-3 space-x-2 mobile:ml-0 tablet:ml-[128px] text-sm')}>
       <Button
-        className='text-sm'
         variant='primary'
         onClick={onConfirm}
       >
         {t('common.operation.save')}
       </Button>
       <Button
-        className='text-sm'
         onClick={onCancel}
       >
         {t('common.operation.cancel')}

web/app/components/share/text-generation/index.tsx

                 <div className='ml-1 text-[#D92D20]'>{t('share.generation.batchFailed.info', { num: allFailedTaskList.length })}</div>
                 <Button
                   variant='primary'
-                  className='ml-2 !h-8 !px-3'
+                  className='ml-2'
                   onClick={handleRetryAllFailedTask}
                 >{t('share.generation.batchFailed.retry')}</Button>
                 <div className='mx-3 w-[1px] h-3.5 bg-gray-200'></div>
               </div>
               {!isPC && (
                 <Button
-                  className='shrink-0 !h-8 !px-3 ml-2'
+                  className='shrink-0 ml-2'
                   onClick={showResSidebar}
                 >
                   <div className='flex items-center space-x-2 text-primary-600 text-[13px] font-medium'>

web/app/components/share/text-generation/result/header.tsx

       <div className='text-gray-800 text-2xl leading-4 font-normal'>{t('share.generation.resultTitle')}</div>
       <div className='flex items-center space-x-2'>
         <Button
-          className='flex items-center !h-7 !p-[2px] !pr-2'
+          className='h-7 p-[2px] pr-2'
           onClick={() => {
             copy(result)
             Toast.notify({ type: 'success', message: 'copied' })

web/app/components/share/text-generation/run-batch/index.tsx

       <div className='flex justify-end'>
         <Button
           variant="primary"
-          className='mt-4 !h-8 !pl-3 !pr-4'
+          className='mt-4 pl-3 pr-4'
           onClick={handleSend}
           disabled={!isParsed || !isAllFinished}
         >

web/app/components/share/text-generation/run-batch/res-download/index.tsx

       }}
       data={values}
     >
-      <Button className={cn('flex items-center !h-8 space-x-2 bg-white !text-[13px] font-medium', isMobile ? '!p-0 !w-8 justify-center' : '!px-3')}>
+      <Button className={cn('space-x-2 bg-white', isMobile ? '!p-0 !w-8 justify-center' : '')}>
         <DownloadIcon className='w-4 h-4 text-[#155EEF]' />
         {!isMobile && <span className='text-[#155EEF]'>{t('common.operation.download')}</span>}
       </Button>

web/app/components/share/text-generation/run-once/index.tsx

           <div className='w-full mt-4'>
             <div className="flex items-center justify-between">
               <Button
-                className='!h-8 !p-3'
                 onClick={onClear}
                 disabled={false}
               >
               </Button>
               <Button
                 variant="primary"
-                className='!h-8 !pl-3 !pr-4'
                 onClick={onSend}
                 disabled={false}
               >

web/app/components/tools/add-tool-modal/index.tsx

             <div className='sticky top-0 left-0 right-0'>
               <div className='sticky top-0 left-0 right-0 px-5 py-3 text-md font-semibold text-gray-900'>{t('tools.addTool')}</div>
               <div className='px-3 pt-2 pb-4'>
-                <Button variant='primary' className='w-[176px] text-[13px] leading-[18px] font-medium' onClick={() => setIsShowEditCustomCollectionModal(true)}>
+                <Button variant='primary' className='w-[176px]' onClick={() => setIsShowEditCustomCollectionModal(true)}>
                   <RiAddLine className='w-4 h-4 mr-1' />
                   {t('tools.createCustomTool')}
                 </Button>

web/app/components/tools/add-tool-modal/tools.tsx

                 )}
                 {!needAuth && !added && addable && (
                   <Button
-                    variant='default'
-                    className={cn('hidden shrink-0 items-center !h-6 px-2 py-1 bg-white text-xs font-medium leading-[18px] text-primary-600 group-hover/item:flex')}
+                    variant='secondary-accent'
+                    size='small'
+                    className={cn('hidden shrink-0 items-center group-hover/item:flex')}
                     onClick={() => onSelect(toolWithProvider, tool)}
                   >
                     <RiAddLine className='w-3 h-3' />
                 )}
                 {needAuth && (
                   <Button
-                    variant='default'
-                    className={cn('hidden shrink-0 items-center !h-6 px-2 py-1 bg-white text-xs font-medium leading-[18px] text-primary-600 group-hover/item:flex')}
+                    variant='secondary-accent'
+                    size='small'
+                    className={cn('hidden shrink-0 group-hover/item:flex')}
                     onClick={() => onAuthSetup(toolWithProvider)}
                   >{t('tools.auth.setup')}</Button>
                 )}

web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx

           </div>
 
           <div className='mt-4 shrink-0 flex justify-end space-x-2 py-4'>
-            <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium !text-gray-700' onClick={onHide}>{t('common.operation.cancel')}</Button>
-            <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium' variant='primary' onClick={() => {
+            <Button onClick={onHide}>{t('common.operation.cancel')}</Button>
+            <Button variant='primary' onClick={() => {
               onChange(tempCredential)
               onHide()
             }}>{t('common.operation.save')}</Button>

web/app/components/tools/edit-custom-collection-modal/get-schema.tsx

     <div className='flex space-x-1 justify-end relative w-[224px]'>
       <div ref={importURLRef}>
         <Button
-          className='flex items-center !h-6 !px-2 space-x-1 '
+          size='small'
+          className='space-x-1 '
           onClick={() => { setShowImportFromUrl(!showImportFromUrl) }}
         >
           <RiAddLine className='w-3 h-3' />
                 onChange={e => setImportUrl(e.target.value)}
               />
               <Button
-                className='absolute top-1 right-1 !h-6 !px-2 text-xs font-medium'
+                className='absolute top-1 right-1'
+                size='small'
                 variant='primary'
                 disabled={!importUrl}
                 onClick={handleImportFromUrl}
       </div>
       <div className='relative' ref={showExamplesRef}>
         <Button
-          className='flex items-center !h-6 !px-2 space-x-1'
+          size='small'
+          className='space-x-1'
           onClick={() => { setShowExamples(!showExamples) }}
         >
           <div className='text-xs font-medium text-gray-700'>{t('tools.createTool.examples')}</div>

web/app/components/tools/edit-custom-collection-modal/index.tsx

                           <td className="p-2 pl-3">{getPath(item.server_url)}</td>
                           <td className="p-2 pl-3 w-[62px]">
                             <Button
-                              className='!h-6 !px-2 text-xs font-medium text-gray-700 whitespace-nowrap'
+                              size='small'
                               onClick={() => {
                                 setCurrTool(item)
                                 setIsShowTestApi(true)
             <div className={cn(isEdit ? 'justify-between' : 'justify-end', 'mt-2 shrink-0 flex py-4 px-6 rounded-b-[10px] bg-gray-50 border-t border-black/5')} >
               {
                 isEdit && (
-                  <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium !text-gray-700' onClick={onRemove}>{t('common.operation.remove')}</Button>
+                  <Button onClick={onRemove}>{t('common.operation.remove')}</Button>
                 )
               }
               <div className='flex space-x-2 '>
-                <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium !text-gray-700 bg-white' onClick={onHide}>{t('common.operation.cancel')}</Button>
-                <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium' variant='primary' onClick={handleSave}>{t('common.operation.save')}</Button>
+                <Button onClick={onHide}>{t('common.operation.cancel')}</Button>
+                <Button variant='primary' onClick={handleSave}>{t('common.operation.save')}</Button>
               </div>
             </div>
           </div>

web/app/components/tools/edit-custom-collection-modal/test-api.tsx

               </div>
 
             </div>
-            <Button variant='primary' className=' mt-4 w-full h-10 !text-[13px] leading-[18px] font-medium' onClick={handleTest}>{t('tools.test.title')}</Button>
+            <Button variant='primary' className=' mt-4 w-full h-10' onClick={handleTest}>{t('tools.test.title')}</Button>
             <div className='mt-6'>
               <div className='flex items-center space-x-3'>
                 <div className='leading-[18px] text-xs font-semibold text-gray-500'>{t('tools.test.testResult')}</div>

web/app/components/tools/provider/detail.tsx

       <div className='flex gap-1 border-b-[0.5px] border-black/5'>
         {(collection.type === CollectionType.builtIn) && needAuth && (
           <Button
-            variant={isAuthed ? 'default' : 'primary'}
-            className={cn('shrink-0 my-3 w-full flex items-center', isAuthed && 'bg-white')}
+            variant={isAuthed ? 'secondary' : 'primary'}
+            className={cn('shrink-0 my-3 w-full', isAuthed && 'bg-white')}
             onClick={() => {
               if (collection.type === CollectionType.builtIn || collection.type === CollectionType.model)
                 showSettingAuthModal()
         )}
         {collection.type === CollectionType.custom && !isDetailLoading && (
           <Button
-            className={cn('shrink-0 my-3 w-full flex items-center bg-white')}
+            className={cn('shrink-0 my-3 w-full')}
             onClick={() => setIsShowEditCustomCollectionModal(true)}
           >
             <Settings01 className='mr-1 w-4 h-4 text-gray-500' />
           <>
             <Button
               variant='primary'
-              className={cn('shrink-0 my-3 w-[183px] flex items-center')}
+              className={cn('shrink-0 my-3 w-[183px]')}
             >
               <a className='flex items-center text-white' href={`/app/${(customCollection as WorkflowToolProviderResponse).workflow_app_id}/workflow`} rel='noreferrer' target='_blank'>
                 <div className='leading-5 text-sm font-medium'>{t('tools.openInStudio')}</div>
               </a>
             </Button>
             <Button
-              className={cn('shrink-0 my-3 w-[183px] flex items-center bg-white')}
+              className={cn('shrink-0 my-3 w-[183px]')}
               onClick={() => setIsShowEditWorkflowToolModal(true)}
               disabled={!isCurrentWorkspaceManager}
             >

web/app/components/tools/setting/build-in/config-credentials.tsx

                 <div className={cn((collection.is_team_authorization && !isHideRemoveBtn) ? 'justify-between' : 'justify-end', 'mt-2 flex ')} >
                   {
                     (collection.is_team_authorization && !isHideRemoveBtn) && (
-                      <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium !text-gray-700' onClick={onRemove}>{t('common.operation.remove')}</Button>
+                      <Button onClick={onRemove}>{t('common.operation.remove')}</Button>
                     )
                   }
                   < div className='flex space-x-2'>
-                    <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium !text-gray-700 bg-white' onClick={onCancel}>{t('common.operation.cancel')}</Button>
-                    <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium' variant='primary' onClick={() => onSaved(tempCredential)}>{t('common.operation.save')}</Button>
+                    <Button onClick={onCancel}>{t('common.operation.cancel')}</Button>
+                    <Button variant='primary' onClick={() => onSaved(tempCredential)}>{t('common.operation.save')}</Button>
                   </div>
                 </div>
               </>

web/app/components/tools/workflow-tool/configure-button.tsx

               <div className='px-2.5 py-2 border-t-[0.5px] border-black/5'>
                 <div className='flex justify-between'>
                   <Button
-                    className='px-2 w-[140px] py-0 h-6 shadow-xs rounded-md text-xs font-medium text-gray-700 border-[0.5px] bg-white border-gray-200'
+                    size='small'
+                    className='w-[140px]'
                     onClick={() => setShowModal(true)}
                     disabled={!isCurrentWorkspaceManager}
                   >
                     {outdated && <Indicator className='ml-1' color={'yellow'} />}
                   </Button>
                   <Button
-                    className='px-2 w-[140px] py-0 h-6 shadow-xs rounded-md text-xs font-medium text-gray-700 border-[0.5px] bg-white border-gray-200'
+                    size='small'
+                    className='w-[140px]'
                     onClick={() => router.push('/tools?category=workflow')}
                   >
                     {t('workflow.common.manageInTools')}

web/app/components/tools/workflow-tool/confirm-modal/index.tsx

       </div>
       <div className='pt-6 flex justify-end items-center'>
         <div className='flex items-center'>
-          <Button className='mr-2 text-gray-700 text-sm font-medium' onClick={onClose}>{t('common.operation.cancel')}</Button>
-          <Button className='text-sm font-medium border-red-700 border-[0.5px]' variant="warning" onClick={onConfirm}>{t('common.operation.confirm')}</Button>
+          <Button className='mr-2' onClick={onClose}>{t('common.operation.cancel')}</Button>
+          <Button className='border-red-700' variant="warning" onClick={onConfirm}>{t('common.operation.confirm')}</Button>
         </div>
       </div>
     </Modal>

web/app/components/tools/workflow-tool/index.tsx

             </div>
             <div className={cn((!isAdd && onRemove) ? 'justify-between' : 'justify-end', 'mt-2 shrink-0 flex py-4 px-6 rounded-b-[10px] bg-gray-50 border-t border-black/5')} >
               {!isAdd && onRemove && (
-                <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium !text-gray-700' onClick={onRemove}>{t('common.operation.remove')}</Button>
+                <Button onClick={onRemove}>{t('common.operation.remove')}</Button>
               )}
               <div className='flex space-x-2 '>
-                <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium !text-gray-700' onClick={onHide}>{t('common.operation.cancel')}</Button>
-                <Button disabled={!label || !name || !isNameValid(name)} className='flex items-center h-8 !px-3 !text-[13px] font-medium' variant='primary' onClick={() => {
+                <Button onClick={onHide}>{t('common.operation.cancel')}</Button>
+                <Button disabled={!label || !name || !isNameValid(name)} variant='primary' onClick={() => {
                   if (isAdd)
                     onConfirm()
                   else

web/app/components/workflow/header/index.tsx

             <RunAndHistory />
             <div className='mx-2 w-[1px] h-3.5 bg-gray-200'></div>
             <Button
-              className={`
-                mr-2 px-3 py-0 h-8 bg-white text-[13px] font-medium text-gray-700
-                border-[0.5px] border-gray-200 shadow-xs
-                ${nodesReadOnly && 'opacity-50 !cursor-not-allowed'}
-              `}
+              className='mr-2'
               onClick={handleShowFeatures}
             >
               <Grid01 className='w-4 h-4 mr-1 text-gray-500' />
             <div className='mx-2 w-[1px] h-3.5 bg-gray-200'></div>
             <Button
               variant='primary'
-              className={`
-                mr-2 px-3 py-0 h-8 text-[13px] font-medium
-                border-[0.5px] border-gray-200 shadow-xs
-              `}
+              className='mr-2'
               onClick={handleGoBackToEdit}
             >
               <ArrowNarrowLeft className='w-4 h-4 mr-1' />
         restoring && (
           <div className='flex items-center'>
             <Button
-              className={`
-                px-3 py-0 h-8 bg-white text-[13px] font-medium text-gray-700
-                border-[0.5px] border-gray-200 shadow-xs
-              `}
               onClick={handleShowFeatures}
             >
               <Grid01 className='w-4 h-4 mr-1 text-gray-500' />
             </Button>
             <div className='mx-2 w-[1px] h-3.5 bg-gray-200'></div>
             <Button
-              className='mr-2 px-3 py-0 h-8 bg-white text-[13px] text-gray-700 font-medium border-[0.5px] border-gray-200 shadow-xs'
+              className='mr-2'
               onClick={handleCancelRestore}
             >
               {t('common.operation.cancel')}
             </Button>
             <Button
-              className='px-3 py-0 h-8 text-[13px] font-medium shadow-xs'
               onClick={handleRestore}
               variant='primary'
             >

web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx

                 <StopCircle className='w-4 h-4 text-gray-500' />
               </div>
             )}
-            <Button disabled={!isFileLoaded || isRunning} variant='primary' className='w-0 grow !h-8 flex items-center space-x-2 text-[13px]' onClick={handleRun}>
+            <Button disabled={!isFileLoaded || isRunning} variant='primary' className='w-0 grow space-x-2' onClick={handleRun}>
               {isRunning && <RiLoader2Line className='animate-spin w-4 h-4 text-white' />}
               <div>{t(`${i18nPrefix}.${isRunning ? 'running' : 'startRun'}`)}</div>
             </Button>

web/app/components/workflow/nodes/_base/components/next-step/item.tsx

   const renderTrigger = useCallback((open: boolean) => {
     return (
       <Button
+        size='small'
         className={`
-          hidden group-hover:flex px-2 py-0 h-6 bg-white text-xs text-gray-700 font-medium rounded-md
+          hidden group-hover:flex
           ${open && '!bg-gray-100 !flex'}
         `}
       >