fix: button (#5470)

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

@@ -140,7 +140,7 @@ const WebSSOForm: FC = () => {
                 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

@@ -109,7 +109,7 @@ const ActivateForm = () => {
             <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>
@@ -196,7 +196,7 @@ const ActivateForm = () => {
               <div>
                 <Button
                   variant='primary'
-                  className='w-full !fone-medium !text-sm'
+                  className='w-full !text-sm'
                   onClick={handleActivate}
                 >
                   {`${t('login.join')} ${checkRes.workspace_name}`}
@@ -226,7 +226,7 @@ const ActivateForm = () => {
             </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

@@ -104,8 +104,8 @@ const AddAnnotationModal: FC<Props> = ({
                   <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

@@ -120,8 +120,8 @@ const EditItem: FC<Props> = ({
                 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

@@ -5,7 +5,6 @@ import {
 } 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'
@@ -120,10 +119,8 @@ const AppPublisher = ({
       <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' />
@@ -143,9 +140,10 @@ const AppPublisher = ({
                   </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}
                   >
@@ -169,10 +167,7 @@ const AppPublisher = ({
               : (
                 <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

@@ -70,7 +70,7 @@ const PublishWithMultipleModel: FC<PublishWithMultipleModelProps> = ({
         <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

@@ -20,7 +20,7 @@ const FormattingChanged: FC<IFormattingChangedProps> = ({
       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

@@ -28,7 +28,7 @@ const FormattingChanged: FC<IFormattingChangedProps> = ({
       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

@@ -28,7 +28,7 @@ const HasNotSetAPI: FC<IHasNotSetAPIProps> = ({
       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

@@ -62,8 +62,8 @@ const ConfirmAddVar: FC<IConfirmAddVarProps> = ({
           </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

@@ -25,7 +25,7 @@ const AgentSettingButton: FC<Props> = ({
 
   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

@@ -137,13 +137,12 @@ const AgentSetting: FC<Props> = ({
         >
           <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

@@ -154,7 +154,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
 
             <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

@@ -16,7 +16,7 @@ const ContrlBtnGroup: FC<IContrlBtnGroupProps> = ({ onSave, onReset }) => {
     <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

@@ -155,8 +155,8 @@ const SelectDataSet: FC<ISelectDataSetProps> = ({
             {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

@@ -275,13 +275,12 @@ const SettingsModal: FC<SettingsModalProps> = ({
       >
         <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

@@ -399,10 +399,7 @@ const Debug: FC<IDebug> = ({
                 ? (
                   <>
                     <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}
                     >
@@ -415,7 +412,7 @@ const Debug: FC<IDebug> = ({
                 : 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

@@ -134,8 +134,20 @@ const OpeningStatement: FC<IOpeningStatementProps> = ({
   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

@@ -198,7 +198,6 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
             <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

@@ -123,11 +123,10 @@ const ConfigParamModal: FC<Props> = ({
       </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

@@ -354,13 +354,12 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
       <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

@@ -271,13 +271,12 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
       <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

@@ -292,7 +292,7 @@ const CreateAppModal = ({ show, onSuccess, onClose }: CreateAppDialogProps) => {
       <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)}
@@ -304,8 +304,8 @@ const CreateAppModal = ({ show, onSuccess, onClose }: CreateAppDialogProps) => {
         </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

@@ -92,8 +92,8 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose }: CreateFromDSLModalProp
       />
       {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

@@ -113,7 +113,7 @@ const Uploader: FC<Props> = ({
               <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

@@ -221,7 +221,7 @@ function AppCard({
                 : !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

@@ -63,7 +63,7 @@ const CustomizeModal: FC<IShareLinkProps> = ({
           <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>
@@ -73,7 +73,7 @@ const CustomizeModal: FC<IShareLinkProps> = ({
           <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>
@@ -98,7 +98,7 @@ const CustomizeModal: FC<IShareLinkProps> = ({
       <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

@@ -182,8 +182,8 @@ const SettingsModal: FC<ISettingsModalProps> = ({
           />
         </>}
         <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

@@ -132,8 +132,8 @@ const SwitchAppModal = ({ show, appDetail, inAppDetail = false, onSuccess, onClo
             <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

@@ -36,7 +36,7 @@ const NoData: FC<INoDataProps> = ({
         {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

@@ -1,31 +1,43 @@
 @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

@@ -4,18 +4,25 @@ import classNames from 'classnames'
 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',
     },
   },
 )
@@ -25,11 +32,11 @@ export type ButtonProps = {
 } & 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

@@ -67,7 +67,9 @@ const ConfigPanel = () => {
                   {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' />
@@ -94,7 +96,7 @@ const ConfigPanel = () => {
               <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()
@@ -103,7 +105,6 @@ const ConfigPanel = () => {
                   {t('common.operation.save')}
                 </Button>
                 <Button
-                  className='text-sm font-medium'
                   onClick={() => setCollapsed(true)}
                 >
                   {t('common.operation.cancel')}
@@ -117,8 +118,9 @@ const ConfigPanel = () => {
             <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

@@ -78,7 +78,8 @@ const Sidebar = () => {
       }
       <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

@@ -239,7 +239,7 @@ const Chat: FC<ChatProps> = ({
             {
               !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

@@ -40,7 +40,8 @@ const TryToAsk: FC<TryToAskProps> = ({
           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

@@ -68,7 +68,9 @@ const ConfigPanel = () => {
                   {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' />
@@ -95,7 +97,7 @@ const ConfigPanel = () => {
               <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()
@@ -104,7 +106,6 @@ const ConfigPanel = () => {
                   {t('common.operation.save')}
                 </Button>
                 <Button
-                  className='text-sm font-medium'
                   onClick={() => setCollapsed(true)}
                 >
                   {t('common.operation.cancel')}
@@ -118,8 +119,9 @@ const ConfigPanel = () => {
             <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

@@ -42,8 +42,8 @@ const ConfirmUI: FC<IConfirmUIProps> = ({
       </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

@@ -71,7 +71,7 @@ const ConfirmCommon: FC<ConfirmCommonProps> = ({
               {
                 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

@@ -189,7 +189,7 @@ const EmojiPicker: FC<IEmojiPickerProps> = ({
     </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

@@ -24,8 +24,7 @@ const ChooseFeature = ({
     <>
       <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

@@ -357,13 +357,12 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
       <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

@@ -171,8 +171,14 @@ const OpeningStatement: FC<OpeningStatementProps> = ({
   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

@@ -43,7 +43,7 @@ const ImageLinkInput: FC<ImageLinkInputProps> = ({
       />
       <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

@@ -54,7 +54,7 @@ const DeleteConfirmModal: FC<Props> = ({
           <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

@@ -39,8 +39,8 @@ const TagRemoveModal = ({ show, tag, onConfirm, onClose }: TagRemoveModalProps)
         {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

@@ -42,10 +42,6 @@ const CustomAppHeaderBrand = () => {
       </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' />
@@ -53,10 +49,6 @@ const CustomAppHeaderBrand = () => {
         </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

@@ -154,8 +154,7 @@ const CustomWebAppBrand = () => {
             !uploading && (
               <Button
                 className={`
-                  relative mr-2 !h-8 !px-3 bg-white !text-[13px]
-                  ${uploadDisabled ? 'opacity-40' : ''}
+                  relative mr-2
                 `}
                 disabled={uploadDisabled}
               >
@@ -182,7 +181,7 @@ const CustomWebAppBrand = () => {
           {
             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' />
@@ -195,14 +194,14 @@ const CustomWebAppBrand = () => {
               <>
                 <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}
                 >
@@ -213,10 +212,6 @@ const CustomWebAppBrand = () => {
           }
           <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

@@ -658,8 +658,8 @@ const StepTwo = ({
                     </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>
               )}
@@ -913,7 +913,7 @@ const StepTwo = ({
               <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

@@ -37,7 +37,7 @@ const UrlInput: FC<Props> = ({
       <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

@@ -27,7 +27,7 @@ const NoData: FC<Props> = ({
           {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

@@ -112,7 +112,7 @@ const CSVUploader: FC<Props> = ({
               <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

@@ -52,10 +52,10 @@ const BatchModal: FC<IBatchModalProps> = ({
         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

@@ -230,7 +230,7 @@ const SegmentCard: FC<ISegmentCardProps> = ({
               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

@@ -137,13 +137,11 @@ const SegmentDetailComponent: FC<ISegmentDetailProps> = ({
         {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

@@ -137,13 +137,11 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
         </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

@@ -210,7 +210,7 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
           <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

@@ -306,7 +306,7 @@ export const OperationAction: FC<{
           <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

@@ -95,8 +95,8 @@ const RenameDatasetModal = ({ show, dataset, onSuccess, onClose }: RenameDataset
         </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

@@ -243,7 +243,7 @@ const Form = () => {
           <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

@@ -17,7 +17,7 @@ const SecretKeyButton = ({ className, appId, iconCls, textCls }: ISecretKeyButto
   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

@@ -29,7 +29,7 @@ const SecretKeyGenerateModal = ({
         <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

@@ -143,7 +143,7 @@ const SecretKeyModal = ({
         )
       }
       <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

@@ -62,7 +62,7 @@ const AppCard = ({
       {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>
@@ -72,7 +72,7 @@ const AppCard = ({
       {!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

@@ -150,7 +150,7 @@ export default function AccountPage() {
         <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' />
@@ -165,7 +165,7 @@ export default function AccountPage() {
             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
@@ -181,11 +181,10 @@ export default function AccountPage() {
             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')}
@@ -231,14 +230,13 @@ export default function AccountPage() {
             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')}
@@ -268,7 +266,7 @@ export default function AccountPage() {
           </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

@@ -130,13 +130,12 @@ const ApiBasedExtensionModal: FC<ApiBasedExtensionModalProps> = ({
       <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

@@ -123,14 +123,15 @@ const ConfigFirecrawlModal: FC<Props> = ({
                 </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

@@ -148,7 +148,7 @@ const InviteModal = ({
           </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

@@ -83,7 +83,7 @@ const InvitedModal = ({
         )}
         <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

@@ -326,7 +326,8 @@ const ModelModal: FC<ModelModalProps> = ({
                   {
                     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')}
@@ -334,13 +335,14 @@ const ModelModal: FC<ModelModalProps> = ({
                     )
                   }
                   <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

@@ -276,7 +276,8 @@ const ModelLoadBalancingEntryModal: FC<ModelModalProps> = ({
                   {
                     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')}
@@ -284,13 +285,14 @@ const ModelLoadBalancingEntryModal: FC<ModelModalProps> = ({
                     )
                   }
                   <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

@@ -73,7 +73,8 @@ const CredentialPanel: FC<CredentialPanelProps> = ({
             </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

@@ -75,7 +75,7 @@ const ModelListItem = ({ model, provider, isConfigurable, onConfig, onModifyLoad
           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' />
@@ -85,7 +85,7 @@ const ModelListItem = ({ model, provider, isConfigurable, onConfig, onModifyLoad
             : ((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

@@ -65,7 +65,7 @@ const ProviderCard: FC<ProviderCardProps> = ({
                 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}`} />
@@ -76,7 +76,7 @@ const ProviderCard: FC<ProviderCardProps> = ({
               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

@@ -244,14 +244,12 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
           </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

@@ -105,7 +105,8 @@ const Sidebar: FC<ISidebarProps> = ({
       <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

@@ -60,14 +60,12 @@ export const VarOpBtnGroup: FC<{ className?: string; onConfirm: () => void; onCa
   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

@@ -45,7 +45,7 @@ export const ChatBtn: FC<{ onClick: () => void; className?: string }> = ({
   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

@@ -92,7 +92,8 @@ const Sidebar: FC<ISidebarProps> = ({
       <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

@@ -60,14 +60,12 @@ export const VarOpBtnGroup: FC<{ className?: string; onConfirm: () => void; onCa
   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

@@ -482,7 +482,7 @@ const TextGeneration: FC<IMainProps> = ({
                 <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>
@@ -545,7 +545,7 @@ const TextGeneration: FC<IMainProps> = ({
               </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

@@ -28,7 +28,7 @@ const Header: FC<IResultHeaderProps> = ({
       <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

@@ -45,7 +45,7 @@ const RunBatch: FC<IRunBatchProps> = ({
       <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

@@ -31,7 +31,7 @@ const ResDownload: FC<IResDownloadProps> = ({
       }}
       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

@@ -118,7 +118,6 @@ const RunOnce: FC<IRunOnceProps> = ({
           <div className='w-full mt-4'>
             <div className="flex items-center justify-between">
               <Button
-                className='!h-8 !p-3'
                 onClick={onClear}
                 disabled={false}
               >
@@ -126,7 +125,6 @@ const RunOnce: FC<IRunOnceProps> = ({
               </Button>
               <Button
                 variant="primary"
-                className='!h-8 !pl-3 !pr-4'
                 onClick={onSend}
                 disabled={false}
               >

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

@@ -177,7 +177,7 @@ const AddToolModal: FC<Props> = ({
             <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

@@ -108,8 +108,9 @@ const Blocks = ({
                 )}
                 {!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' />
@@ -118,8 +119,9 @@ const Blocks = ({
                 )}
                 {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

@@ -143,8 +143,8 @@ const ConfigCredential: FC<Props> = ({
           </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

@@ -58,7 +58,8 @@ const GetSchema: FC<Props> = ({
     <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' />
@@ -75,7 +76,8 @@ const GetSchema: FC<Props> = ({
                 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}
@@ -89,7 +91,8 @@ const GetSchema: FC<Props> = ({
       </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

@@ -240,7 +240,7 @@ const EditCustomCollectionModal: FC<Props> = ({
                           <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)
@@ -302,12 +302,12 @@ const EditCustomCollectionModal: FC<Props> = ({
             <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

@@ -107,7 +107,7 @@ const TestApi: FC<Props> = ({
               </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

@@ -217,8 +217,8 @@ const ProviderDetail = ({
       <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()
@@ -233,7 +233,7 @@ const ProviderDetail = ({
         )}
         {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' />
@@ -244,7 +244,7 @@ const ProviderDetail = ({
           <>
             <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>
@@ -252,7 +252,7 @@ const ProviderDetail = ({
               </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

@@ -86,12 +86,12 @@ const ConfigCredential: FC<Props> = ({
                 <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

@@ -201,7 +201,8 @@ const WorkflowToolConfigureButton = ({
               <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}
                   >
@@ -209,7 +210,8 @@ const WorkflowToolConfigureButton = ({
                     {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

@@ -35,8 +35,8 @@ const ConfirmModal = ({ show, onConfirm, onClose }: ConfirmModalProps) => {
       </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

@@ -244,11 +244,11 @@ const WorkflowToolAsModal: FC<Props> = ({
             </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

@@ -171,11 +171,7 @@ const Header: FC = () => {
             <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' />
@@ -207,10 +203,7 @@ const Header: FC = () => {
             <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' />
@@ -223,10 +216,6 @@ const Header: FC = () => {
         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' />
@@ -234,13 +223,12 @@ const Header: FC = () => {
             </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

@@ -144,7 +144,7 @@ const BeforeRunForm: FC<BeforeRunFormProps> = ({
                 <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

@@ -45,8 +45,9 @@ const Item = ({
   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'}
         `}
       >

web/app/components/workflow/nodes/http/components/authorization/index.tsx

@@ -139,8 +139,8 @@ const Authorization: FC<Props> = ({
           )}
         </div>
         <div className='mt-6 flex justify-end space-x-2'>
-          <Button onClick={onHide} className='flex items-center !h-8 leading-[18px] !text-[13px] !font-medium'>{t('common.operation.cancel')}</Button>
-          <Button variant='primary' onClick={handleConfirm} className='flex items-center !h-8 leading-[18px] !text-[13px] !font-medium'>{t('common.operation.save')}</Button>
+          <Button onClick={onHide}>{t('common.operation.cancel')}</Button>
+          <Button variant='primary' onClick={handleConfirm}>{t('common.operation.save')}</Button>
         </div>
       </div>
     </Modal>