diff --git a/web/app/(shareLayout)/webapp-signin/page.tsx b/web/app/(shareLayout)/webapp-signin/page.tsx
index 5306854638..abfdeaa6e3 100644
--- a/web/app/(shareLayout)/webapp-signin/page.tsx
+++ b/web/app/(shareLayout)/webapp-signin/page.tsx
@@ -137,7 +137,7 @@ const WebSSOForm: FC = () => {
             <div className="w-full mx-auto mt-10">
               <Button
                 tabIndex={0}
-                type='primary'
+                variant='primary'
                 onClick={() => { handleSSOLogin() }}
                 disabled={isLoading}
                 className="w-full !fone-medium !text-sm"
diff --git a/web/app/activate/activateForm.tsx b/web/app/activate/activateForm.tsx
index 709fe4ce2a..543e0de0cd 100644
--- a/web/app/activate/activateForm.tsx
+++ b/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 type='primary' className='w-full !fone-medium !text-sm'>
+            <Button variant='primary' className='w-full !fone-medium !text-sm'>
               <a href="https://dify.ai">{t('login.explore')}</a>
             </Button>
           </div>
@@ -195,7 +195,7 @@ const ActivateForm = () => {
               </div>
               <div>
                 <Button
-                  type='primary'
+                  variant='primary'
                   className='w-full !fone-medium !text-sm'
                   onClick={handleActivate}
                 >
@@ -226,7 +226,7 @@ const ActivateForm = () => {
             </h2>
           </div>
           <div className="w-full mx-auto mt-6">
-            <Button type='primary' className='w-full !fone-medium !text-sm'>
+            <Button variant='primary' className='w-full !fone-medium !text-sm'>
               <a href="/signin">{t('login.activated')}</a>
             </Button>
           </div>
diff --git a/web/app/components/app/annotation/add-annotation-modal/index.tsx b/web/app/components/app/annotation/add-annotation-modal/index.tsx
index e07eaffe87..261593c00d 100644
--- a/web/app/components/app/annotation/add-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/add-annotation-modal/index.tsx
@@ -105,7 +105,7 @@ const AddAnnotationModal: FC<Props> = ({
                 </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' type='primary' onClick={handleSave} loading={isSaving} disabled={isAnnotationFull}>{t('common.operation.add')}</Button>
+                  <Button className='!h-7 !text-xs !font-medium' variant='primary' onClick={handleSave} loading={isSaving} disabled={isAnnotationFull}>{t('common.operation.add')}</Button>
                 </div>
               </div>
             </div>
diff --git a/web/app/components/app/annotation/batch-add-annotation-modal/index.tsx b/web/app/components/app/annotation/batch-add-annotation-modal/index.tsx
index 2faae8c45e..db5aab5251 100644
--- a/web/app/components/app/annotation/batch-add-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/batch-add-annotation-modal/index.tsx
@@ -110,7 +110,7 @@ const BatchModal: FC<IBatchModalProps> = ({
         </Button>
         <Button
           className='text-sm font-medium'
-          type="primary"
+          variant="primary"
           onClick={handleSend}
           disabled={isAnnotationFull || !currentCSV}
           loading={importStatus === ProcessStatus.PROCESSING || importStatus === ProcessStatus.WAITING}
diff --git a/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx b/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx
index b58ae93a62..4d8cf98312 100644
--- a/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx
+++ b/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx
@@ -119,7 +119,7 @@ const EditItem: FC<Props> = ({
                 autoFocus
               />
               <div className='mt-2 flex space-x-2'>
-                <Button className='!h-7 !text-xs !font-medium' type='primary' onClick={handleSave}>{t('common.operation.save')}</Button>
+                <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>
               </div>
             </div>
diff --git a/web/app/components/app/annotation/header-opts/index.tsx b/web/app/components/app/annotation/header-opts/index.tsx
index 18cc0a0f9c..9573b052f3 100644
--- a/web/app/components/app/annotation/header-opts/index.tsx
+++ b/web/app/components/app/annotation/header-opts/index.tsx
@@ -135,7 +135,7 @@ const HeaderOptions: FC<Props> = ({
 
   return (
     <div className='flex space-x-2'>
-      <Button type='primary' onClick={() => setShowAddModal(true)} className='flex items-center !h-8 !px-3 !text-[13px] space-x-2'>
+      <Button variant='primary' onClick={() => setShowAddModal(true)} className='flex items-center !h-8 !px-3 !text-[13px] space-x-2'>
         <Plus className='w-4 h-4' />
         <div>{t('appAnnotation.table.header.addAnnotation')}</div>
       </Button>
diff --git a/web/app/components/app/app-publisher/index.tsx b/web/app/components/app/app-publisher/index.tsx
index da7f9b56a2..29b556705b 100644
--- a/web/app/components/app/app-publisher/index.tsx
+++ b/web/app/components/app/app-publisher/index.tsx
@@ -119,7 +119,7 @@ const AppPublisher = ({
     >
       <PortalToFollowElemTrigger onClick={handleTrigger}>
         <Button
-          type='primary'
+          variant='primary'
           className={`
             pl-3 pr-2 py-0 h-8 text-[13px] font-medium
             ${disabled && 'cursor-not-allowed opacity-50'}
@@ -168,7 +168,7 @@ const AppPublisher = ({
               )
               : (
                 <Button
-                  type='primary'
+                  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',
diff --git a/web/app/components/app/app-publisher/publish-with-multiple-model.tsx b/web/app/components/app/app-publisher/publish-with-multiple-model.tsx
index 3396aab5d6..2953e1bea6 100644
--- a/web/app/components/app/app-publisher/publish-with-multiple-model.tsx
+++ b/web/app/components/app/app-publisher/publish-with-multiple-model.tsx
@@ -68,7 +68,7 @@ const PublishWithMultipleModel: FC<PublishWithMultipleModelProps> = ({
     >
       <PortalToFollowElemTrigger className='w-full' onClick={handleToggle}>
         <Button
-          type='primary'
+          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'
         >
diff --git a/web/app/components/app/configuration/base/warning-mask/cannot-query-dataset.tsx b/web/app/components/app/configuration/base/warning-mask/cannot-query-dataset.tsx
index fa00cfc668..ff9b7eaee7 100644
--- a/web/app/components/app/configuration/base/warning-mask/cannot-query-dataset.tsx
+++ b/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 type='primary' className='flex items-center justify-start !h-8 !w-[96px]' onClick={onConfirm}>
+          <Button variant='primary' className='flex items-center justify-start !h-8 !w-[96px]' onClick={onConfirm}>
             <span className='text-[13px] font-medium'>{t('appDebug.feature.dataSet.queryVariable.ok')}</span>
           </Button>
         </div>
diff --git a/web/app/components/app/configuration/base/warning-mask/formatting-changed.tsx b/web/app/components/app/configuration/base/warning-mask/formatting-changed.tsx
index 421e4ba59e..50e05310c8 100644
--- a/web/app/components/app/configuration/base/warning-mask/formatting-changed.tsx
+++ b/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 type='primary' className='flex items-center space-x-2' onClick={onConfirm}>
+          <Button variant='primary' className='flex items-center space-x-2' onClick={onConfirm}>
             {icon}
             <span>{t('common.operation.refresh')}</span>
           </Button>
diff --git a/web/app/components/app/configuration/base/warning-mask/has-not-set-api.tsx b/web/app/components/app/configuration/base/warning-mask/has-not-set-api.tsx
index 80a9cc955b..67ed4250cf 100644
--- a/web/app/components/app/configuration/base/warning-mask/has-not-set-api.tsx
+++ b/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 type='primary' className='flex items-center space-x-2' onClick={onSetting}>
+        <Button variant='primary' className='flex items-center space-x-2' onClick={onSetting}>
           <span>{t('appDebug.notSetAPIKey.settingBtn')}</span>
           {icon}
         </Button>}
diff --git a/web/app/components/app/configuration/config-prompt/confirm-add-var/index.tsx b/web/app/components/app/configuration/config-prompt/confirm-add-var/index.tsx
index 47a9ca11cb..38974c23dd 100644
--- a/web/app/components/app/configuration/config-prompt/confirm-add-var/index.tsx
+++ b/web/app/components/app/configuration/config-prompt/confirm-add-var/index.tsx
@@ -63,7 +63,7 @@ const ConfirmAddVar: FC<IConfirmAddVarProps> = ({
         </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]' type='primary' onClick={onConfrim}>{t('common.operation.add')}</Button>
+          <Button className='w-20 h-8 !text-[13px]' variant='primary' onClick={onConfrim}>{t('common.operation.add')}</Button>
         </div>
       </div>
 
diff --git a/web/app/components/app/configuration/config-prompt/conversation-histroy/edit-modal.tsx b/web/app/components/app/configuration/config-prompt/conversation-histroy/edit-modal.tsx
index 226732d03d..87b811f637 100644
--- a/web/app/components/app/configuration/config-prompt/conversation-histroy/edit-modal.tsx
+++ b/web/app/components/app/configuration/config-prompt/conversation-histroy/edit-modal.tsx
@@ -49,7 +49,7 @@ const EditModal: FC<Props> = ({
 
       <div className='mt-10 flex justify-end'>
         <Button className='mr-2 flex-shrink-0' onClick={onClose}>{t('common.operation.cancel')}</Button>
-        <Button type='primary' className='flex-shrink-0' onClick={() => onSave(tempData)} loading={saveLoading}>{t('common.operation.save')}</Button>
+        <Button variant='primary' className='flex-shrink-0' onClick={() => onSave(tempData)} loading={saveLoading}>{t('common.operation.save')}</Button>
       </div>
     </Modal>
   )
diff --git a/web/app/components/app/configuration/config-var/modal-foot.tsx b/web/app/components/app/configuration/config-var/modal-foot.tsx
index 71efcadb25..a73ebe4141 100644
--- a/web/app/components/app/configuration/config-var/modal-foot.tsx
+++ b/web/app/components/app/configuration/config-var/modal-foot.tsx
@@ -17,7 +17,7 @@ const ModalFoot: FC<IModalFootProps> = ({
   return (
     <div className='flex justify-end gap-2'>
       <Button onClick={onCancel}>{t('common.operation.cancel')}</Button>
-      <Button type='primary' onClick={onConfirm}>{t('common.operation.save')}</Button>
+      <Button variant='primary' onClick={onConfirm}>{t('common.operation.save')}</Button>
     </div>
   )
 }
diff --git a/web/app/components/app/configuration/config/agent/agent-setting/index.tsx b/web/app/components/app/configuration/config/agent/agent-setting/index.tsx
index 8e7ecbacdb..2aad4421f6 100644
--- a/web/app/components/app/configuration/config/agent/agent-setting/index.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-setting/index.tsx
@@ -142,7 +142,7 @@ const AgentSetting: FC<Props> = ({
             {t('common.operation.cancel')}
           </Button>
           <Button
-            type='primary'
+            variant='primary'
             className='text-sm font-medium'
             onClick={handleSave}
           >
diff --git a/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx b/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
index a348e44256..fa7f1f98a9 100644
--- a/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
@@ -209,7 +209,7 @@ const SettingBuiltInTool: FC<Props> = ({
               {!readonly && !isInfoActive && (
                 <div className='mt-2 shrink-0 flex justify-end py-4 px-6  space-x-2 rounded-b-[10px] bg-gray-50 border-t border-black/5'>
                   <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' type='primary' disabled={!isValid} onClick={() => onSave?.(addDefaultValue(tempSetting, formSchemas))}>{t('common.operation.save')}</Button>
+                  <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium' variant='primary' disabled={!isValid} onClick={() => onSave?.(addDefaultValue(tempSetting, formSchemas))}>{t('common.operation.save')}</Button>
                 </div>
               )}
             </div>)}
diff --git a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
index b3f2a909e7..f17b7a4428 100644
--- a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
+++ b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
@@ -155,7 +155,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
             <div className='mt-6 flex justify-end'>
               <Button
                 className='flex space-x-2 items-center !h-8'
-                type='primary'
+                variant='primary'
                 onClick={onGenerate}
                 disabled={isLoading}
               >
@@ -198,7 +198,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
 
             <div className='sticky bottom-0 flex justify-end right-0 py-4 bg-white'>
               <Button onClick={onClose}>{t('common.operation.cancel')}</Button>
-              <Button type='primary' className='ml-2' onClick={() => {
+              <Button variant='primary' className='ml-2' onClick={() => {
                 setShowConfirmOverwrite(true)
               }}>{t('appDebug.automatic.apply')}</Button>
             </div>
diff --git a/web/app/components/app/configuration/ctrl-btn-group/index.tsx b/web/app/components/app/configuration/ctrl-btn-group/index.tsx
index d7b5d49b0e..298ca4ea57 100644
--- a/web/app/components/app/configuration/ctrl-btn-group/index.tsx
+++ b/web/app/components/app/configuration/ctrl-btn-group/index.tsx
@@ -15,8 +15,8 @@ const ContrlBtnGroup: FC<IContrlBtnGroupProps> = ({ onSave, onReset }) => {
   return (
     <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 type='primary' onClick={onSave}>{t('appDebug.operation.applyConfig')}</Button>
-        <Button type='default' onClick={onReset}>{t('appDebug.operation.resetConfig')}</Button>
+        <Button variant='primary' onClick={onSave}>{t('appDebug.operation.applyConfig')}</Button>
+        <Button variant='default' onClick={onReset}>{t('appDebug.operation.resetConfig')}</Button>
       </div>
     </div>
   )
diff --git a/web/app/components/app/configuration/dataset-config/params-config/index.tsx b/web/app/components/app/configuration/dataset-config/params-config/index.tsx
index 9d9eac2a66..708b2d687d 100644
--- a/web/app/components/app/configuration/dataset-config/params-config/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/params-config/index.tsx
@@ -95,7 +95,7 @@ const ParamsConfig: FC = () => {
               <Button className='mr-2 flex-shrink-0' onClick={() => {
                 setOpen(false)
               }}>{t('common.operation.cancel')}</Button>
-              <Button type='primary' className='flex-shrink-0' onClick={handleSave} >{t('common.operation.save')}</Button>
+              <Button variant='primary' className='flex-shrink-0' onClick={handleSave} >{t('common.operation.save')}</Button>
             </div>
           </Modal>
         )
diff --git a/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx b/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx
index 1bcc742317..51e5b383c4 100644
--- a/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx
@@ -156,7 +156,7 @@ const SelectDataSet: FC<ISelectDataSetProps> = ({
           </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' type='primary' onClick={handleSelect} disabled={hasNoData}>{t('common.operation.add')}</Button>
+            <Button className='!w-24 !h-9' variant='primary' onClick={handleSelect} disabled={hasNoData}>{t('common.operation.add')}</Button>
           </div>
         </div>
       )}
diff --git a/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx b/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
index 64d099dc70..d4c3bcb013 100644
--- a/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
@@ -280,7 +280,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
           {t('common.operation.cancel')}
         </Button>
         <Button
-          type='primary'
+          variant='primary'
           className='text-sm font-medium'
           disabled={loading}
           onClick={handleSave}
diff --git a/web/app/components/app/configuration/features/chat-group/opening-statement/index.tsx b/web/app/components/app/configuration/features/chat-group/opening-statement/index.tsx
index f7933ee396..253ae93c30 100644
--- a/web/app/components/app/configuration/features/chat-group/opening-statement/index.tsx
+++ b/web/app/components/app/configuration/features/chat-group/opening-statement/index.tsx
@@ -132,7 +132,7 @@ const OpeningStatement: FC<IOpeningStatementProps> = ({
     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} type="primary">{t('common.operation.save')}</Button>
+        <Button className='!h-8 !px-3 text-xs' onClick={handleConfirm} variant="primary">{t('common.operation.save')}</Button>
       </div>
     ) : (
       <OperationBtn type='edit' actionName={hasValue ? '' : t('appDebug.openingStatement.writeOpener') as string} onClick={handleEdit} />
diff --git a/web/app/components/app/configuration/prompt-value-panel/index.tsx b/web/app/components/app/configuration/prompt-value-panel/index.tsx
index 6ec36ebb04..52409b4b5f 100644
--- a/web/app/components/app/configuration/prompt-value-panel/index.tsx
+++ b/web/app/components/app/configuration/prompt-value-panel/index.tsx
@@ -62,7 +62,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
   const renderRunButton = () => {
     return (
       <Button
-        type="primary"
+        variant="primary"
         disabled={canNotRun}
         onClick={() => onSend && onSend()}
         className="w-[80px] !h-8">
diff --git a/web/app/components/app/configuration/toolbox/annotation/config-param-modal.tsx b/web/app/components/app/configuration/toolbox/annotation/config-param-modal.tsx
index ab93ce6f85..8882fa1786 100644
--- a/web/app/components/app/configuration/toolbox/annotation/config-param-modal.tsx
+++ b/web/app/components/app/configuration/toolbox/annotation/config-param-modal.tsx
@@ -125,7 +125,7 @@ const ConfigParamModal: FC<Props> = ({
       <div className='mt-6 flex gap-2 justify-end'>
         <Button className='!text-sm' onClick={onHide}>{t('common.operation.cancel')}</Button>
         <Button
-          type='primary'
+          variant='primary'
           onClick={handleSave}
           className='flex items-center border-[0.5px] !text-sm'
           loading={isLoading}
diff --git a/web/app/components/app/configuration/toolbox/moderation/moderation-setting-modal.tsx b/web/app/components/app/configuration/toolbox/moderation/moderation-setting-modal.tsx
index 5bc52e5564..66d0a0ef68 100644
--- a/web/app/components/app/configuration/toolbox/moderation/moderation-setting-modal.tsx
+++ b/web/app/components/app/configuration/toolbox/moderation/moderation-setting-modal.tsx
@@ -259,7 +259,7 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
                 onClick={() => handleDataTypeChange(provider.key)}
               >
                 <div className={`
-                  mr-2 w-4 h-4 rounded-full border 
+                  mr-2 w-4 h-4 rounded-full border
                   ${localeData.type === provider.key ? 'border-[5px] border-primary-600' : 'border border-gray-300'}`} />
                 {provider.name}
               </div>
@@ -359,7 +359,7 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
           {t('common.operation.cancel')}
         </Button>
         <Button
-          type='primary'
+          variant='primary'
           className='text-sm font-medium'
           onClick={handleSave}
           disabled={localeData.type === 'openai_moderation' && !openaiProviderConfiged}
diff --git a/web/app/components/app/configuration/tools/external-data-tool-modal.tsx b/web/app/components/app/configuration/tools/external-data-tool-modal.tsx
index da68ad93ea..59da0f51ef 100644
--- a/web/app/components/app/configuration/tools/external-data-tool-modal.tsx
+++ b/web/app/components/app/configuration/tools/external-data-tool-modal.tsx
@@ -276,7 +276,7 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
           {t('common.operation.cancel')}
         </Button>
         <Button
-          type='primary'
+          variant='primary'
           className='text-sm font-medium'
           onClick={handleSave}
         >
diff --git a/web/app/components/app/create-app-modal/index.tsx b/web/app/components/app/create-app-modal/index.tsx
index 8973958de4..05a473b8e5 100644
--- a/web/app/components/app/create-app-modal/index.tsx
+++ b/web/app/components/app/create-app-modal/index.tsx
@@ -85,7 +85,7 @@ const CreateAppModal = ({ show, onSuccess, onClose }: CreateAppDialogProps) => {
       overflowVisible
       className='!p-0 !max-w-[720px] !w-[720px] rounded-xl'
       isShow={show}
-      onClose={() => {}}
+      onClose={() => { }}
     >
       {/* Heading */}
       <div className='shrink-0 flex flex-col h-full bg-white rounded-t-xl'>
@@ -208,7 +208,7 @@ const CreateAppModal = ({ show, onSuccess, onClose }: CreateAppDialogProps) => {
                       'hidden z-20 absolute left-[327px] top-[-158px] w-[376px] rounded-xl bg-white border-[0.5px] border-[rgba(0,0,0,0.05)] shadow-lg group-hover:block',
                     )}
                   >
-                    <div className={cn('w-full h-[256px] bg-center bg-no-repeat bg-contain rounded-xl', s.basicPic)}/>
+                    <div className={cn('w-full h-[256px] bg-center bg-no-repeat bg-contain rounded-xl', s.basicPic)} />
                     <div className='px-4 pb-2'>
                       <div className='flex items-center justify-between'>
                         <div className='text-gray-700 text-md leading-6 font-semibold'>{t('app.newApp.basic')}</div>
@@ -242,7 +242,7 @@ const CreateAppModal = ({ show, onSuccess, onClose }: CreateAppDialogProps) => {
                       'hidden z-20 absolute right-[26px] top-[-158px] w-[376px] rounded-xl bg-white border-[0.5px] border-[rgba(0,0,0,0.05)] shadow-lg group-hover:block',
                     )}
                   >
-                    <div className={cn('w-full h-[256px] bg-center bg-no-repeat bg-contain rounded-xl', s.advancedPic)}/>
+                    <div className={cn('w-full h-[256px] bg-center bg-no-repeat bg-contain rounded-xl', s.advancedPic)} />
                     <div className='px-4 pb-2'>
                       <div className='flex items-center justify-between'>
                         <div className='flex items-center'>
@@ -302,7 +302,7 @@ const CreateAppModal = ({ show, onSuccess, onClose }: CreateAppDialogProps) => {
       )}
       <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} type="primary" onClick={onCreate}>{t('app.newApp.Create')}</Button>
+        <Button className='text-sm font-medium' 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}>
         <XClose className='w-4 h-4 text-gray-500' />
diff --git a/web/app/components/app/create-from-dsl-modal/index.tsx b/web/app/components/app/create-from-dsl-modal/index.tsx
index f2cf6b97b9..b36f467f21 100644
--- a/web/app/components/app/create-from-dsl-modal/index.tsx
+++ b/web/app/components/app/create-from-dsl-modal/index.tsx
@@ -80,7 +80,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose }: CreateFromDSLModalProp
     <Modal
       className='px-8 py-6 max-w-[520px] w-[520px] rounded-xl'
       isShow={show}
-      onClose={() => {}}
+      onClose={() => { }}
     >
       <div className='relative pb-2 text-xl font-medium leading-[30px] text-gray-900'>{t('app.createFromConfigFile')}</div>
       <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onClose}>
@@ -93,7 +93,7 @@ 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} type="primary" onClick={onCreate}>{t('app.newApp.Create')}</Button>
+        <Button className='text-sm font-medium' disabled={isAppsFull || !currentFile} variant="primary" onClick={onCreate}>{t('app.newApp.Create')}</Button>
       </div>
     </Modal>
   )
diff --git a/web/app/components/app/duplicate-modal/index.tsx b/web/app/components/app/duplicate-modal/index.tsx
index 5096fa2cb2..e9710add9e 100644
--- a/web/app/components/app/duplicate-modal/index.tsx
+++ b/web/app/components/app/duplicate-modal/index.tsx
@@ -75,7 +75,7 @@ const DuplicateAppModal = ({
           {isAppsFull && <AppsFull loc='app-duplicate-create' />}
         </div>
         <div className='flex flex-row-reverse'>
-          <Button disabled={isAppsFull} className='w-24 ml-2' type='primary' onClick={submit}>{t('app.duplicate')}</Button>
+          <Button disabled={isAppsFull} className='w-24 ml-2' variant='primary' onClick={submit}>{t('app.duplicate')}</Button>
           <Button className='w-24' onClick={onHide}>{t('common.operation.cancel')}</Button>
         </div>
       </Modal>
diff --git a/web/app/components/app/overview/apikey-info-panel/index.tsx b/web/app/components/app/overview/apikey-info-panel/index.tsx
index b91bfd5aaf..52f67eda74 100644
--- a/web/app/components/app/overview/apikey-info-panel/index.tsx
+++ b/web/app/components/app/overview/apikey-info-panel/index.tsx
@@ -44,7 +44,7 @@ const APIKeyInfoPanel: FC = () => {
         <div className='mt-1 text-sm text-gray-600 font-normal'>{t(`appOverview.apiKeyInfo.cloud.${'trial'}.description`)}</div>
       )}
       <Button
-        type='primary'
+        variant='primary'
         className='space-x-2'
         onClick={() => setShowAccountSettingModal({ payload: 'provider' })}
       >
diff --git a/web/app/components/app/overview/settings/index.tsx b/web/app/components/app/overview/settings/index.tsx
index 8c4eb3c4a1..78e26dd167 100644
--- a/web/app/components/app/overview/settings/index.tsx
+++ b/web/app/components/app/overview/settings/index.tsx
@@ -173,7 +173,7 @@ 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 type='primary' className='flex-shrink-0 !text-sm' onClick={onClickSave} loading={saveLoading}>{t('common.operation.save')}</Button>
+          <Button variant='primary' className='flex-shrink-0 !text-sm' onClick={onClickSave} loading={saveLoading}>{t('common.operation.save')}</Button>
         </div>
         {showEmojiPicker && <EmojiPicker
           onSelect={(icon, icon_background) => {
diff --git a/web/app/components/app/switch-app-modal/index.tsx b/web/app/components/app/switch-app-modal/index.tsx
index e1bf3eb7ab..2dd4e42f29 100644
--- a/web/app/components/app/switch-app-modal/index.tsx
+++ b/web/app/components/app/switch-app-modal/index.tsx
@@ -89,7 +89,7 @@ const SwitchAppModal = ({ show, appDetail, inAppDetail = false, onSuccess, onClo
       <Modal
         className={cn('p-8 max-w-[600px] w-[600px]', s.bg)}
         isShow={show}
-        onClose={() => {}}
+        onClose={() => { }}
       >
         <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onClose}>
           <XClose className='w-4 h-4 text-gray-500' />
@@ -133,7 +133,7 @@ const SwitchAppModal = ({ show, appDetail, inAppDetail = false, onSuccess, onClo
           </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} type="warning" onClick={goStart}>{t('app.switchStart')}</Button>
+            <Button className='text-sm font-medium border-red-700 border-[0.5px]' disabled={isAppsFull || !name} variant="warning" onClick={goStart}>{t('app.switchStart')}</Button>
           </div>
         </div>
       </Modal>
diff --git a/web/app/components/base/button/index.tsx b/web/app/components/base/button/index.tsx
index 34f16ad556..d39c69d3ae 100644
--- a/web/app/components/base/button/index.tsx
+++ b/web/app/components/base/button/index.tsx
@@ -1,50 +1,44 @@
-import type { FC, MouseEventHandler, PropsWithChildren } from 'react'
-import React, { memo } from 'react'
+import React from 'react'
+import { type VariantProps, cva } from 'class-variance-authority'
 import classNames from 'classnames'
 import Spinner from '../spinner'
 
-export type IButtonProps = PropsWithChildren<{
-  type?: string
-  className?: string
-  disabled?: boolean
+const buttonVariants = cva(
+  'btn disabled:pointer-events-none',
+  {
+    variants: {
+      variant: {
+        primary: 'btn-primary disabled:btn-primary-disabled',
+        warning:
+          'btn-warning disabled:btn-warning-disabled',
+        default: 'btn-default disabled:btn-default-disabled',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+export type ButtonProps = {
   loading?: boolean
-  tabIndex?: number
-  onClick?: MouseEventHandler<HTMLDivElement>
-}>
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants>
 
-const Button: FC<IButtonProps> = ({
-  type,
-  disabled,
-  children,
-  className,
-  onClick,
-  loading = false,
-  tabIndex,
-}) => {
-  let typeClassNames = 'cursor-pointer'
-  switch (type) {
-    case 'primary':
-      typeClassNames = (disabled || loading) ? 'btn-primary-disabled' : 'btn-primary'
-      break
-    case 'warning':
-      typeClassNames = (disabled || loading) ? 'btn-warning-disabled' : 'btn-warning'
-      break
-    default:
-      typeClassNames = disabled ? 'btn-default-disabled' : 'btn-default'
-      break
-  }
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, loading, children, ...props }, ref) => {
+    return (
+      <button
+        className={classNames(buttonVariants({ variant, className }))}
+        ref={ref}
+        {...props}
+      >
+        {children}
+        <Spinner loading={loading} className='!text-white !h-3 !w-3 !border-2 !ml-1' />
+      </button>
+    )
+  },
+)
+Button.displayName = 'Button'
 
-  return (
-    <div
-      className={classNames('btn', typeClassNames, className)}
-      tabIndex={tabIndex}
-      onClick={disabled ? undefined : onClick}
-    >
-      {children}
-      {/* Spinner is hidden when loading is false */}
-      <Spinner loading={loading} className='!text-white !h-3 !w-3 !border-2 !ml-1' />
-    </div>
-  )
-}
-
-export default memo(Button)
+export default Button
+export { Button, buttonVariants }
diff --git a/web/app/components/base/chat/chat-with-history/config-panel/index.tsx b/web/app/components/base/chat/chat-with-history/config-panel/index.tsx
index 649aa50374..f974eae786 100644
--- a/web/app/components/base/chat/chat-with-history/config-panel/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/config-panel/index.tsx
@@ -93,7 +93,7 @@ const ConfigPanel = () => {
               <Form />
               <div className={`pl-[136px] flex items-center ${isMobile && '!pl-0'}`}>
                 <Button
-                  type='primary'
+                  variant='primary'
                   className='mr-2 text-sm font-medium'
                   onClick={() => {
                     setCollapsed(true)
@@ -118,7 +118,7 @@ const ConfigPanel = () => {
               <Form />
               <Button
                 className={`px-4 py-0 h-9 ${inputsForms.length && !isMobile && 'ml-[136px]'}`}
-                type='primary'
+                variant='primary'
                 onClick={handleStartChat}
               >
                 <MessageDotsCircle className='mr-2 w-4 h-4 text-white' />
diff --git a/web/app/components/base/confirm-ui/index.tsx b/web/app/components/base/confirm-ui/index.tsx
index b43a363134..5ce06470da 100644
--- a/web/app/components/base/confirm-ui/index.tsx
+++ b/web/app/components/base/confirm-ui/index.tsx
@@ -42,7 +42,7 @@ const ConfirmUI: FC<IConfirmUIProps> = ({
       </div>
 
       <div className='flex gap-3 mt-4 ml-12'>
-        <Button type='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 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>
       </div>
     </div>
diff --git a/web/app/components/base/confirm/common.tsx b/web/app/components/base/confirm/common.tsx
index 8eba6512b7..a12f823c64 100644
--- a/web/app/components/base/confirm/common.tsx
+++ b/web/app/components/base/confirm/common.tsx
@@ -51,7 +51,7 @@ const ConfirmCommon: FC<ConfirmCommonProps> = ({
   }
 
   return (
-    <Modal isShow={isShow} onClose={() => {}} className='!w-[480px] !max-w-[480px] !p-0 !rounded-2xl' wrapperClassName={confirmWrapperClassName}>
+    <Modal isShow={isShow} onClose={() => { }} className='!w-[480px] !max-w-[480px] !p-0 !rounded-2xl' wrapperClassName={confirmWrapperClassName}>
       <div className={cn(s[`wrapper-${type}`], 'relative p-8')}>
         <div className='flex items-center justify-center absolute top-4 right-4 w-8 h-8 cursor-pointer' onClick={onCancel}>
           <XClose className='w-4 h-4 text-gray-500' />
@@ -77,7 +77,7 @@ const ConfirmCommon: FC<ConfirmCommonProps> = ({
                 )
               }
               <Button
-                type='primary'
+                variant='primary'
                 className={confirmBtnClassName || ''}
                 onClick={onConfirm}
                 disabled={confirmDisabled}
diff --git a/web/app/components/base/emoji-picker/index.tsx b/web/app/components/base/emoji-picker/index.tsx
index b3a0605829..65e3dfab67 100644
--- a/web/app/components/base/emoji-picker/index.tsx
+++ b/web/app/components/base/emoji-picker/index.tsx
@@ -189,14 +189,14 @@ const EmojiPicker: FC<IEmojiPickerProps> = ({
     </div>
     <Divider className='m-0' />
     <div className='w-full flex items-center justify-center p-3 gap-2'>
-      <Button type="default" className='w-full' onClick={() => {
+      <Button variant="default" className='w-full' onClick={() => {
         onClose && onClose()
       }}>
         {t('app.emoji.cancel')}
       </Button>
       <Button
         disabled={selectedEmoji === ''}
-        type="primary"
+        variant="primary"
         className='w-full'
         onClick={() => {
           onSelect && onSelect(selectedEmoji, selectedBackground)
diff --git a/web/app/components/base/features/feature-panel/moderation/moderation-setting-modal.tsx b/web/app/components/base/features/feature-panel/moderation/moderation-setting-modal.tsx
index 142498d3cf..d7cdce0fd0 100644
--- a/web/app/components/base/features/feature-panel/moderation/moderation-setting-modal.tsx
+++ b/web/app/components/base/features/feature-panel/moderation/moderation-setting-modal.tsx
@@ -262,7 +262,7 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
                 onClick={() => handleDataTypeChange(provider.key)}
               >
                 <div className={`
-                  mr-2 w-4 h-4 rounded-full border 
+                  mr-2 w-4 h-4 rounded-full border
                   ${localeData.type === provider.key ? 'border-[5px] border-primary-600' : 'border border-gray-300'}`} />
                 {provider.name}
               </div>
@@ -362,7 +362,7 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
           {t('common.operation.cancel')}
         </Button>
         <Button
-          type='primary'
+          variant='primary'
           className='text-sm font-medium'
           onClick={handleSave}
           disabled={localeData.type === 'openai_moderation' && !openaiProviderConfiged}
diff --git a/web/app/components/base/features/feature-panel/opening-statement/index.tsx b/web/app/components/base/features/feature-panel/opening-statement/index.tsx
index d9a9a408c9..b1241472f6 100644
--- a/web/app/components/base/features/feature-panel/opening-statement/index.tsx
+++ b/web/app/components/base/features/feature-panel/opening-statement/index.tsx
@@ -169,7 +169,7 @@ const OpeningStatement: FC<OpeningStatementProps> = ({
     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} type="primary">{t('common.operation.save')}</Button>
+        <Button className='!h-8 !px-3 text-xs' onClick={handleConfirm} variant="primary">{t('common.operation.save')}</Button>
       </div>
     ) : (
       <OperationBtn type='edit' actionName={hasValue ? '' : t('appDebug.openingStatement.writeOpener') as string} onClick={handleEdit} />
diff --git a/web/app/components/base/image-uploader/image-link-input.tsx b/web/app/components/base/image-uploader/image-link-input.tsx
index 47d4c69ade..8149279ea1 100644
--- a/web/app/components/base/image-uploader/image-link-input.tsx
+++ b/web/app/components/base/image-uploader/image-link-input.tsx
@@ -42,7 +42,7 @@ const ImageLinkInput: FC<ImageLinkInputProps> = ({
         placeholder={t('common.imageUploader.pasteImageLinkInputPlaceholder') || ''}
       />
       <Button
-        type='primary'
+        variant='primary'
         className='!h-6 text-xs font-medium'
         disabled={!imageLink || disabled}
         onClick={handleClick}
diff --git a/web/app/components/base/modal/delete-confirm-modal/index.tsx b/web/app/components/base/modal/delete-confirm-modal/index.tsx
index 5f492bedfc..5198563eee 100644
--- a/web/app/components/base/modal/delete-confirm-modal/index.tsx
+++ b/web/app/components/base/modal/delete-confirm-modal/index.tsx
@@ -50,7 +50,7 @@ const DeleteConfirmModal: FC<Props> = ({
         <div className='flex gap-2 justify-end'>
           <Button onClick={onHide}>{t('common.operation.cancel')}</Button>
           <Button
-            type='warning'
+            variant='warning'
             onClick={onRemove}
             className='border-red-700 border-[0.5px]'
           >
diff --git a/web/app/components/base/tag-management/tag-remove-modal.tsx b/web/app/components/base/tag-management/tag-remove-modal.tsx
index a6ef5c2834..9f20f326a7 100644
--- a/web/app/components/base/tag-management/tag-remove-modal.tsx
+++ b/web/app/components/base/tag-management/tag-remove-modal.tsx
@@ -23,7 +23,7 @@ const TagRemoveModal = ({ show, tag, onConfirm, onClose }: TagRemoveModalProps)
     <Modal
       className={cn('p-8 max-w-[480px] w-[480px]', s.bg)}
       isShow={show}
-      onClose={() => {}}
+      onClose={() => { }}
     >
       <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onClose}>
         <XClose className='w-4 h-4 text-gray-500' />
@@ -40,7 +40,7 @@ const TagRemoveModal = ({ show, tag, onConfirm, onClose }: TagRemoveModalProps)
       </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]' type="warning" onClick={onConfirm}>{t('common.operation.delete')}</Button>
+        <Button className='text-sm font-medium border-red-700 border-[0.5px]' variant="warning" onClick={onConfirm}>{t('common.operation.delete')}</Button>
       </div>
     </Modal>
   )
diff --git a/web/app/components/custom/custom-web-app-brand/index.tsx b/web/app/components/custom/custom-web-app-brand/index.tsx
index 68b967157d..53db78105a 100644
--- a/web/app/components/custom/custom-web-app-brand/index.tsx
+++ b/web/app/components/custom/custom-web-app-brand/index.tsx
@@ -192,7 +192,7 @@ const CustomWebAppBrand = () => {
             fileId && (
               <>
                 <Button
-                  type='primary'
+                  variant='primary'
                   className='mr-2 !h-8 !px-3 !py-0 !text-[13px]'
                   onClick={handleApply}
                   disabled={webappBrandRemoved || !isCurrentWorkspaceManager}
diff --git a/web/app/components/datasets/create/embedding-process/index.tsx b/web/app/components/datasets/create/embedding-process/index.tsx
index 5fb34018c6..c3af38d5b3 100644
--- a/web/app/components/datasets/create/embedding-process/index.tsx
+++ b/web/app/components/datasets/create/embedding-process/index.tsx
@@ -282,7 +282,7 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
       </div>
       <RuleDetail sourceData={ruleDetail} />
       <div className='flex items-center gap-2 mt-10'>
-        <Button className='w-fit' type='primary' onClick={navToDocumentList}>
+        <Button className='w-fit' variant='primary' onClick={navToDocumentList}>
           <span>{t('datasetCreation.stepThree.navTo')}</span>
           <ArrowRightIcon className='h-4 w-4 ml-2 stroke-current stroke-1' />
         </Button>
diff --git a/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx b/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx
index 9f95c20161..9a1f64fbe0 100644
--- a/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx
+++ b/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx
@@ -53,7 +53,7 @@ const EmptyDatasetCreationModal = ({
     >
       <div className={s.modalHeader}>
         <div className={s.title}>{t('datasetCreation.stepOne.modal.title')}</div>
-        <span className={s.close} onClick={onHide}/>
+        <span className={s.close} onClick={onHide} />
       </div>
       <div className={s.tip}>{t('datasetCreation.stepOne.modal.tip')}</div>
       <div className={s.form}>
@@ -61,7 +61,7 @@ const EmptyDatasetCreationModal = ({
         <Input className='!h-8' value={inputValue} placeholder={t('datasetCreation.stepOne.modal.placeholder') || ''} onChange={setInputValue} />
       </div>
       <div className='flex flex-row-reverse'>
-        <Button className='w-24 ml-2' type='primary' onClick={submit}>{t('datasetCreation.stepOne.modal.confirmButton')}</Button>
+        <Button className='w-24 ml-2' variant='primary' onClick={submit}>{t('datasetCreation.stepOne.modal.confirmButton')}</Button>
         <Button className='w-24' onClick={onHide}>{t('datasetCreation.stepOne.modal.cancelButton')}</Button>
       </div>
     </Modal>
diff --git a/web/app/components/datasets/create/step-one/index.tsx b/web/app/components/datasets/create/step-one/index.tsx
index 3e4f72f16a..d8cc51b0a3 100644
--- a/web/app/components/datasets/create/step-one/index.tsx
+++ b/web/app/components/datasets/create/step-one/index.tsx
@@ -49,7 +49,7 @@ export const NotionConnector = ({ onSetting }: NotionConnectorProps) => {
       <span className={s.notionIcon} />
       <div className={s.title}>{t('datasetCreation.stepOne.notionSyncTitle')}</div>
       <div className={s.tip}>{t('datasetCreation.stepOne.notionSyncTip')}</div>
-      <Button className='h-8' type='primary' onClick={onSetting}>{t('datasetCreation.stepOne.connect')}</Button>
+      <Button className='h-8' variant='primary' onClick={onSetting}>{t('datasetCreation.stepOne.connect')}</Button>
     </div>
   )
 }
@@ -197,7 +197,7 @@ const StepOne = ({
                   <VectorSpaceFull />
                 </div>
               )}
-              <Button disabled={nextDisabled} className={s.submitButton} type='primary' onClick={onStepChange}>{t('datasetCreation.stepOne.button')}</Button>
+              <Button disabled={nextDisabled} className={s.submitButton} variant='primary' onClick={onStepChange}>{t('datasetCreation.stepOne.button')}</Button>
             </>
           )}
           {dataSourceType === DataSourceType.NOTION && (
@@ -217,7 +217,7 @@ const StepOne = ({
                       <VectorSpaceFull />
                     </div>
                   )}
-                  <Button disabled={isShowVectorSpaceFull || !notionPages.length} className={s.submitButton} type='primary' onClick={onStepChange}>{t('datasetCreation.stepOne.button')}</Button>
+                  <Button disabled={isShowVectorSpaceFull || !notionPages.length} className={s.submitButton} variant='primary' onClick={onStepChange}>{t('datasetCreation.stepOne.button')}</Button>
                 </>
               )}
             </>
diff --git a/web/app/components/datasets/create/step-two/index.tsx b/web/app/components/datasets/create/step-two/index.tsx
index ad7bab9780..13460b9475 100644
--- a/web/app/components/datasets/create/step-two/index.tsx
+++ b/web/app/components/datasets/create/step-two/index.tsx
@@ -655,7 +655,7 @@ const StepTwo = ({
                     </div>
                   </div>
                   <div className={s.formFooter}>
-                    <Button type="primary" className={cn(s.button, '!h-8')} onClick={confirmChangeCustomConfig}>{t('datasetCreation.stepTwo.preview')}</Button>
+                    <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>
                   </div>
                 </div>
@@ -891,12 +891,12 @@ const StepTwo = ({
                 <div className='flex items-center mt-8 py-2'>
                   <Button onClick={() => onStepChange && onStepChange(-1)}>{t('datasetCreation.stepTwo.previousStep')}</Button>
                   <div className={s.divider} />
-                  <Button loading={isCreating} type='primary' onClick={createHandle}>{t('datasetCreation.stepTwo.nextStep')}</Button>
+                  <Button loading={isCreating} variant='primary' onClick={createHandle}>{t('datasetCreation.stepTwo.nextStep')}</Button>
                 </div>
               )
               : (
                 <div className='flex items-center mt-8 py-2'>
-                  <Button loading={isCreating} type='primary' onClick={createHandle}>{t('datasetCreation.stepTwo.save')}</Button>
+                  <Button loading={isCreating} variant='primary' onClick={createHandle}>{t('datasetCreation.stepTwo.save')}</Button>
                   <Button className='ml-2' onClick={onCancel}>{t('datasetCreation.stepTwo.cancel')}</Button>
                 </div>
               )}
diff --git a/web/app/components/datasets/create/stop-embedding-modal/index.tsx b/web/app/components/datasets/create/stop-embedding-modal/index.tsx
index a9efa7a828..c3d7f7aa5b 100644
--- a/web/app/components/datasets/create/stop-embedding-modal/index.tsx
+++ b/web/app/components/datasets/create/stop-embedding-modal/index.tsx
@@ -30,12 +30,12 @@ const StopEmbeddingModal = ({
       onClose={onHide}
       className={cn(s.modal, '!max-w-[480px]', 'px-8')}
     >
-      <div className={s.icon}/>
-      <span className={s.close} onClick={onHide}/>
+      <div className={s.icon} />
+      <span className={s.close} onClick={onHide} />
       <div className={s.title}>{t('datasetCreation.stepThree.modelTitle')}</div>
       <div className={s.content}>{t('datasetCreation.stepThree.modelContent')}</div>
       <div className='flex flex-row-reverse'>
-        <Button className='w-24 ml-2' type='primary' onClick={submit}>{t('datasetCreation.stepThree.modelButtonConfirm')}</Button>
+        <Button className='w-24 ml-2' variant='primary' onClick={submit}>{t('datasetCreation.stepThree.modelButtonConfirm')}</Button>
         <Button className='w-24' onClick={onHide}>{t('datasetCreation.stepThree.modelButtonCancel')}</Button>
       </div>
     </Modal>
diff --git a/web/app/components/datasets/documents/detail/batch-modal/index.tsx b/web/app/components/datasets/documents/detail/batch-modal/index.tsx
index cfffedd6ad..abaea8d0e0 100644
--- a/web/app/components/datasets/documents/detail/batch-modal/index.tsx
+++ b/web/app/components/datasets/documents/detail/batch-modal/index.tsx
@@ -39,7 +39,7 @@ const BatchModal: FC<IBatchModalProps> = ({
   }, [isShow])
 
   return (
-    <Modal isShow={isShow} onClose={() => {}} className='px-8 py-6 !max-w-[520px] !rounded-xl'>
+    <Modal isShow={isShow} onClose={() => { }} className='px-8 py-6 !max-w-[520px] !rounded-xl'>
       <div className='relative pb-1 text-xl font-medium leading-[30px] text-gray-900'>{t('datasetDocuments.list.batchModal.title')}</div>
       <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onCancel}>
         <XClose className='w-4 h-4 text-gray-500' />
@@ -55,7 +55,7 @@ const BatchModal: FC<IBatchModalProps> = ({
         <Button className='mr-2 text-gray-700 text-sm font-medium' onClick={onCancel}>
           {t('datasetDocuments.list.batchModal.cancel')}
         </Button>
-        <Button className='text-sm font-medium' type="primary" onClick={handleSend} disabled={!currentCSV}>
+        <Button className='text-sm font-medium' variant="primary" onClick={handleSend} disabled={!currentCSV}>
           {t('datasetDocuments.list.batchModal.run')}
         </Button>
       </div>
diff --git a/web/app/components/datasets/documents/detail/completed/SegmentCard.tsx b/web/app/components/datasets/documents/detail/completed/SegmentCard.tsx
index 8d0ebc0034..b4c0235486 100644
--- a/web/app/components/datasets/documents/detail/completed/SegmentCard.tsx
+++ b/web/app/components/datasets/documents/detail/completed/SegmentCard.tsx
@@ -224,7 +224,7 @@ const SegmentCard: FC<ISegmentCardProps> = ({
           <div className='flex gap-2 justify-end'>
             <Button onClick={() => setShowModal(false)}>{t('common.operation.cancel')}</Button>
             <Button
-              type='warning'
+              variant='warning'
               onClick={async () => {
                 await onDelete?.(id)
               }}
diff --git a/web/app/components/datasets/documents/detail/completed/index.tsx b/web/app/components/datasets/documents/detail/completed/index.tsx
index 8b10a9315c..7187a5a995 100644
--- a/web/app/components/datasets/documents/detail/completed/index.tsx
+++ b/web/app/components/datasets/documents/detail/completed/index.tsx
@@ -139,7 +139,7 @@ const SegmentDetailComponent: FC<ISegmentDetailProps> = ({
               {t('common.operation.cancel')}
             </Button>
             <Button
-              type='primary'
+              variant='primary'
               className='!h-7 !px-3 !py-[5px] text-xs font-medium !rounded-md'
               onClick={handleSave}
               disabled={loading}
@@ -402,7 +402,7 @@ const Completed: FC<ICompletedProps> = ({
         onClick={onClickCard}
         archived={archived}
       />
-      <Modal isShow={currSegment.showModal} onClose={() => {}} className='!max-w-[640px] !overflow-visible'>
+      <Modal isShow={currSegment.showModal} onClose={() => { }} className='!max-w-[640px] !overflow-visible'>
         <SegmentDetail
           embeddingAvailable={embeddingAvailable}
           segInfo={currSegment.segInfo ?? { id: '' }}
diff --git a/web/app/components/datasets/documents/detail/embedding/index.tsx b/web/app/components/datasets/documents/detail/embedding/index.tsx
index 48e97f0d59..4a30999106 100644
--- a/web/app/components/datasets/documents/detail/embedding/index.tsx
+++ b/web/app/components/datasets/documents/detail/embedding/index.tsx
@@ -279,7 +279,7 @@ const EmbeddingDetail: FC<Props> = ({ detail, stopPosition = 'top', datasetId: d
               {t('datasetCreation.stepThree.resume')}
             </Button>
           )}
-          <Button className='w-fit' type='primary' onClick={navToDocument}>
+          <Button className='w-fit' variant='primary' onClick={navToDocument}>
             <span>{t('datasetCreation.stepThree.navTo')}</span>
             <ArrowRightIcon className='h-4 w-4 ml-2 stroke-current stroke-1' />
           </Button>
diff --git a/web/app/components/datasets/documents/detail/metadata/index.tsx b/web/app/components/datasets/documents/detail/metadata/index.tsx
index e43f3d4477..d034abece9 100644
--- a/web/app/components/datasets/documents/detail/metadata/index.tsx
+++ b/web/app/components/datasets/documents/detail/metadata/index.tsx
@@ -208,7 +208,7 @@ const Metadata: FC<IMetadataProps> = ({ docDetail, loading, onUpdate }) => {
             })}
           </Radio.Group>
           {!doc_type && !documentType && (
-            <Button type='primary'
+            <Button variant='primary'
               onClick={confirmDocType}
               disabled={!tempDocType}
             >
@@ -216,7 +216,7 @@ const Metadata: FC<IMetadataProps> = ({ docDetail, loading, onUpdate }) => {
             </Button>
           )}
           {documentType && <div className={s.opBtnWrapper}>
-            <Button onClick={confirmDocType} className={`${s.opBtn} ${s.opSaveBtn}`} type='primary' >{t('common.operation.save')}</Button>
+            <Button onClick={confirmDocType} className={`${s.opBtn} ${s.opSaveBtn}`} variant='primary' >{t('common.operation.save')}</Button>
             <Button onClick={cancelDocType} className={`${s.opBtn} ${s.opCancelBtn}`}>{t('common.operation.cancel')}</Button>
           </div>}
         </div >
@@ -324,7 +324,7 @@ const Metadata: FC<IMetadataProps> = ({ docDetail, loading, onUpdate }) => {
                     <Button onClick={onCancel} className={`${s.opBtn} ${s.opCancelBtn}`}>{t('common.operation.cancel')}</Button>
                     <Button onClick={onSave}
                       className={`${s.opBtn} ${s.opSaveBtn}`}
-                      type='primary'
+                      variant='primary'
                       loading={saveLoading}
                     >
                       {t('common.operation.save')}
@@ -344,7 +344,7 @@ const Metadata: FC<IMetadataProps> = ({ docDetail, loading, onUpdate }) => {
                     <TypeIcon iconName={metadataMap[metadataParams.documentType || 'book'].iconName || ''} className={s.iconShow} />
                     {metadataMap[metadataParams.documentType || 'book'].text}
                     {editStatus && <div className='inline-flex items-center gap-1 ml-1'>
-                    ·
+                      ·
                       <div
                         onClick={() => { setShowDocTypes(true) }}
                         className='cursor-pointer hover:text-[#155EEF]'
diff --git a/web/app/components/datasets/documents/detail/new-segment-modal.tsx b/web/app/components/datasets/documents/detail/new-segment-modal.tsx
index 4c54ffa3a1..17c8ab771f 100644
--- a/web/app/components/datasets/documents/detail/new-segment-modal.tsx
+++ b/web/app/components/datasets/documents/detail/new-segment-modal.tsx
@@ -110,7 +110,7 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
   }
 
   return (
-    <Modal isShow={isShow} onClose={() => {}} className='pt-8 px-8 pb-6 !max-w-[640px] !rounded-xl'>
+    <Modal isShow={isShow} onClose={() => { }} className='pt-8 px-8 pb-6 !max-w-[640px] !rounded-xl'>
       <div className={'flex flex-col relative'}>
         <div className='absolute right-0 -top-0.5 flex items-center h-6'>
           <div className='flex justify-center items-center w-6 h-6 cursor-pointer' onClick={handleCancel}>
@@ -141,7 +141,7 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
             {t('common.operation.cancel')}
           </Button>
           <Button
-            type='primary'
+            variant='primary'
             className='!h-9 !px-4 !py-2 text-sm font-medium !rounded-lg'
             onClick={handleSave}
             disabled={loading}
diff --git a/web/app/components/datasets/documents/index.tsx b/web/app/components/datasets/documents/index.tsx
index 192c81df70..9b793b315b 100644
--- a/web/app/components/datasets/documents/index.tsx
+++ b/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 type='primary' onClick={routeToDocCreate} className='!h-8 !text-[13px] !shrink-0'>
+              <Button variant='primary' onClick={routeToDocCreate} className='!h-8 !text-[13px] !shrink-0'>
                 <PlusIcon className='h-4 w-4 mr-2 stroke-current' />
                 {isDataSourceNotion && t('datasetDocuments.list.addPages')}
                 {isDataSourceWeb && t('datasetDocuments.list.addUrl')}
diff --git a/web/app/components/datasets/documents/list.tsx b/web/app/components/datasets/documents/list.tsx
index 732f2a53d9..41245a3c58 100644
--- a/web/app/components/datasets/documents/list.tsx
+++ b/web/app/components/datasets/documents/list.tsx
@@ -301,7 +301,7 @@ export const OperationAction: FC<{
         <div className='flex gap-2 justify-end'>
           <Button onClick={() => setShowModal(false)}>{t('common.operation.cancel')}</Button>
           <Button
-            type='warning'
+            variant='warning'
             onClick={() => onOperate('delete')}
             className='border-red-700 border-[0.5px]'
           >
diff --git a/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx b/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx
index c52f850ee0..5552faad04 100644
--- a/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx
+++ b/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx
@@ -115,7 +115,7 @@ const ModifyRetrievalModal: FC<Props> = ({
         }}
       >
         <Button className='mr-2 flex-shrink-0' onClick={onHide}>{t('common.operation.cancel')}</Button>
-        <Button type='primary' className='flex-shrink-0' onClick={handleSave} >{t('common.operation.save')}</Button>
+        <Button variant='primary' className='flex-shrink-0' onClick={handleSave} >{t('common.operation.save')}</Button>
       </div>
     </div>
   )
diff --git a/web/app/components/datasets/hit-testing/textarea.tsx b/web/app/components/datasets/hit-testing/textarea.tsx
index 17a8694de1..3432204f5f 100644
--- a/web/app/components/datasets/hit-testing/textarea.tsx
+++ b/web/app/components/datasets/hit-testing/textarea.tsx
@@ -128,7 +128,7 @@ const TextAreaWithButton = ({
             <div>
               <Button
                 onClick={onSubmit}
-                type="primary"
+                variant="primary"
                 loading={loading}
                 disabled={(!text?.length || text?.length > 200)}
               >
diff --git a/web/app/components/datasets/rename-modal/index.tsx b/web/app/components/datasets/rename-modal/index.tsx
index 9914b026ca..f4b41752ed 100644
--- a/web/app/components/datasets/rename-modal/index.tsx
+++ b/web/app/components/datasets/rename-modal/index.tsx
@@ -58,7 +58,7 @@ const RenameDatasetModal = ({ show, dataset, onSuccess, onClose }: RenameDataset
     <Modal
       className='px-8 py-6 max-w-[520px] w-[520px] rounded-xl'
       isShow={show}
-      onClose={() => {}}
+      onClose={() => { }}
     >
       <div className='relative pb-2 text-xl font-medium leading-[30px] text-gray-900'>{t('datasetSettings.title')}</div>
       <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onClose}>
@@ -96,7 +96,7 @@ const RenameDatasetModal = ({ show, dataset, onSuccess, onClose }: RenameDataset
       </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} type="primary" onClick={onConfirm}>{t('common.operation.save')}</Button>
+        <Button className='text-sm font-medium' disabled={loading} variant="primary" onClick={onConfirm}>{t('common.operation.save')}</Button>
       </div>
     </Modal>
   )
diff --git a/web/app/components/datasets/settings/form/index.tsx b/web/app/components/datasets/settings/form/index.tsx
index d284281208..d1b1a1acaa 100644
--- a/web/app/components/datasets/settings/form/index.tsx
+++ b/web/app/components/datasets/settings/form/index.tsx
@@ -244,7 +244,7 @@ const Form = () => {
           <div className='w-[480px]'>
             <Button
               className='min-w-24 text-sm'
-              type='primary'
+              variant='primary'
               onClick={handleSave}
             >
               {t('datasetSettings.form.save')}
diff --git a/web/app/components/develop/secret-key/secret-key-button.tsx b/web/app/components/develop/secret-key/secret-key-button.tsx
index f7685b8eda..de10a99703 100644
--- a/web/app/components/develop/secret-key/secret-key-button.tsx
+++ b/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}`} type='default' onClick={() => setVisible(true)}>
+      <Button className={`px-3 ${className}`} variant='default' 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" />
diff --git a/web/app/components/develop/secret-key/secret-key-generate.tsx b/web/app/components/develop/secret-key/secret-key-generate.tsx
index e1b48f69ff..a516b9667d 100644
--- a/web/app/components/develop/secret-key/secret-key-generate.tsx
+++ b/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 type='default' className={`flex-shrink-0 ${s.w64}`} onClick={onClose}>
+        <Button variant='default' className={`flex-shrink-0 ${s.w64}`} onClick={onClose}>
           <span className='text-xs font-medium text-gray-800'>{t('appApi.actionMsg.ok')}</span>
         </Button>
       </div>
diff --git a/web/app/components/develop/secret-key/secret-key-modal.tsx b/web/app/components/develop/secret-key/secret-key-modal.tsx
index 37adaf8822..d98520f951 100644
--- a/web/app/components/develop/secret-key/secret-key-modal.tsx
+++ b/web/app/components/develop/secret-key/secret-key-modal.tsx
@@ -128,7 +128,7 @@ const SecretKeyModal = ({
                         setCopyValue(api.token)
                       }}></div>
                     </Tooltip>
-                    { isCurrentWorkspaceManager
+                    {isCurrentWorkspaceManager
                       && <div className={`flex items-center justify-center flex-shrink-0 w-6 h-6 rounded-lg cursor-pointer ${s.trashIcon}`} onClick={() => {
                         setDelKeyId(api.id)
                         setShowConfirmDelete(true)
@@ -143,7 +143,7 @@ const SecretKeyModal = ({
         )
       }
       <div className='flex'>
-        <Button type='default' className={`flex flex-shrink-0 mt-4 ${s.autoWidth}`} onClick={onCreate} disabled={ !currentWorkspace || !isCurrentWorkspaceManager}>
+        <Button variant='default' 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>
diff --git a/web/app/components/explore/app-card/index.tsx b/web/app/components/explore/app-card/index.tsx
index 4b336c0fe8..0f6000cada 100644
--- a/web/app/components/explore/app-card/index.tsx
+++ b/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 type='primary' className='grow flex items-center !h-7' onClick={() => onCreate()}>
+            <Button variant='primary' className='grow flex items-center !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 type='primary' className='grow flex items-center !h-7' onClick={() => onCreate()}>
+            <Button variant='primary' className='grow flex items-center !h-7' onClick={() => onCreate()}>
               <PlusIcon className='w-4 h-4 mr-1' />
               <span className='text-xs'>{t('app.newApp.useTemplate')}</span>
             </Button>
diff --git a/web/app/components/explore/create-app-modal/index.tsx b/web/app/components/explore/create-app-modal/index.tsx
index 66bfe65595..48126e3b4b 100644
--- a/web/app/components/explore/create-app-modal/index.tsx
+++ b/web/app/components/explore/create-app-modal/index.tsx
@@ -102,7 +102,7 @@ const CreateAppModal = ({
           {!isEditModal && isAppsFull && <AppsFull loc='app-explore-create' />}
         </div>
         <div className='flex flex-row-reverse'>
-          <Button disabled={!isEditModal && isAppsFull} className='w-24 ml-2' type='primary' onClick={submit}>{!isEditModal ? t('common.operation.create') : t('common.operation.save')}</Button>
+          <Button disabled={!isEditModal && isAppsFull} className='w-24 ml-2' variant='primary' onClick={submit}>{!isEditModal ? t('common.operation.create') : t('common.operation.save')}</Button>
           <Button className='w-24' onClick={onHide}>{t('common.operation.cancel')}</Button>
         </div>
       </Modal>
diff --git a/web/app/components/header/account-setting/account-page/index.tsx b/web/app/components/header/account-setting/account-page/index.tsx
index b7467f4d88..d2d61257eb 100644
--- a/web/app/components/header/account-setting/account-page/index.tsx
+++ b/web/app/components/header/account-setting/account-page/index.tsx
@@ -182,7 +182,7 @@ export default function AccountPage() {
             <Button className='mr-2 text-sm font-medium' onClick={() => setEditNameModalVisible(false)}>{t('common.operation.cancel')}</Button>
             <Button
               disabled={editing || !editName}
-              type='primary'
+              variant='primary'
               className='text-sm font-medium'
               onClick={handleSaveName}
             >
@@ -235,7 +235,7 @@ export default function AccountPage() {
             }}>{t('common.operation.cancel')}</Button>
             <Button
               disabled={editing}
-              type='primary'
+              variant='primary'
               className='text-sm font-medium'
               onClick={handleSavePassowrd}
             >
diff --git a/web/app/components/header/account-setting/api-based-extension-page/modal.tsx b/web/app/components/header/account-setting/api-based-extension-page/modal.tsx
index 870d49bf9e..ddd4cd9000 100644
--- a/web/app/components/header/account-setting/api-based-extension-page/modal.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/modal.tsx
@@ -135,7 +135,7 @@ const ApiBasedExtensionModal: FC<ApiBasedExtensionModalProps> = ({
           {t('common.operation.cancel')}
         </Button>
         <Button
-          type='primary'
+          variant='primary'
           className='text-sm font-medium'
           disabled={!localeData.name || !localeData.api_endpoint || !localeData.api_key || loading}
           onClick={handleSave}
diff --git a/web/app/components/header/account-setting/members-page/invite-modal/index.tsx b/web/app/components/header/account-setting/members-page/invite-modal/index.tsx
index 50b3bcf84b..51c137dca4 100644
--- a/web/app/components/header/account-setting/members-page/invite-modal/index.tsx
+++ b/web/app/components/header/account-setting/members-page/invite-modal/index.tsx
@@ -61,7 +61,7 @@ const InviteModal = ({
           onSend(invitation_results)
         }
       }
-      catch (e) {}
+      catch (e) { }
     }
     else {
       notify({ type: 'error', message: t('common.members.emailInvalid') })
@@ -92,7 +92,7 @@ const InviteModal = ({
                 <div data-tag key={index} className={cn(s.emailBackground)}>
                   <div data-tag-item>{email}</div>
                   <span data-tag-handle onClick={() => removeEmail(index)}>
-                      ×
+                    ×
                   </span>
                 </div>
               }
@@ -151,7 +151,7 @@ const InviteModal = ({
             className='w-full text-sm font-medium'
             onClick={handleSend}
             disabled={!emails.length}
-            type='primary'
+            variant='primary'
           >
             {t('common.members.sendInvite')}
           </Button>
diff --git a/web/app/components/header/account-setting/members-page/invited-modal/index.tsx b/web/app/components/header/account-setting/members-page/invited-modal/index.tsx
index d150900e93..90840f990d 100644
--- a/web/app/components/header/account-setting/members-page/invited-modal/index.tsx
+++ b/web/app/components/header/account-setting/members-page/invited-modal/index.tsx
@@ -49,34 +49,34 @@ const InvitedModal = ({
             <div className='flex flex-col gap-2 mb-9'>
               {
                 !!successInvationResults.length
-                  && <>
-                    <div className='py-2 text-sm font-Medium text-gray-900'>{t('common.members.invitationLink')}</div>
-                    {successInvationResults.map(item =>
-                      <InvitationLink key={item.email} value={item} />)}
-                  </>
+                && <>
+                  <div className='py-2 text-sm font-Medium text-gray-900'>{t('common.members.invitationLink')}</div>
+                  {successInvationResults.map(item =>
+                    <InvitationLink key={item.email} value={item} />)}
+                </>
               }
               {
                 !!failedInvationResults.length
-                  && <>
-                    <div className='py-2 text-sm font-Medium text-gray-900'>{t('common.members.failedinvitationEmails')}</div>
-                    <div className='flex flex-wrap justify-between gap-y-1'>
-                      {
-                        failedInvationResults.map(item =>
-                          <div key={item.email} className='flex justify-center border border-red-300 rounded-md px-1 bg-orange-50'>
-                            <Tooltip
-                              selector={`invitation-tag-${item.email}`}
-                              htmlContent={item.message}
-                            >
-                              <div className='flex justify-center items-center text-sm gap-1'>
-                                {item.email}
-                                <QuestionMarkCircleIcon className='w-4 h-4 text-red-300' />
-                              </div>
-                            </Tooltip>
-                          </div>,
-                        )
-                      }
-                    </div>
-                  </>
+                && <>
+                  <div className='py-2 text-sm font-Medium text-gray-900'>{t('common.members.failedinvitationEmails')}</div>
+                  <div className='flex flex-wrap justify-between gap-y-1'>
+                    {
+                      failedInvationResults.map(item =>
+                        <div key={item.email} className='flex justify-center border border-red-300 rounded-md px-1 bg-orange-50'>
+                          <Tooltip
+                            selector={`invitation-tag-${item.email}`}
+                            htmlContent={item.message}
+                          >
+                            <div className='flex justify-center items-center text-sm gap-1'>
+                              {item.email}
+                              <QuestionMarkCircleIcon className='w-4 h-4 text-red-300' />
+                            </div>
+                          </Tooltip>
+                        </div>,
+                      )
+                    }
+                  </div>
+                </>
               }
             </div>
           </>
@@ -85,7 +85,7 @@ const InvitedModal = ({
           <Button
             className='w-[96px] text-sm font-medium'
             onClick={onCancel}
-            type='primary'
+            variant='primary'
           >
             {t('common.members.ok')}
           </Button>
diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx
index 3d920cc5ec..fb907c4479 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx
@@ -339,7 +339,7 @@ const ModelModal: FC<ModelModalProps> = ({
                   </Button>
                   <Button
                     className='h-9 text-sm font-medium'
-                    type='primary'
+                    variant='primary'
                     onClick={handleSave}
                     disabled={
                       loading
diff --git a/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx b/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
index 29696ba5cc..9b49d50ff4 100644
--- a/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
@@ -148,7 +148,7 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
                   <div className='w-[261px] text-gray-500'>{t('common.modelProvider.systemReasoningModel.tip')}</div>
                 }
               >
-                <HelpCircle className='ml-0.5 w-[14px] h-[14px] text-gray-400'/>
+                <HelpCircle className='ml-0.5 w-[14px] h-[14px] text-gray-400' />
               </Tooltip>
             </div>
             <div>
@@ -168,7 +168,7 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
                   <div className='w-[261px] text-gray-500'>{t('common.modelProvider.embeddingModel.tip')}</div>
                 }
               >
-                <HelpCircle className='ml-0.5 w-[14px] h-[14px] text-gray-400'/>
+                <HelpCircle className='ml-0.5 w-[14px] h-[14px] text-gray-400' />
               </Tooltip>
             </div>
             <div>
@@ -188,7 +188,7 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
                   <div className='w-[261px] text-gray-500'>{t('common.modelProvider.rerankModel.tip')}</div>
                 }
               >
-                <HelpCircle className='ml-0.5 w-[14px] h-[14px] text-gray-400'/>
+                <HelpCircle className='ml-0.5 w-[14px] h-[14px] text-gray-400' />
               </Tooltip>
             </div>
             <div>
@@ -208,7 +208,7 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
                   <div className='w-[261px] text-gray-500'>{t('common.modelProvider.speechToTextModel.tip')}</div>
                 }
               >
-                <HelpCircle className='ml-0.5 w-[14px] h-[14px] text-gray-400'/>
+                <HelpCircle className='ml-0.5 w-[14px] h-[14px] text-gray-400' />
               </Tooltip>
             </div>
             <div>
@@ -228,7 +228,7 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
                   <div className='w-[261px] text-gray-500'>{t('common.modelProvider.ttsModel.tip')}</div>
                 }
               >
-                <HelpCircle className='ml-0.5 w-[14px] h-[14px] text-gray-400'/>
+                <HelpCircle className='ml-0.5 w-[14px] h-[14px] text-gray-400' />
               </Tooltip>
             </div>
             <div>
@@ -247,7 +247,7 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
               {t('common.operation.cancel')}
             </Button>
             <Button
-              type='primary'
+              variant='primary'
               className='!h-8 !text-[13px]'
               onClick={handleSave}
               disabled={!isCurrentWorkspaceManager}
diff --git a/web/app/components/share/chat/sidebar/rename-modal/index.tsx b/web/app/components/share/chat/sidebar/rename-modal/index.tsx
index 34ca4e7631..8c2c587b52 100644
--- a/web/app/components/share/chat/sidebar/rename-modal/index.tsx
+++ b/web/app/components/share/chat/sidebar/rename-modal/index.tsx
@@ -38,7 +38,7 @@ const RenameModal: FC<IRenameModalProps> = ({
 
       <div className='mt-10 flex justify-end'>
         <Button className='mr-2 flex-shrink-0' onClick={onClose}>{t('common.operation.cancel')}</Button>
-        <Button type='primary' className='flex-shrink-0' onClick={() => onSave(tempName)} loading={saveLoading}>{t('common.operation.save')}</Button>
+        <Button variant='primary' className='flex-shrink-0' onClick={() => onSave(tempName)} loading={saveLoading}>{t('common.operation.save')}</Button>
       </div>
     </Modal>
   )
diff --git a/web/app/components/share/chat/value-panel/index.tsx b/web/app/components/share/chat/value-panel/index.tsx
index b9b26d8667..249dc71f31 100644
--- a/web/app/components/share/chat/value-panel/index.tsx
+++ b/web/app/components/share/chat/value-panel/index.tsx
@@ -61,7 +61,7 @@ export const VarOpBtnGroup: FC<{ className?: string; onConfirm: () => void; onCa
     <div className={cn(className, 'flex mt-3 space-x-2 mobile:ml-0 tablet:ml-[128px] text-sm')}>
       <Button
         className='text-sm'
-        type='primary'
+        variant='primary'
         onClick={onConfirm}
       >
         {t('common.operation.save')}
diff --git a/web/app/components/share/chat/welcome/massive-component.tsx b/web/app/components/share/chat/welcome/massive-component.tsx
index 55b7e676fc..a21402976c 100644
--- a/web/app/components/share/chat/welcome/massive-component.tsx
+++ b/web/app/components/share/chat/welcome/massive-component.tsx
@@ -44,7 +44,7 @@ export const ChatBtn: FC<{ onClick: () => void; className?: string }> = ({
   const { t } = useTranslation()
   return (
     <Button
-      type='primary'
+      variant='primary'
       className={cn(className, `px-4 inline-flex items-center ${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">
diff --git a/web/app/components/share/chatbot/value-panel/index.tsx b/web/app/components/share/chatbot/value-panel/index.tsx
index 136c93ba88..9c35460233 100644
--- a/web/app/components/share/chatbot/value-panel/index.tsx
+++ b/web/app/components/share/chatbot/value-panel/index.tsx
@@ -61,7 +61,7 @@ export const VarOpBtnGroup: FC<{ className?: string; onConfirm: () => void; onCa
     <div className={cn(className, 'flex mt-3 space-x-2 mobile:ml-0 tablet:ml-[128px] text-sm')}>
       <Button
         className='text-sm'
-        type='primary'
+        variant='primary'
         onClick={onConfirm}
       >
         {t('common.operation.save')}
diff --git a/web/app/components/share/chatbot/welcome/massive-component.tsx b/web/app/components/share/chatbot/welcome/massive-component.tsx
index 87863887cf..0ed2af5aaf 100644
--- a/web/app/components/share/chatbot/welcome/massive-component.tsx
+++ b/web/app/components/share/chatbot/welcome/massive-component.tsx
@@ -45,7 +45,7 @@ export const ChatBtn: FC<{ onClick: () => void; className?: string }> = ({
   const { t } = useTranslation()
   return (
     <Button
-      type='primary'
+      variant='primary'
       className={cn(className, `!p-0 space-x-2 flex items-center ${s.customBtn}`)}
       onClick={onClick}>
       <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/web/app/components/share/text-generation/index.tsx b/web/app/components/share/text-generation/index.tsx
index 79690275dd..6ecc0594cd 100644
--- a/web/app/components/share/text-generation/index.tsx
+++ b/web/app/components/share/text-generation/index.tsx
@@ -478,7 +478,7 @@ const TextGeneration: FC<IMainProps> = ({
                 <AlertCircle className='w-4 h-4 text-[#D92D20]' />
                 <div className='ml-1 text-[#D92D20]'>{t('share.generation.batchFailed.info', { num: allFailedTaskList.length })}</div>
                 <Button
-                  type='primary'
+                  variant='primary'
                   className='ml-2 !h-8 !px-3'
                   onClick={handleRetryAllFailedTask}
                 >{t('share.generation.batchFailed.retry')}</Button>
diff --git a/web/app/components/share/text-generation/run-batch/index.tsx b/web/app/components/share/text-generation/run-batch/index.tsx
index 849d02445c..cab7fed194 100644
--- a/web/app/components/share/text-generation/run-batch/index.tsx
+++ b/web/app/components/share/text-generation/run-batch/index.tsx
@@ -42,7 +42,7 @@ const RunBatch: FC<IRunBatchProps> = ({
       <div className='mt-4 h-[1px] bg-gray-100'></div>
       <div className='flex justify-end'>
         <Button
-          type="primary"
+          variant="primary"
           className='mt-4 !h-8 !pl-3 !pr-4'
           onClick={handleSend}
           disabled={!isParsed || !isAllFinished}
diff --git a/web/app/components/share/text-generation/run-once/index.tsx b/web/app/components/share/text-generation/run-once/index.tsx
index e03efce3bb..6b5b06fe2d 100644
--- a/web/app/components/share/text-generation/run-once/index.tsx
+++ b/web/app/components/share/text-generation/run-once/index.tsx
@@ -125,7 +125,7 @@ const RunOnce: FC<IRunOnceProps> = ({
                 <span className='text-[13px]'>{t('common.operation.clear')}</span>
               </Button>
               <Button
-                type="primary"
+                variant="primary"
                 className='!h-8 !pl-3 !pr-4'
                 onClick={onSend}
                 disabled={false}
diff --git a/web/app/components/tools/add-tool-modal/index.tsx b/web/app/components/tools/add-tool-modal/index.tsx
index 53e25fb6d8..4861c43fb1 100644
--- a/web/app/components/tools/add-tool-modal/index.tsx
+++ b/web/app/components/tools/add-tool-modal/index.tsx
@@ -174,15 +174,15 @@ 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 type='primary' className='w-[176px] text-[13px] leading-[18px] font-medium' onClick={() => setIsShowEditCustomCollectionModal(true)}>
-                  <Plus className='w-4 h-4 mr-1'/>
+                <Button variant='primary' className='w-[176px] text-[13px] leading-[18px] font-medium' onClick={() => setIsShowEditCustomCollectionModal(true)}>
+                  <Plus className='w-4 h-4 mr-1' />
                   {t('tools.createCustomTool')}
                 </Button>
               </div>
             </div>
             <div className='px-2 py-1'>
-              <Type value={currentType} onSelect={setCurrentType}/>
-              <Category value={currentCategory} onSelect={setCurrentCategory}/>
+              <Type value={currentType} onSelect={setCurrentType} />
+              <Category value={currentCategory} onSelect={setCurrentCategory} />
             </div>
           </div>
           <div className='relative grow bg-white rounded-r-xl overflow-y-auto'>
diff --git a/web/app/components/tools/add-tool-modal/tools.tsx b/web/app/components/tools/add-tool-modal/tools.tsx
index 9ba5ba81a9..3681fd5046 100644
--- a/web/app/components/tools/add-tool-modal/tools.tsx
+++ b/web/app/components/tools/add-tool-modal/tools.tsx
@@ -99,23 +99,23 @@ const Blocks = ({
                 <div className={cn('grow text-sm text-gray-900 truncate', needAuth && 'opacity-30')}>{tool.label[language]}</div>
                 {!needAuth && added && (
                   <div className='flex items-center gap-1 rounded-[6px] border border-gray-100 px-2 py-[3px] bg-white text-gray-300 text-xs font-medium leading-[18px]'>
-                    <Check className='w-3 h-3'/>
+                    <Check className='w-3 h-3' />
                     {t('tools.addToolModal.added').toLocaleUpperCase()}
                   </div>
                 )}
                 {!needAuth && !added && addable && (
                   <Button
-                    type='default'
+                    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')}
                     onClick={() => onSelect(toolWithProvider, tool)}
                   >
-                    <Plus className='w-3 h-3'/>
+                    <Plus className='w-3 h-3' />
                     {t('tools.addToolModal.add').toLocaleUpperCase()}
                   </Button>
                 )}
                 {needAuth && (
                   <Button
-                    type='default'
+                    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')}
                     onClick={() => onAuthSetup(toolWithProvider)}
                   >{t('tools.auth.setup')}</Button>
@@ -135,7 +135,7 @@ const Blocks = ({
       )}
       {!tools.length && showWorkflowEmpty && (
         <div className='pt-[280px]'>
-          <Empty/>
+          <Empty />
         </div>
       )}
       {!!tools.length && tools.map(renderGroup)}
diff --git a/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx b/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
index 71fd1cd94d..696b4b2f26 100644
--- a/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
@@ -117,7 +117,7 @@ const ConfigCredential: FC<Props> = ({
                         </div>
                       }
                     >
-                      <HelpCircle className='ml-0.5 w-[14px] h-[14px] text-gray-400'/>
+                      <HelpCircle className='ml-0.5 w-[14px] h-[14px] text-gray-400' />
                     </Tooltip>
                   </div>
                   <input
@@ -142,7 +142,7 @@ const ConfigCredential: FC<Props> = ({
 
           <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' type='primary' onClick={() => {
+            <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium' variant='primary' onClick={() => {
               onChange(tempCredential)
               onHide()
             }}>{t('common.operation.save')}</Button>
diff --git a/web/app/components/tools/edit-custom-collection-modal/get-schema.tsx b/web/app/components/tools/edit-custom-collection-modal/get-schema.tsx
index ac1ae55f77..345eef4814 100644
--- a/web/app/components/tools/edit-custom-collection-modal/get-schema.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/get-schema.tsx
@@ -74,7 +74,7 @@ const GetSchema: FC<Props> = ({
               />
               <Button
                 className='absolute top-1 right-1 !h-6 !px-2 text-xs font-medium'
-                type='primary'
+                variant='primary'
                 disabled={!importUrl}
                 onClick={handleImportFromUrl}
                 loading={isParsing}
diff --git a/web/app/components/tools/edit-custom-collection-modal/index.tsx b/web/app/components/tools/edit-custom-collection-modal/index.tsx
index ba70427929..605892e6c8 100644
--- a/web/app/components/tools/edit-custom-collection-modal/index.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/index.tsx
@@ -307,7 +307,7 @@ const EditCustomCollectionModal: FC<Props> = ({
               }
               <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' type='primary' onClick={handleSave}>{t('common.operation.save')}</Button>
+                <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium' variant='primary' onClick={handleSave}>{t('common.operation.save')}</Button>
               </div>
             </div>
           </div>
diff --git a/web/app/components/tools/edit-custom-collection-modal/test-api.tsx b/web/app/components/tools/edit-custom-collection-modal/test-api.tsx
index 793589800a..1dd80b1213 100644
--- a/web/app/components/tools/edit-custom-collection-modal/test-api.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/test-api.tsx
@@ -107,7 +107,7 @@ const TestApi: FC<Props> = ({
               </div>
 
             </div>
-            <Button type='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 !text-[13px] leading-[18px] font-medium' 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>
diff --git a/web/app/components/tools/provider/detail.tsx b/web/app/components/tools/provider/detail.tsx
index bf653eda4c..cb945d2c6f 100644
--- a/web/app/components/tools/provider/detail.tsx
+++ b/web/app/components/tools/provider/detail.tsx
@@ -197,7 +197,7 @@ const ProviderDetail = ({
       <div className='flex items-center py-1 gap-2'>
         <div className='relative shrink-0'>
           {typeof collection.icon === 'string' && (
-            <div className='w-8 h-8 bg-center bg-cover bg-no-repeat rounded-md' style={{ backgroundImage: `url(${collection.icon})` }}/>
+            <div className='w-8 h-8 bg-center bg-cover bg-no-repeat rounded-md' style={{ backgroundImage: `url(${collection.icon})` }} />
           )}
           {typeof collection.icon !== 'string' && (
             <AppIcon
@@ -217,7 +217,7 @@ const ProviderDetail = ({
       <div className='flex gap-1 border-b-[0.5px] border-black/5'>
         {(collection.type === CollectionType.builtIn) && needAuth && (
           <Button
-            type={isAuthed ? 'default' : 'primary'}
+            variant={isAuthed ? 'default' : 'primary'}
             className={cn('shrink-0 my-3 w-full flex items-center', isAuthed && 'bg-white')}
             onClick={() => {
               if (collection.type === CollectionType.builtIn || collection.type === CollectionType.model)
@@ -243,7 +243,7 @@ const ProviderDetail = ({
         {collection.type === CollectionType.workflow && !isDetailLoading && customCollection && (
           <>
             <Button
-              type='primary'
+              variant='primary'
               className={cn('shrink-0 my-3 w-[183px] flex items-center')}
             >
               <a className='flex items-center text-white' href={`/app/${(customCollection as WorkflowToolProviderResponse).workflow_app_id}/workflow`} rel='noreferrer' target='_blank'>
@@ -263,7 +263,7 @@ const ProviderDetail = ({
       </div>
       {/* Tools */}
       <div className='pt-3'>
-        {isDetailLoading && <div className='flex h-[200px]'><Loading type='app'/></div>}
+        {isDetailLoading && <div className='flex h-[200px]'><Loading type='app' /></div>}
         {!isDetailLoading && (
           <div className='text-xs font-medium leading-6 text-gray-500'>
             {collection.type === CollectionType.workflow && <span className=''>{t('tools.createTool.toolInput.title').toLocaleUpperCase()}</span>}
diff --git a/web/app/components/tools/setting/build-in/config-credentials.tsx b/web/app/components/tools/setting/build-in/config-credentials.tsx
index b315852e02..1f2f8ab8c1 100644
--- a/web/app/components/tools/setting/build-in/config-credentials.tsx
+++ b/web/app/components/tools/setting/build-in/config-credentials.tsx
@@ -91,7 +91,7 @@ const ConfigCredential: FC<Props> = ({
                   }
                   < 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' type='primary' onClick={() => onSaved(tempCredential)}>{t('common.operation.save')}</Button>
+                    <Button className='flex items-center h-8 !px-3 !text-[13px] font-medium' variant='primary' onClick={() => onSaved(tempCredential)}>{t('common.operation.save')}</Button>
                   </div>
                 </div>
               </>
diff --git a/web/app/components/tools/workflow-tool/confirm-modal/index.tsx b/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
index 7c0c0d9a33..7852013bce 100644
--- a/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
+++ b/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
@@ -21,7 +21,7 @@ const ConfirmModal = ({ show, onConfirm, onClose }: ConfirmModalProps) => {
     <Modal
       className={cn('p-8 max-w-[600px] w-[600px]', s.bg)}
       isShow={show}
-      onClose={() => {}}
+      onClose={() => { }}
     >
       <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onClose}>
         <XClose className='w-4 h-4 text-gray-500' />
@@ -36,7 +36,7 @@ const ConfirmModal = ({ show, onConfirm, onClose }: ConfirmModalProps) => {
       <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]' type="warning" onClick={onConfirm}>{t('common.operation.confirm')}</Button>
+          <Button className='text-sm font-medium border-red-700 border-[0.5px]' variant="warning" onClick={onConfirm}>{t('common.operation.confirm')}</Button>
         </div>
       </div>
     </Modal>
diff --git a/web/app/components/tools/workflow-tool/index.tsx b/web/app/components/tools/workflow-tool/index.tsx
index 6fbcf33769..ca3d8af590 100644
--- a/web/app/components/tools/workflow-tool/index.tsx
+++ b/web/app/components/tools/workflow-tool/index.tsx
@@ -208,7 +208,7 @@ const WorkflowToolAsModal: FC<Props> = ({
                               </div>
                             )}
                             {item.name !== '__image' && (
-                              <MethodSelector value={item.form} onChange={value => handleParameterChange('form', value, index)}/>
+                              <MethodSelector value={item.form} onChange={value => handleParameterChange('form', value, index)} />
                             )}
                           </td>
                           <td className="p-2 pl-3 text-gray-500 w-[236px]">
@@ -246,7 +246,7 @@ const WorkflowToolAsModal: FC<Props> = ({
               )}
               <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' type='primary' onClick={() => {
+                <Button disabled={!label || !name || !isNameValid(name)} className='flex items-center h-8 !px-3 !text-[13px] font-medium' variant='primary' onClick={() => {
                   if (isAdd)
                     onConfirm()
                   else
diff --git a/web/app/components/workflow/header/index.tsx b/web/app/components/workflow/header/index.tsx
index 5245ce39bf..190d7d211d 100644
--- a/web/app/components/workflow/header/index.tsx
+++ b/web/app/components/workflow/header/index.tsx
@@ -206,7 +206,7 @@ const Header: FC = () => {
             <ViewHistory withText />
             <div className='mx-2 w-[1px] h-3.5 bg-gray-200'></div>
             <Button
-              type='primary'
+              variant='primary'
               className={`
                 mr-2 px-3 py-0 h-8 text-[13px] font-medium
                 border-[0.5px] border-gray-200 shadow-xs
@@ -242,7 +242,7 @@ const Header: FC = () => {
             <Button
               className='px-3 py-0 h-8 text-[13px] font-medium shadow-xs'
               onClick={handleRestore}
-              type='primary'
+              variant='primary'
             >
               {t('workflow.common.restore')}
             </Button>
diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx
index fd7c02eaba..77ab05d097 100644
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx
@@ -141,7 +141,7 @@ const BeforeRunForm: FC<BeforeRunFormProps> = ({
                 <StopCircle className='w-4 h-4 text-gray-500' />
               </div>
             )}
-            <Button disabled={!isFileLoaded || isRunning} type='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 !h-8 flex items-center space-x-2 text-[13px]' onClick={handleRun}>
               {isRunning && <Loading02 className='animate-spin w-4 h-4 text-white' />}
               <div>{t(`${i18nPrefix}.${isRunning ? 'running' : 'startRun'}`)}</div>
             </Button>
diff --git a/web/app/components/workflow/nodes/http/components/authorization/index.tsx b/web/app/components/workflow/nodes/http/components/authorization/index.tsx
index f0c65f17c3..05e4d48031 100644
--- a/web/app/components/workflow/nodes/http/components/authorization/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/authorization/index.tsx
@@ -140,7 +140,7 @@ 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 type='primary' onClick={handleConfirm} className='flex items-center !h-8 leading-[18px] !text-[13px] !font-medium'>{t('common.operation.save')}</Button>
+          <Button variant='primary' onClick={handleConfirm} className='flex items-center !h-8 leading-[18px] !text-[13px] !font-medium'>{t('common.operation.save')}</Button>
         </div>
       </div>
     </Modal>
diff --git a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
index 1610704c67..97e90cf02d 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
+++ b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
@@ -181,7 +181,7 @@ const AddExtractParameter: FC<Props> = ({
             </div>
             <div className='mt-4 flex justify-end space-x-2'>
               <Button className='flex !h-8 !w-[95px] text-[13px] font-medium text-gray-700' onClick={hideModal} >{t('common.operation.cancel')}</Button>
-              <Button className='flex !h-8 !w-[95px] text-[13px] font-medium' type='primary' onClick={handleSave} >{isAdd ? t('common.operation.add') : t('common.operation.save')}</Button>
+              <Button className='flex !h-8 !w-[95px] text-[13px] font-medium' variant='primary' onClick={handleSave} >{isAdd ? t('common.operation.add') : t('common.operation.save')}</Button>
             </div>
           </div>
         </Modal>
diff --git a/web/app/components/workflow/nodes/tool/panel.tsx b/web/app/components/workflow/nodes/tool/panel.tsx
index e57ff6e5c2..dd263e9e4e 100644
--- a/web/app/components/workflow/nodes/tool/panel.tsx
+++ b/web/app/components/workflow/nodes/tool/panel.tsx
@@ -61,7 +61,7 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
         <>
           <div className='px-4 pb-3'>
             <Button
-              type='primary'
+              variant='primary'
               className='w-full !h-8'
               onClick={showSetAuthModal}
             >
diff --git a/web/app/components/workflow/panel/inputs-panel.tsx b/web/app/components/workflow/panel/inputs-panel.tsx
index cce27ae038..61fe56b870 100644
--- a/web/app/components/workflow/panel/inputs-panel.tsx
+++ b/web/app/components/workflow/panel/inputs-panel.tsx
@@ -103,7 +103,7 @@ const InputsPanel = ({ onRun }: Props) => {
       </div>
       <div className='flex items-center justify-between px-4 py-2'>
         <Button
-          type='primary'
+          variant='primary'
           disabled={!canRun || workflowRunningData?.result?.status === WorkflowRunningStatus.Running}
           className='py-0 w-full h-8 rounded-lg text-[13px] font-medium'
           onClick={doRun}
diff --git a/web/app/init/InitPasswordPopup.tsx b/web/app/init/InitPasswordPopup.tsx
index 545d4722b2..cbf25f43b2 100644
--- a/web/app/init/InitPasswordPopup.tsx
+++ b/web/app/init/InitPasswordPopup.tsx
@@ -69,7 +69,7 @@ const InitPasswordPopup = () => {
               </div>
             </div>
             <div className="flex flex-row flex-wrap justify-stretch p-0">
-              <Button type="primary" onClick={handleValidation} className="basis-full min-w-28">
+              <Button variant="primary" onClick={handleValidation} className="basis-full min-w-28">
                 {t('login.validate')}
               </Button>
             </div>
diff --git a/web/app/install/installForm.tsx b/web/app/install/installForm.tsx
index 414bd9d6fd..7270b4f450 100644
--- a/web/app/install/installForm.tsx
+++ b/web/app/install/installForm.tsx
@@ -148,7 +148,7 @@ const InstallForm = () => {
               </div>
 
               <div>
-                <Button type='primary' className='w-full !fone-medium !text-sm' onClick={handleSetting}>
+                <Button variant='primary' className='w-full !fone-medium !text-sm' onClick={handleSetting}>
                   {t('login.installBtn')}
                 </Button>
               </div>
diff --git a/web/app/signin/normalForm.tsx b/web/app/signin/normalForm.tsx
index 60f21c0341..988aec28bf 100644
--- a/web/app/signin/normalForm.tsx
+++ b/web/app/signin/normalForm.tsx
@@ -156,7 +156,7 @@ const NormalForm = () => {
               <div className='w-full'>
                 <a href={getPurifyHref(`${apiPrefix}/oauth/login/github`)}>
                   <Button
-                    type='default'
+                    variant='default'
                     disabled={isLoading}
                     className='w-full hover:!bg-gray-50 !text-sm !font-medium'
                   >
@@ -175,7 +175,7 @@ const NormalForm = () => {
               <div className='w-full'>
                 <a href={getPurifyHref(`${apiPrefix}/oauth/login/google`)}>
                   <Button
-                    type='default'
+                    variant='default'
                     disabled={isLoading}
                     className='w-full hover:!bg-gray-50 !text-sm !font-medium'
                   >
@@ -271,7 +271,7 @@ const NormalForm = () => {
                 <div className='mb-2'>
                   <Button
                     tabIndex={0}
-                    type='primary'
+                    variant='primary'
                     onClick={handleEmailPasswordLogin}
                     disabled={isLoading}
                     className="w-full !fone-medium !text-sm"
diff --git a/web/app/signin/oneMoreStep.tsx b/web/app/signin/oneMoreStep.tsx
index bb2a6c51b2..08342a90e7 100644
--- a/web/app/signin/oneMoreStep.tsx
+++ b/web/app/signin/oneMoreStep.tsx
@@ -145,7 +145,7 @@ const OneMoreStep = () => {
           </div>
           <div>
             <Button
-              type='primary'
+              variant='primary'
               className='w-full !fone-medium !text-sm'
               disabled={state.formState === 'processing'}
               onClick={() => {
diff --git a/web/app/signin/userSSOForm.tsx b/web/app/signin/userSSOForm.tsx
index d5f92e7ab6..a841ce18db 100644
--- a/web/app/signin/userSSOForm.tsx
+++ b/web/app/signin/userSSOForm.tsx
@@ -87,7 +87,7 @@ const UserSSOForm: FC<UserSSOFormProps> = ({
         <div className="w-full mx-auto mt-10">
           <Button
             tabIndex={0}
-            type='primary'
+            variant='primary'
             onClick={() => { handleSSOLogin() }}
             disabled={isLoading}
             className="w-full !fone-medium !text-sm"