diff --git a/web/app/components/base/chat/embedded-chatbot/config-panel/index.tsx b/web/app/components/base/chat/embedded-chatbot/config-panel/index.tsx
index 2f1f6069cf..29170cd3b0 100644
--- a/web/app/components/base/chat/embedded-chatbot/config-panel/index.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/config-panel/index.tsx
@@ -94,7 +94,7 @@ const ConfigPanel = () => {
               <Form />
               <div className={cn('pl-[136px] flex items-center', isMobile && '!pl-0')}>
                 <Button
-                  type='primary'
+                  variant='primary'
                   className='mr-2 text-sm font-medium'
                   onClick={() => {
                     setCollapsed(true)
@@ -119,7 +119,7 @@ const ConfigPanel = () => {
               <Form />
               <Button
                 className={cn('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/datasets/create/step-one/index.tsx b/web/app/components/datasets/create/step-one/index.tsx
index d8cc51b0a3..0416a68abc 100644
--- a/web/app/components/datasets/create/step-one/index.tsx
+++ b/web/app/components/datasets/create/step-one/index.tsx
@@ -239,7 +239,7 @@ const StepOne = ({
                   <VectorSpaceFull />
                 </div>
               )}
-              <Button disabled={isShowVectorSpaceFull || !websitePages.length} className={s.submitButton} type='primary' onClick={onStepChange}>{t('datasetCreation.stepOne.button')}</Button>
+              <Button disabled={isShowVectorSpaceFull || !websitePages.length} className={s.submitButton} variant='primary' onClick={onStepChange}>{t('datasetCreation.stepOne.button')}</Button>
             </>
           )}
           {!datasetId && (
diff --git a/web/app/components/datasets/create/website/firecrawl/base/url-input.tsx b/web/app/components/datasets/create/website/firecrawl/base/url-input.tsx
index 2240a378dc..2e664f4886 100644
--- a/web/app/components/datasets/create/website/firecrawl/base/url-input.tsx
+++ b/web/app/components/datasets/create/website/firecrawl/base/url-input.tsx
@@ -35,7 +35,7 @@ const UrlInput: FC<Props> = ({
         placeholder='https://docs.dify.ai'
       />
       <Button
-        type='primary'
+        variant='primary'
         onClick={handleOnRun}
         className='ml-2 !h-8 text-[13px] font-medium'
         loading={isRunning}
diff --git a/web/app/components/datasets/create/website/no-data.tsx b/web/app/components/datasets/create/website/no-data.tsx
index 35eb35f709..5dc70d5aa4 100644
--- a/web/app/components/datasets/create/website/no-data.tsx
+++ b/web/app/components/datasets/create/website/no-data.tsx
@@ -27,7 +27,7 @@ const NoData: FC<Props> = ({
           {t(`${I18N_PREFIX}.fireCrawlNotConfiguredDescription`)}
         </div>
       </div>
-      <Button type='primary' onClick={onConfig} className='!h-8 text-[13px] font-medium ' >
+      <Button variant='primary' onClick={onConfig} className='!h-8 text-[13px] font-medium ' >
         {t(`${I18N_PREFIX}.configure`)}
       </Button>
     </div>
diff --git a/web/app/components/datasets/documents/rename-modal.tsx b/web/app/components/datasets/documents/rename-modal.tsx
index 545c786258..401115b7b9 100644
--- a/web/app/components/datasets/documents/rename-modal.tsx
+++ b/web/app/components/datasets/documents/rename-modal.tsx
@@ -66,7 +66,7 @@ const RenameModal: 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={handleSave} loading={saveLoading}>{t('common.operation.save')}</Button>
+        <Button variant='primary' className='flex-shrink-0' onClick={handleSave} loading={saveLoading}>{t('common.operation.save')}</Button>
       </div>
     </Modal>
   )
diff --git a/web/app/components/header/account-setting/data-source-page/data-source-website/config-firecrawl-modal.tsx b/web/app/components/header/account-setting/data-source-page/data-source-website/config-firecrawl-modal.tsx
index 983fb29b03..8fb2da70a4 100644
--- a/web/app/components/header/account-setting/data-source-page/data-source-website/config-firecrawl-modal.tsx
+++ b/web/app/components/header/account-setting/data-source-page/data-source-website/config-firecrawl-modal.tsx
@@ -130,7 +130,7 @@ const ConfigFirecrawlModal: FC<Props> = ({
                   </Button>
                   <Button
                     className='h-9 text-sm font-medium'
-                    type='primary'
+                    variant='primary'
                     onClick={handleSave}
                     loading={isSaving}
                   >
diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/model-load-balancing-entry-modal.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/model-load-balancing-entry-modal.tsx
index a2c2712653..3da5838e11 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/model-load-balancing-entry-modal.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/model-load-balancing-entry-modal.tsx
@@ -289,7 +289,7 @@ const ModelLoadBalancingEntryModal: FC<ModelModalProps> = ({
                   </Button>
                   <Button
                     className='h-9 text-sm font-medium'
-                    type='primary'
+                    variant='primary'
                     onClick={handleSave}
                     disabled={loading || filteredRequiredFormSchemas.some(item => value[item.variable] === undefined)}
                   >
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
index b2b7ff29b9..5739e2a3b9 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
@@ -171,7 +171,7 @@ const ModelLoadBalancingModal = ({ provider, model, open = false, onClose, onSav
             <div className='flex items-center justify-end gap-2 mt-6'>
               <Button onClick={onClose}>{t('common.operation.cancel')}</Button>
               <Button
-                type='primary'
+                variant='primary'
                 onClick={handleSave}
                 disabled={
                   loading
diff --git a/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/component.tsx b/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/component.tsx
index 5819bc8bde..8065b8abf8 100644
--- a/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/component.tsx
+++ b/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/component.tsx
@@ -87,7 +87,7 @@ const LinkEditorComponent = ({
                       autoFocus
                     />
                     <Button
-                      type='primary'
+                      variant='primary'
                       className={cn(
                         'py-0 px-2 h-6 text-xs',
                         !url && 'cursor-not-allowed',
diff --git a/web/package.json b/web/package.json
index 832ad6ef44..bd0ae52c5b 100644
--- a/web/package.json
+++ b/web/package.json
@@ -33,6 +33,7 @@
     "@tailwindcss/line-clamp": "^0.4.4",
     "@tailwindcss/typography": "^0.5.9",
     "ahooks": "^3.7.5",
+    "class-variance-authority": "^0.7.0",
     "classnames": "^2.3.2",
     "copy-to-clipboard": "^3.3.3",
     "crypto-js": "^4.2.0",
@@ -137,4 +138,4 @@
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0"
   }
-}
\ No newline at end of file
+}
diff --git a/web/yarn.lock b/web/yarn.lock
index 6e90ef839f..63f7216622 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -1920,6 +1920,13 @@ ci-info@^3.6.1:
   resolved "https://registry.npmjs.org/ci-info/-/ci-info-3.8.0.tgz"
   integrity sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==
 
+class-variance-authority@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz#1c3134d634d80271b1837452b06d821915954522"
+  integrity sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==
+  dependencies:
+    clsx "2.0.0"
+
 classcat@^5.0.3, classcat@^5.0.4:
   version "5.0.4"
   resolved "https://registry.npmjs.org/classcat/-/classcat-5.0.4.tgz"
@@ -1975,6 +1982,11 @@ client-only@0.0.1, client-only@^0.0.1:
   resolved "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
 
+clsx@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz#12658f3fd98fafe62075595a5c30e43d18f3d00b"
+  integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==
+
 code-inspector-core@0.13.0:
   version "0.13.0"
   resolved "https://registry.npmjs.org/code-inspector-core/-/code-inspector-core-0.13.0.tgz"