diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx
index 72913b4934..caf6562a3e 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx
@@ -5,7 +5,6 @@ import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'
 import Divider from '@/app/components/base/divider'
 import { LinkExternal02 } from '@/app/components/base/icons/src/vender/line/general'
@@ -14,6 +13,7 @@ import {
   PortalToFollowElem,
   PortalToFollowElemContent,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { addTracingConfig, removeTracingConfig, updateTracingConfig } from '@/service/apps'
 import { docURL } from './config'
@@ -621,7 +621,7 @@ const ProviderConfigModal: FC<Props> = ({
                       </div>
                       <div className="my-8 flex h-8 items-center justify-between">
                         <a
-                          className="flex items-center space-x-1 text-xs font-normal leading-[18px] text-[#155EEF]"
+                          className="flex items-center space-x-1 text-xs leading-[18px] font-normal text-[#155EEF]"
                           target="_blank"
                           href={docURL[type]}
                         >
diff --git a/web/app/(humanInputLayout)/form/[token]/form.tsx b/web/app/(humanInputLayout)/form/[token]/form.tsx
index 221420aade..898dab8f4a 100644
--- a/web/app/(humanInputLayout)/form/[token]/form.tsx
+++ b/web/app/(humanInputLayout)/form/[token]/form.tsx
@@ -1,5 +1,5 @@
 'use client'
-import type { ButtonProps } from '@/app/components/base/button'
+import type { ButtonProps } from '@/app/components/base/ui/button'
 import type { FormInputItem, UserAction } from '@/app/components/workflow/nodes/human-input/types'
 import type { SiteInfo } from '@/models/share'
 import type { HumanInputFormError } from '@/service/use-share'
@@ -13,12 +13,12 @@ import * as React from 'react'
 import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
-import Button from '@/app/components/base/button'
 import ContentItem from '@/app/components/base/chat/chat/answer/human-input-content/content-item'
 import ExpirationTime from '@/app/components/base/chat/chat/answer/human-input-content/expiration-time'
 import { getButtonStyle } from '@/app/components/base/chat/chat/answer/human-input-content/utils'
 import Loading from '@/app/components/base/loading'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
+import { Button } from '@/app/components/base/ui/button'
 import useDocumentTitle from '@/hooks/use-document-title'
 import { useParams } from '@/next/navigation'
 import { useGetHumanInputForm, useSubmitHumanInputForm } from '@/service/use-share'
@@ -100,7 +100,7 @@ const FormContent = () => {
   if (success) {
     return (
       <div className={cn('flex h-full w-full flex-col items-center justify-center')}>
-        <div className="min-w-[480px] max-w-[640px]">
+        <div className="max-w-[640px] min-w-[480px]">
           <div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 radius-3xl border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-xs">
             <div className="h-[56px] w-[56px] shrink-0 rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
               <RiCheckboxCircleFill className="h-8 w-8 text-text-success" />
@@ -109,7 +109,7 @@ const FormContent = () => {
               <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.thanks', { ns: 'share' })}</div>
               <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.recorded', { ns: 'share' })}</div>
             </div>
-            <div className="system-2xs-regular-uppercase shrink-0 text-text-tertiary">{t('humanInput.submissionID', { id: token, ns: 'share' })}</div>
+            <div className="shrink-0 system-2xs-regular-uppercase text-text-tertiary">{t('humanInput.submissionID', { id: token, ns: 'share' })}</div>
           </div>
           <div className="flex flex-row-reverse px-2 py-3">
             <div className={cn(
@@ -128,7 +128,7 @@ const FormContent = () => {
   if (expired) {
     return (
       <div className={cn('flex h-full w-full flex-col items-center justify-center')}>
-        <div className="min-w-[480px] max-w-[640px]">
+        <div className="max-w-[640px] min-w-[480px]">
           <div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 radius-3xl border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-xs">
             <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
               <RiInformation2Fill className="h-8 w-8 text-text-accent" />
@@ -137,7 +137,7 @@ const FormContent = () => {
               <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.sorry', { ns: 'share' })}</div>
               <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.expired', { ns: 'share' })}</div>
             </div>
-            <div className="system-2xs-regular-uppercase shrink-0 text-text-tertiary">{t('humanInput.submissionID', { id: token, ns: 'share' })}</div>
+            <div className="shrink-0 system-2xs-regular-uppercase text-text-tertiary">{t('humanInput.submissionID', { id: token, ns: 'share' })}</div>
           </div>
           <div className="flex flex-row-reverse px-2 py-3">
             <div className={cn(
@@ -156,7 +156,7 @@ const FormContent = () => {
   if (submitted) {
     return (
       <div className={cn('flex h-full w-full flex-col items-center justify-center')}>
-        <div className="min-w-[480px] max-w-[640px]">
+        <div className="max-w-[640px] min-w-[480px]">
           <div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 radius-3xl border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-xs">
             <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
               <RiInformation2Fill className="h-8 w-8 text-text-accent" />
@@ -165,7 +165,7 @@ const FormContent = () => {
               <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.sorry', { ns: 'share' })}</div>
               <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.completed', { ns: 'share' })}</div>
             </div>
-            <div className="system-2xs-regular-uppercase shrink-0 text-text-tertiary">{t('humanInput.submissionID', { id: token, ns: 'share' })}</div>
+            <div className="shrink-0 system-2xs-regular-uppercase text-text-tertiary">{t('humanInput.submissionID', { id: token, ns: 'share' })}</div>
           </div>
           <div className="flex flex-row-reverse px-2 py-3">
             <div className={cn(
@@ -184,7 +184,7 @@ const FormContent = () => {
   if (rateLimitExceeded) {
     return (
       <div className={cn('flex h-full w-full flex-col items-center justify-center')}>
-        <div className="min-w-[480px] max-w-[640px]">
+        <div className="max-w-[640px] min-w-[480px]">
           <div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 radius-3xl border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-xs">
             <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
               <RiErrorWarningFill className="h-8 w-8 text-text-destructive" />
@@ -210,7 +210,7 @@ const FormContent = () => {
   if (!formData) {
     return (
       <div className={cn('flex h-full w-full flex-col items-center justify-center')}>
-        <div className="min-w-[480px] max-w-[640px]">
+        <div className="max-w-[640px] min-w-[480px]">
           <div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 radius-3xl border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-xs">
             <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
               <RiErrorWarningFill className="h-8 w-8 text-text-destructive" />
@@ -245,7 +245,7 @@ const FormContent = () => {
           background={site.icon_background}
           imageUrl={site.icon_url}
         />
-        <div className="system-xl-semibold grow text-text-primary">{site.title}</div>
+        <div className="grow system-xl-semibold text-text-primary">{site.title}</div>
       </div>
       <div className="h-0 w-full grow overflow-y-auto">
         <div className="border-components-divider-subtle radius-3xl border bg-chat-bubble-bg p-4 shadow-lg backdrop-blur-xs">
diff --git a/web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx b/web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx
index b71e6b4767..d19e5a7d2d 100644
--- a/web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx
+++ b/web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx
@@ -2,8 +2,8 @@
 import { RiArrowLeftLine, RiMailSendFill } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import Countdown from '@/app/components/signin/countdown'
 import { useLocale } from '@/context/i18n'
@@ -62,9 +62,9 @@ export default function CheckCode() {
       <div className="inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge text-text-accent-light-mode-only shadow-lg">
         <RiMailSendFill className="h-6 w-6 text-2xl" />
       </div>
-      <div className="pb-4 pt-2">
+      <div className="pt-2 pb-4">
         <h2 className="title-4xl-semi-bold text-text-primary">{t('checkCode.checkYourEmail', { ns: 'login' })}</h2>
-        <p className="body-md-regular mt-2 text-text-secondary">
+        <p className="mt-2 body-md-regular text-text-secondary">
           <span>
             {t('checkCode.tipsPrefix', { ns: 'login' })}
             <strong>{email}</strong>
@@ -76,7 +76,7 @@ export default function CheckCode() {
 
       <form action="">
         <input type="text" className="hidden" />
-        <label htmlFor="code" className="system-md-semibold mb-1 text-text-secondary">{t('checkCode.verificationCode', { ns: 'login' })}</label>
+        <label htmlFor="code" className="mb-1 system-md-semibold text-text-secondary">{t('checkCode.verificationCode', { ns: 'login' })}</label>
         <Input value={code} onChange={e => setVerifyCode(e.target.value)} maxLength={6} className="mt-1" placeholder={t('checkCode.verificationCodePlaceholder', { ns: 'login' }) || ''} />
         <Button loading={loading} disabled={loading} className="my-3 w-full" variant="primary" onClick={verify}>{t('checkCode.verify', { ns: 'login' })}</Button>
         <Countdown onResend={resendCode} />
@@ -88,7 +88,7 @@ export default function CheckCode() {
         <div className="bg-background-default-dimm inline-block rounded-full p-1">
           <RiArrowLeftLine size={12} />
         </div>
-        <span className="system-xs-regular ml-2">{t('back', { ns: 'login' })}</span>
+        <span className="ml-2 system-xs-regular">{t('back', { ns: 'login' })}</span>
       </div>
     </div>
   )
diff --git a/web/app/(shareLayout)/webapp-reset-password/page.tsx b/web/app/(shareLayout)/webapp-reset-password/page.tsx
index a25b4bb4ef..cb6ece219c 100644
--- a/web/app/(shareLayout)/webapp-reset-password/page.tsx
+++ b/web/app/(shareLayout)/webapp-reset-password/page.tsx
@@ -3,8 +3,8 @@ import { RiArrowLeftLine, RiLockPasswordLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { COUNT_DOWN_KEY, COUNT_DOWN_TIME_MS } from '@/app/components/signin/countdown'
 import { emailRegex } from '@/config'
@@ -64,9 +64,9 @@ export default function CheckCode() {
       <div className="inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge shadow-lg">
         <RiLockPasswordLine className="h-6 w-6 text-2xl text-text-accent-light-mode-only" />
       </div>
-      <div className="pb-4 pt-2">
+      <div className="pt-2 pb-4">
         <h2 className="title-4xl-semi-bold text-text-primary">{t('resetPassword', { ns: 'login' })}</h2>
-        <p className="body-md-regular mt-2 text-text-secondary">
+        <p className="mt-2 body-md-regular text-text-secondary">
           {t('resetPasswordDesc', { ns: 'login' })}
         </p>
       </div>
@@ -74,7 +74,7 @@ export default function CheckCode() {
       <form onSubmit={noop}>
         <input type="text" className="hidden" />
         <div className="mb-2">
-          <label htmlFor="email" className="system-md-semibold my-2 text-text-secondary">{t('email', { ns: 'login' })}</label>
+          <label htmlFor="email" className="my-2 system-md-semibold text-text-secondary">{t('email', { ns: 'login' })}</label>
           <div className="mt-1">
             <Input id="email" type="email" disabled={loading} value={email} placeholder={t('emailPlaceholder', { ns: 'login' }) as string} onChange={e => setEmail(e.target.value)} />
           </div>
@@ -90,7 +90,7 @@ export default function CheckCode() {
         <div className="inline-block rounded-full bg-background-default-dimmed p-1">
           <RiArrowLeftLine size={12} />
         </div>
-        <span className="system-xs-regular ml-2">{t('backToLogin', { ns: 'login' })}</span>
+        <span className="ml-2 system-xs-regular">{t('backToLogin', { ns: 'login' })}</span>
       </Link>
     </div>
   )
diff --git a/web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx b/web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx
index bc8f651d17..5b89084ea1 100644
--- a/web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx
+++ b/web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx
@@ -3,8 +3,8 @@ import { RiCheckboxCircleFill } from '@remixicon/react'
 import { useCountDown } from 'ahooks'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { validPassword } from '@/config'
 import { useRouter, useSearchParams } from '@/next/navigation'
@@ -91,7 +91,7 @@ const ChangePasswordForm = () => {
             <h2 className="title-4xl-semi-bold text-text-primary">
               {t('changePassword', { ns: 'login' })}
             </h2>
-            <p className="body-md-regular mt-2 text-text-secondary">
+            <p className="mt-2 body-md-regular text-text-secondary">
               {t('changePasswordTip', { ns: 'login' })}
             </p>
           </div>
@@ -100,7 +100,7 @@ const ChangePasswordForm = () => {
             <div className="bg-white">
               {/* Password */}
               <div className="mb-5">
-                <label htmlFor="password" className="system-md-semibold my-2 text-text-secondary">
+                <label htmlFor="password" className="my-2 system-md-semibold text-text-secondary">
                   {t('account.newPassword', { ns: 'common' })}
                 </label>
                 <div className="relative mt-1">
@@ -122,11 +122,11 @@ const ChangePasswordForm = () => {
                     </Button>
                   </div>
                 </div>
-                <div className="body-xs-regular mt-1 text-text-secondary">{t('error.passwordInvalid', { ns: 'login' })}</div>
+                <div className="mt-1 body-xs-regular text-text-secondary">{t('error.passwordInvalid', { ns: 'login' })}</div>
               </div>
               {/* Confirm Password */}
               <div className="mb-5">
-                <label htmlFor="confirmPassword" className="system-md-semibold my-2 text-text-secondary">
+                <label htmlFor="confirmPassword" className="my-2 system-md-semibold text-text-secondary">
                   {t('account.confirmPassword', { ns: 'common' })}
                 </label>
                 <div className="relative mt-1">
diff --git a/web/app/(shareLayout)/webapp-signin/check-code/page.tsx b/web/app/(shareLayout)/webapp-signin/check-code/page.tsx
index e2296c5d20..b17fff4e52 100644
--- a/web/app/(shareLayout)/webapp-signin/check-code/page.tsx
+++ b/web/app/(shareLayout)/webapp-signin/check-code/page.tsx
@@ -3,8 +3,8 @@ import type { FormEvent } from 'react'
 import { RiArrowLeftLine, RiMailSendFill } from '@remixicon/react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import Countdown from '@/app/components/signin/countdown'
 import { useLocale } from '@/context/i18n'
@@ -100,9 +100,9 @@ export default function CheckCode() {
       <div className="inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge shadow-lg">
         <RiMailSendFill className="h-6 w-6 text-2xl text-text-accent-light-mode-only" />
       </div>
-      <div className="pb-4 pt-2">
+      <div className="pt-2 pb-4">
         <h2 className="title-4xl-semi-bold text-text-primary">{t('checkCode.checkYourEmail', { ns: 'login' })}</h2>
-        <p className="body-md-regular mt-2 text-text-secondary">
+        <p className="mt-2 body-md-regular text-text-secondary">
           <span>
             {t('checkCode.tipsPrefix', { ns: 'login' })}
             <strong>{email}</strong>
@@ -113,7 +113,7 @@ export default function CheckCode() {
       </div>
 
       <form onSubmit={handleSubmit}>
-        <label htmlFor="code" className="system-md-semibold mb-1 text-text-secondary">{t('checkCode.verificationCode', { ns: 'login' })}</label>
+        <label htmlFor="code" className="mb-1 system-md-semibold text-text-secondary">{t('checkCode.verificationCode', { ns: 'login' })}</label>
         <Input
           ref={codeInputRef}
           id="code"
@@ -133,7 +133,7 @@ export default function CheckCode() {
         <div className="bg-background-default-dimm inline-block rounded-full p-1">
           <RiArrowLeftLine size={12} />
         </div>
-        <span className="system-xs-regular ml-2">{t('back', { ns: 'login' })}</span>
+        <span className="ml-2 system-xs-regular">{t('back', { ns: 'login' })}</span>
       </div>
     </div>
   )
diff --git a/web/app/(shareLayout)/webapp-signin/components/mail-and-code-auth.tsx b/web/app/(shareLayout)/webapp-signin/components/mail-and-code-auth.tsx
index fbd6b216df..f600dba8b2 100644
--- a/web/app/(shareLayout)/webapp-signin/components/mail-and-code-auth.tsx
+++ b/web/app/(shareLayout)/webapp-signin/components/mail-and-code-auth.tsx
@@ -1,8 +1,8 @@
 import { noop } from 'es-toolkit/function'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { COUNT_DOWN_KEY, COUNT_DOWN_TIME_MS } from '@/app/components/signin/countdown'
 import { emailRegex } from '@/config'
@@ -52,7 +52,7 @@ export default function MailAndCodeAuth() {
     <form onSubmit={noop}>
       <input type="text" className="hidden" />
       <div className="mb-2">
-        <label htmlFor="email" className="system-md-semibold my-2 text-text-secondary">{t('email', { ns: 'login' })}</label>
+        <label htmlFor="email" className="my-2 system-md-semibold text-text-secondary">{t('email', { ns: 'login' })}</label>
         <div className="mt-1">
           <Input id="email" type="email" value={email} placeholder={t('emailPlaceholder', { ns: 'login' }) as string} onChange={e => setEmail(e.target.value)} />
         </div>
diff --git a/web/app/(shareLayout)/webapp-signin/components/mail-and-password-auth.tsx b/web/app/(shareLayout)/webapp-signin/components/mail-and-password-auth.tsx
index 1e9355e7ba..7fe5363927 100644
--- a/web/app/(shareLayout)/webapp-signin/components/mail-and-password-auth.tsx
+++ b/web/app/(shareLayout)/webapp-signin/components/mail-and-password-auth.tsx
@@ -2,8 +2,8 @@
 import { noop } from 'es-toolkit/function'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { emailRegex } from '@/config'
 import { useLocale } from '@/context/i18n'
@@ -103,7 +103,7 @@ export default function MailAndPasswordAuth({ isEmailSetup }: MailAndPasswordAut
   return (
     <form onSubmit={noop}>
       <div className="mb-3">
-        <label htmlFor="email" className="system-md-semibold my-2 text-text-secondary">
+        <label htmlFor="email" className="my-2 system-md-semibold text-text-secondary">
           {t('email', { ns: 'login' })}
         </label>
         <div className="mt-1">
diff --git a/web/app/(shareLayout)/webapp-signin/components/sso-auth.tsx b/web/app/(shareLayout)/webapp-signin/components/sso-auth.tsx
index 3178c638cc..d8759cc1d6 100644
--- a/web/app/(shareLayout)/webapp-signin/components/sso-auth.tsx
+++ b/web/app/(shareLayout)/webapp-signin/components/sso-auth.tsx
@@ -2,8 +2,8 @@
 import type { FC } from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { Lock01 } from '@/app/components/base/icons/src/vender/solid/security'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useRouter, useSearchParams } from '@/next/navigation'
 import { fetchMembersOAuth2SSOUrl, fetchMembersOIDCSSOUrl, fetchMembersSAMLSSOUrl } from '@/service/share'
diff --git a/web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx b/web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx
index d462ca6449..da1da8448b 100644
--- a/web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx
+++ b/web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx
@@ -10,10 +10,10 @@ import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ImageInput from '@/app/components/base/app-icon-picker/ImageInput'
 import getCroppedImg from '@/app/components/base/app-icon-picker/utils'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import { useLocalFileUploader } from '@/app/components/base/image-uploader/hooks'
 import { Avatar } from '@/app/components/base/ui/avatar'
+import { Button } from '@/app/components/base/ui/button'
 import { Dialog, DialogContent } from '@/app/components/base/ui/dialog'
 import { toast } from '@/app/components/base/ui/toast'
 import { DISABLE_UPLOAD_IMAGE_AS_ICON } from '@/config'
@@ -151,7 +151,7 @@ const AvatarWithEdit = ({ onSave, ...props }: AvatarWithEditProps) => {
 
       <Dialog open={isShowDeleteConfirm} onOpenChange={open => !open && setIsShowDeleteConfirm(false)}>
         <DialogContent className="w-[362px]! p-6!">
-          <div className="mb-3 text-text-primary title-2xl-semi-bold">{t('avatar.deleteTitle', { ns: 'common' })}</div>
+          <div className="mb-3 title-2xl-semi-bold text-text-primary">{t('avatar.deleteTitle', { ns: 'common' })}</div>
           <p className="mb-8 text-text-secondary">{t('avatar.deleteDescription', { ns: 'common' })}</p>
 
           <div className="flex w-full items-center justify-center gap-2">
@@ -159,7 +159,7 @@ const AvatarWithEdit = ({ onSave, ...props }: AvatarWithEditProps) => {
               {t('operation.cancel', { ns: 'common' })}
             </Button>
 
-            <Button variant="warning" className="w-full" onClick={handleDeleteAvatar}>
+            <Button variant="primary" destructive className="w-full" onClick={handleDeleteAvatar}>
               {t('operation.delete', { ns: 'common' })}
             </Button>
           </div>
diff --git a/web/app/account/(commonLayout)/account-page/email-change-modal.tsx b/web/app/account/(commonLayout)/account-page/email-change-modal.tsx
index 9eab047732..1b91c801bd 100644
--- a/web/app/account/(commonLayout)/account-page/email-change-modal.tsx
+++ b/web/app/account/(commonLayout)/account-page/email-change-modal.tsx
@@ -3,8 +3,8 @@ import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { Dialog, DialogContent } from '@/app/components/base/ui/dialog'
 import { toast } from '@/app/components/base/ui/toast'
 import { useRouter } from '@/next/navigation'
@@ -183,19 +183,19 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
   return (
     <Dialog open={show} onOpenChange={open => !open && onClose()}>
       <DialogContent className="w-[420px]! p-6!">
-        <div className="absolute right-5 top-5 cursor-pointer p-1.5" onClick={onClose}>
+        <div className="absolute top-5 right-5 cursor-pointer p-1.5" onClick={onClose}>
           <RiCloseLine className="h-5 w-5 text-text-tertiary" />
         </div>
         {step === STEP.start && (
           <>
-            <div className="pb-3 text-text-primary title-2xl-semi-bold">{t('account.changeEmail.title', { ns: 'common' })}</div>
-            <div className="space-y-0.5 pb-2 pt-1">
-              <div className="text-text-warning body-md-medium">{t('account.changeEmail.authTip', { ns: 'common' })}</div>
-              <div className="text-text-secondary body-md-regular">
+            <div className="pb-3 title-2xl-semi-bold text-text-primary">{t('account.changeEmail.title', { ns: 'common' })}</div>
+            <div className="space-y-0.5 pt-1 pb-2">
+              <div className="body-md-medium text-text-warning">{t('account.changeEmail.authTip', { ns: 'common' })}</div>
+              <div className="body-md-regular text-text-secondary">
                 <Trans
                   i18nKey="account.changeEmail.content1"
                   ns="common"
-                  components={{ email: <span className="text-text-primary body-md-medium"></span> }}
+                  components={{ email: <span className="body-md-medium text-text-primary"></span> }}
                   values={{ email }}
                 />
               </div>
@@ -220,19 +220,19 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
         )}
         {step === STEP.verifyOrigin && (
           <>
-            <div className="pb-3 text-text-primary title-2xl-semi-bold">{t('account.changeEmail.verifyEmail', { ns: 'common' })}</div>
-            <div className="space-y-0.5 pb-2 pt-1">
-              <div className="text-text-secondary body-md-regular">
+            <div className="pb-3 title-2xl-semi-bold text-text-primary">{t('account.changeEmail.verifyEmail', { ns: 'common' })}</div>
+            <div className="space-y-0.5 pt-1 pb-2">
+              <div className="body-md-regular text-text-secondary">
                 <Trans
                   i18nKey="account.changeEmail.content2"
                   ns="common"
-                  components={{ email: <span className="text-text-primary body-md-medium"></span> }}
+                  components={{ email: <span className="body-md-medium text-text-primary"></span> }}
                   values={{ email }}
                 />
               </div>
             </div>
             <div className="pt-3">
-              <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-medium">{t('account.changeEmail.codeLabel', { ns: 'common' })}</div>
+              <div className="mb-1 flex h-6 items-center system-sm-medium text-text-secondary">{t('account.changeEmail.codeLabel', { ns: 'common' })}</div>
               <Input
                 className="w-full!"
                 placeholder={t('account.changeEmail.codePlaceholder', { ns: 'common' })}
@@ -257,25 +257,25 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
                 {t('operation.cancel', { ns: 'common' })}
               </Button>
             </div>
-            <div className="mt-3 flex items-center gap-1 text-text-tertiary system-xs-regular">
+            <div className="mt-3 flex items-center gap-1 system-xs-regular text-text-tertiary">
               <span>{t('account.changeEmail.resendTip', { ns: 'common' })}</span>
               {time > 0 && (
                 <span>{t('account.changeEmail.resendCount', { ns: 'common', count: time })}</span>
               )}
               {!time && (
-                <span onClick={sendCodeToOriginEmail} className="cursor-pointer text-text-accent-secondary system-xs-medium">{t('account.changeEmail.resend', { ns: 'common' })}</span>
+                <span onClick={sendCodeToOriginEmail} className="cursor-pointer system-xs-medium text-text-accent-secondary">{t('account.changeEmail.resend', { ns: 'common' })}</span>
               )}
             </div>
           </>
         )}
         {step === STEP.newEmail && (
           <>
-            <div className="pb-3 text-text-primary title-2xl-semi-bold">{t('account.changeEmail.newEmail', { ns: 'common' })}</div>
-            <div className="space-y-0.5 pb-2 pt-1">
-              <div className="text-text-secondary body-md-regular">{t('account.changeEmail.content3', { ns: 'common' })}</div>
+            <div className="pb-3 title-2xl-semi-bold text-text-primary">{t('account.changeEmail.newEmail', { ns: 'common' })}</div>
+            <div className="space-y-0.5 pt-1 pb-2">
+              <div className="body-md-regular text-text-secondary">{t('account.changeEmail.content3', { ns: 'common' })}</div>
             </div>
             <div className="pt-3">
-              <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-medium">{t('account.changeEmail.emailLabel', { ns: 'common' })}</div>
+              <div className="mb-1 flex h-6 items-center system-sm-medium text-text-secondary">{t('account.changeEmail.emailLabel', { ns: 'common' })}</div>
               <Input
                 className="w-full!"
                 placeholder={t('account.changeEmail.emailPlaceholder', { ns: 'common' })}
@@ -284,10 +284,10 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
                 destructive={newEmailExited || unAvailableEmail}
               />
               {newEmailExited && (
-                <div className="mt-1 py-0.5 text-text-destructive body-xs-regular">{t('account.changeEmail.existingEmail', { ns: 'common' })}</div>
+                <div className="mt-1 py-0.5 body-xs-regular text-text-destructive">{t('account.changeEmail.existingEmail', { ns: 'common' })}</div>
               )}
               {unAvailableEmail && (
-                <div className="mt-1 py-0.5 text-text-destructive body-xs-regular">{t('account.changeEmail.unAvailableEmail', { ns: 'common' })}</div>
+                <div className="mt-1 py-0.5 body-xs-regular text-text-destructive">{t('account.changeEmail.unAvailableEmail', { ns: 'common' })}</div>
               )}
             </div>
             <div className="mt-3 space-y-2">
@@ -310,19 +310,19 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
         )}
         {step === STEP.verifyNew && (
           <>
-            <div className="pb-3 text-text-primary title-2xl-semi-bold">{t('account.changeEmail.verifyNew', { ns: 'common' })}</div>
-            <div className="space-y-0.5 pb-2 pt-1">
-              <div className="text-text-secondary body-md-regular">
+            <div className="pb-3 title-2xl-semi-bold text-text-primary">{t('account.changeEmail.verifyNew', { ns: 'common' })}</div>
+            <div className="space-y-0.5 pt-1 pb-2">
+              <div className="body-md-regular text-text-secondary">
                 <Trans
                   i18nKey="account.changeEmail.content4"
                   ns="common"
-                  components={{ email: <span className="text-text-primary body-md-medium"></span> }}
+                  components={{ email: <span className="body-md-medium text-text-primary"></span> }}
                   values={{ email: mail }}
                 />
               </div>
             </div>
             <div className="pt-3">
-              <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-medium">{t('account.changeEmail.codeLabel', { ns: 'common' })}</div>
+              <div className="mb-1 flex h-6 items-center system-sm-medium text-text-secondary">{t('account.changeEmail.codeLabel', { ns: 'common' })}</div>
               <Input
                 className="w-full!"
                 placeholder={t('account.changeEmail.codePlaceholder', { ns: 'common' })}
@@ -347,13 +347,13 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
                 {t('operation.cancel', { ns: 'common' })}
               </Button>
             </div>
-            <div className="mt-3 flex items-center gap-1 text-text-tertiary system-xs-regular">
+            <div className="mt-3 flex items-center gap-1 system-xs-regular text-text-tertiary">
               <span>{t('account.changeEmail.resendTip', { ns: 'common' })}</span>
               {time > 0 && (
                 <span>{t('account.changeEmail.resendCount', { ns: 'common', count: time })}</span>
               )}
               {!time && (
-                <span onClick={sendCodeToNewEmail} className="cursor-pointer text-text-accent-secondary system-xs-medium">{t('account.changeEmail.resend', { ns: 'common' })}</span>
+                <span onClick={sendCodeToNewEmail} className="cursor-pointer system-xs-medium text-text-accent-secondary">{t('account.changeEmail.resend', { ns: 'common' })}</span>
               )}
             </div>
           </>
diff --git a/web/app/account/(commonLayout)/account-page/index.tsx b/web/app/account/(commonLayout)/account-page/index.tsx
index 536d457c0a..8ad1b45467 100644
--- a/web/app/account/(commonLayout)/account-page/index.tsx
+++ b/web/app/account/(commonLayout)/account-page/index.tsx
@@ -8,9 +8,9 @@ import { useQueryClient } from '@tanstack/react-query'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import PremiumBadge from '@/app/components/base/premium-badge'
+import { Button } from '@/app/components/base/ui/button'
 import { Dialog, DialogContent } from '@/app/components/base/ui/dialog'
 import { toast } from '@/app/components/base/ui/toast'
 import Collapse from '@/app/components/header/account-setting/collapse'
@@ -140,20 +140,20 @@ export default function AccountPage() {
             imageUrl={icon_url}
           />
         </div>
-        <div className="mt-[3px] text-text-secondary system-sm-medium">{item.name}</div>
+        <div className="mt-[3px] system-sm-medium text-text-secondary">{item.name}</div>
       </div>
     )
   }
 
   return (
     <>
-      <div className="pb-3 pt-2">
-        <h4 className="text-text-primary title-2xl-semi-bold">{t('account.myAccount', { ns: 'common' })}</h4>
+      <div className="pt-2 pb-3">
+        <h4 className="title-2xl-semi-bold text-text-primary">{t('account.myAccount', { ns: 'common' })}</h4>
       </div>
       <div className="mb-8 flex items-center rounded-xl bg-gradient-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1 p-6">
         <AvatarWithEdit avatar={userProfile.avatar_url} name={userProfile.name} onSave={mutateUserProfile} size="3xl" />
         <div className="ml-4">
-          <p className="text-text-primary system-xl-semibold">
+          <p className="system-xl-semibold text-text-primary">
             {userProfile.name}
             {isEducationAccount && (
               <PremiumBadge size="s" color="blue" className="ml-1 !px-2">
@@ -162,16 +162,16 @@ export default function AccountPage() {
               </PremiumBadge>
             )}
           </p>
-          <p className="text-text-tertiary system-xs-regular">{userProfile.email}</p>
+          <p className="system-xs-regular text-text-tertiary">{userProfile.email}</p>
         </div>
       </div>
       <div className="mb-8">
         <div className={titleClassName}>{t('account.name', { ns: 'common' })}</div>
         <div className="mt-2 flex w-full items-center justify-between gap-2">
-          <div className="flex-1 rounded-lg bg-components-input-bg-normal p-2 text-components-input-text-filled system-sm-regular">
+          <div className="flex-1 rounded-lg bg-components-input-bg-normal p-2 system-sm-regular text-components-input-text-filled">
             <span className="pl-1">{userProfile.name}</span>
           </div>
-          <div className="cursor-pointer rounded-lg bg-components-button-tertiary-bg px-3 py-2 text-components-button-tertiary-text system-sm-medium" onClick={handleEditName}>
+          <div className="cursor-pointer rounded-lg bg-components-button-tertiary-bg px-3 py-2 system-sm-medium text-components-button-tertiary-text" onClick={handleEditName}>
             {t('operation.edit', { ns: 'common' })}
           </div>
         </div>
@@ -179,11 +179,11 @@ export default function AccountPage() {
       <div className="mb-8">
         <div className={titleClassName}>{t('account.email', { ns: 'common' })}</div>
         <div className="mt-2 flex w-full items-center justify-between gap-2">
-          <div className="flex-1 rounded-lg bg-components-input-bg-normal p-2 text-components-input-text-filled system-sm-regular">
+          <div className="flex-1 rounded-lg bg-components-input-bg-normal p-2 system-sm-regular text-components-input-text-filled">
             <span className="pl-1">{userProfile.email}</span>
           </div>
           {systemFeatures.enable_change_email && (
-            <div className="cursor-pointer rounded-lg bg-components-button-tertiary-bg px-3 py-2 text-components-button-tertiary-text system-sm-medium" onClick={() => setShowUpdateEmail(true)}>
+            <div className="cursor-pointer rounded-lg bg-components-button-tertiary-bg px-3 py-2 system-sm-medium text-components-button-tertiary-text" onClick={() => setShowUpdateEmail(true)}>
               {t('operation.change', { ns: 'common' })}
             </div>
           )}
@@ -193,8 +193,8 @@ export default function AccountPage() {
         systemFeatures.enable_email_password_login && (
           <div className="mb-8 flex justify-between gap-2">
             <div>
-              <div className="mb-1 text-text-secondary system-sm-semibold">{t('account.password', { ns: 'common' })}</div>
-              <div className="mb-2 text-text-tertiary body-xs-regular">{t('account.passwordTip', { ns: 'common' })}</div>
+              <div className="mb-1 system-sm-semibold text-text-secondary">{t('account.password', { ns: 'common' })}</div>
+              <div className="mb-2 body-xs-regular text-text-tertiary">{t('account.passwordTip', { ns: 'common' })}</div>
             </div>
             <Button onClick={() => setEditPasswordModalVisible(true)}>{userProfile.is_password_set ? t('account.resetPassword', { ns: 'common' }) : t('account.setPassword', { ns: 'common' })}</Button>
           </div>
@@ -218,7 +218,7 @@ export default function AccountPage() {
         editNameModalVisible && (
           <Dialog open={editNameModalVisible} onOpenChange={open => !open && setEditNameModalVisible(false)}>
             <DialogContent className="w-[420px]! p-6!">
-              <div className="mb-6 text-text-primary title-2xl-semi-bold">{t('account.editName', { ns: 'common' })}</div>
+              <div className="mb-6 title-2xl-semi-bold text-text-primary">{t('account.editName', { ns: 'common' })}</div>
               <div className={titleClassName}>{t('account.name', { ns: 'common' })}</div>
               <Input
                 className="mt-2"
@@ -243,7 +243,7 @@ export default function AccountPage() {
         editPasswordModalVisible && (
           <Dialog open={editPasswordModalVisible} onOpenChange={open => !open && (setEditPasswordModalVisible(false), resetPasswordForm())}>
             <DialogContent className="w-[420px]! p-6!">
-              <div className="mb-6 text-text-primary title-2xl-semi-bold">{userProfile.is_password_set ? t('account.resetPassword', { ns: 'common' }) : t('account.setPassword', { ns: 'common' })}</div>
+              <div className="mb-6 title-2xl-semi-bold text-text-primary">{userProfile.is_password_set ? t('account.resetPassword', { ns: 'common' }) : t('account.setPassword', { ns: 'common' })}</div>
               {userProfile.is_password_set && (
                 <>
                   <div className={titleClassName}>{t('account.currentPassword', { ns: 'common' })}</div>
@@ -266,7 +266,7 @@ export default function AccountPage() {
                   </div>
                 </>
               )}
-              <div className="mt-8 text-text-secondary system-sm-semibold">
+              <div className="mt-8 system-sm-semibold text-text-secondary">
                 {userProfile.is_password_set ? t('account.newPassword', { ns: 'common' }) : t('account.password', { ns: 'common' })}
               </div>
               <div className="relative mt-2">
@@ -285,7 +285,7 @@ export default function AccountPage() {
                   </Button>
                 </div>
               </div>
-              <div className="mt-8 text-text-secondary system-sm-semibold">{t('account.confirmPassword', { ns: 'common' })}</div>
+              <div className="mt-8 system-sm-semibold text-text-secondary">{t('account.confirmPassword', { ns: 'common' })}</div>
               <div className="relative mt-2">
                 <Input
                   type={showConfirmPassword ? 'text' : 'password'}
diff --git a/web/app/account/(commonLayout)/delete-account/components/check-email.tsx b/web/app/account/(commonLayout)/delete-account/components/check-email.tsx
index e0f00189b2..3c7b7112f3 100644
--- a/web/app/account/(commonLayout)/delete-account/components/check-email.tsx
+++ b/web/app/account/(commonLayout)/delete-account/components/check-email.tsx
@@ -1,8 +1,8 @@
 'use client'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { useAppContext } from '@/context/app-context'
 import Link from '@/next/link'
 import { useSendDeleteAccountEmail } from '../state'
@@ -30,14 +30,14 @@ export default function CheckEmail(props: DeleteAccountProps) {
 
   return (
     <>
-      <div className="body-md-medium py-1 text-text-destructive">
+      <div className="py-1 body-md-medium text-text-destructive">
         {t('account.deleteTip', { ns: 'common' })}
       </div>
-      <div className="body-md-regular pb-2 pt-1 text-text-secondary">
+      <div className="pt-1 pb-2 body-md-regular text-text-secondary">
         {t('account.deletePrivacyLinkTip', { ns: 'common' })}
         <Link href="https://dify.ai/privacy" className="text-text-accent">{t('account.deletePrivacyLink', { ns: 'common' })}</Link>
       </div>
-      <label className="system-sm-semibold mb-1 mt-3 flex h-6 items-center text-text-secondary">{t('account.deleteLabel', { ns: 'common' })}</label>
+      <label className="mt-3 mb-1 flex h-6 items-center system-sm-semibold text-text-secondary">{t('account.deleteLabel', { ns: 'common' })}</label>
       <Input
         placeholder={t('account.deletePlaceholder', { ns: 'common' }) as string}
         onChange={(e) => {
diff --git a/web/app/account/(commonLayout)/delete-account/components/feed-back.tsx b/web/app/account/(commonLayout)/delete-account/components/feed-back.tsx
index 60bd7e5c0d..9690bf8ed1 100644
--- a/web/app/account/(commonLayout)/delete-account/components/feed-back.tsx
+++ b/web/app/account/(commonLayout)/delete-account/components/feed-back.tsx
@@ -1,9 +1,9 @@
 'use client'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import CustomDialog from '@/app/components/base/dialog'
 import Textarea from '@/app/components/base/textarea'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useAppContext } from '@/context/app-context'
 import { useRouter } from '@/next/navigation'
@@ -54,7 +54,7 @@ export default function FeedBack(props: DeleteAccountProps) {
       className="max-w-[480px]"
       footer={false}
     >
-      <label className="system-sm-semibold mb-1 mt-3 flex items-center text-text-secondary">{t('account.feedbackLabel', { ns: 'common' })}</label>
+      <label className="mt-3 mb-1 flex items-center system-sm-semibold text-text-secondary">{t('account.feedbackLabel', { ns: 'common' })}</label>
       <Textarea
         rows={6}
         value={userFeedback}
diff --git a/web/app/account/(commonLayout)/delete-account/components/verify-email.tsx b/web/app/account/(commonLayout)/delete-account/components/verify-email.tsx
index 5d76f13f34..7e14d889d9 100644
--- a/web/app/account/(commonLayout)/delete-account/components/verify-email.tsx
+++ b/web/app/account/(commonLayout)/delete-account/components/verify-email.tsx
@@ -1,8 +1,8 @@
 'use client'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import Countdown from '@/app/components/signin/countdown'
 import Link from '@/next/link'
 import { useAccountDeleteStore, useConfirmDeleteAccount, useSendDeleteAccountEmail } from '../state'
@@ -36,14 +36,14 @@ export default function VerifyEmail(props: DeleteAccountProps) {
   }, [emailToken, verificationCode, confirmDeleteAccount, props])
   return (
     <>
-      <div className="body-md-medium pt-1 text-text-destructive">
+      <div className="pt-1 body-md-medium text-text-destructive">
         {t('account.deleteTip', { ns: 'common' })}
       </div>
-      <div className="body-md-regular pb-2 pt-1 text-text-secondary">
+      <div className="pt-1 pb-2 body-md-regular text-text-secondary">
         {t('account.deletePrivacyLinkTip', { ns: 'common' })}
         <Link href="https://dify.ai/privacy" className="text-text-accent">{t('account.deletePrivacyLink', { ns: 'common' })}</Link>
       </div>
-      <label className="system-sm-semibold mb-1 mt-3 flex h-6 items-center text-text-secondary">{t('account.verificationLabel', { ns: 'common' })}</label>
+      <label className="mt-3 mb-1 flex h-6 items-center system-sm-semibold text-text-secondary">{t('account.verificationLabel', { ns: 'common' })}</label>
       <Input
         minLength={6}
         maxLength={6}
@@ -53,7 +53,7 @@ export default function VerifyEmail(props: DeleteAccountProps) {
         }}
       />
       <div className="mt-3 flex w-full flex-col gap-2">
-        <Button className="w-full" disabled={shouldButtonDisabled} loading={isDeleting} variant="warning" onClick={handleConfirm}>{t('account.permanentlyDeleteButton', { ns: 'common' })}</Button>
+        <Button className="w-full" disabled={shouldButtonDisabled} loading={isDeleting} variant="primary" destructive onClick={handleConfirm}>{t('account.permanentlyDeleteButton', { ns: 'common' })}</Button>
         <Button className="w-full" onClick={props.onCancel}>{t('operation.cancel', { ns: 'common' })}</Button>
         <Countdown onResend={sendEmail} />
       </div>
diff --git a/web/app/account/(commonLayout)/header.tsx b/web/app/account/(commonLayout)/header.tsx
index e29f1b267a..688a1d7729 100644
--- a/web/app/account/(commonLayout)/header.tsx
+++ b/web/app/account/(commonLayout)/header.tsx
@@ -2,8 +2,8 @@
 import { RiArrowRightUpLine, RiRobot2Line } from '@remixicon/react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
+import { Button } from '@/app/components/base/ui/button'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useRouter } from '@/next/navigation'
 import Avatar from './avatar'
@@ -32,10 +32,10 @@ const Header = () => {
             : <DifyLogo />}
         </div>
         <div className="h-4 w-px origin-center rotate-[11.31deg] bg-divider-regular" />
-        <p className="title-3xl-semi-bold relative mt-[-2px] text-text-primary">{t('account.account', { ns: 'common' })}</p>
+        <p className="relative mt-[-2px] title-3xl-semi-bold text-text-primary">{t('account.account', { ns: 'common' })}</p>
       </div>
       <div className="flex shrink-0 items-center gap-3">
-        <Button className="system-sm-medium gap-2 px-3 py-2" onClick={goToStudio}>
+        <Button className="gap-2 px-3 py-2 system-sm-medium" onClick={goToStudio}>
           <RiRobot2Line className="h-4 w-4" />
           <p>{t('account.studio', { ns: 'common' })}</p>
           <RiArrowRightUpLine className="h-4 w-4" />
diff --git a/web/app/account/oauth/authorize/page.tsx b/web/app/account/oauth/authorize/page.tsx
index b0b7f557a4..fe24afe7ff 100644
--- a/web/app/account/oauth/authorize/page.tsx
+++ b/web/app/account/oauth/authorize/page.tsx
@@ -10,9 +10,9 @@ import {
 import * as React from 'react'
 import { useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
 import { Avatar } from '@/app/components/base/ui/avatar'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { setPostLoginRedirect } from '@/app/signin/utils/post-login-redirect'
@@ -122,13 +122,13 @@ export default function OAuthAuthorize() {
         </div>
       )}
 
-      <div className={`mb-4 mt-5 flex flex-col gap-2 ${isLoggedIn ? 'pb-2' : ''}`}>
+      <div className={`mt-5 mb-4 flex flex-col gap-2 ${isLoggedIn ? 'pb-2' : ''}`}>
         <div className="title-4xl-semi-bold">
           {isLoggedIn && <div className="text-text-primary">{t('connect', { ns: 'oauth' })}</div>}
           <div className="text-(--color-saas-dify-blue-inverted)">{authAppInfo?.app_label[language] || authAppInfo?.app_label?.en_US || t('unknownApp', { ns: 'oauth' })}</div>
           {!isLoggedIn && <div className="text-text-primary">{t('tips.notLoggedIn', { ns: 'oauth' })}</div>}
         </div>
-        <div className="text-text-secondary body-md-regular">{isLoggedIn ? `${authAppInfo?.app_label[language] || authAppInfo?.app_label?.en_US || t('unknownApp', { ns: 'oauth' })} ${t('tips.loggedIn', { ns: 'oauth' })}` : t('tips.needLogin', { ns: 'oauth' })}</div>
+        <div className="body-md-regular text-text-secondary">{isLoggedIn ? `${authAppInfo?.app_label[language] || authAppInfo?.app_label?.en_US || t('unknownApp', { ns: 'oauth' })} ${t('tips.loggedIn', { ns: 'oauth' })}` : t('tips.needLogin', { ns: 'oauth' })}</div>
       </div>
 
       {isLoggedIn && userProfile && (
@@ -137,7 +137,7 @@ export default function OAuthAuthorize() {
             <Avatar avatar={userProfile.avatar_url} name={userProfile.name} size="lg" />
             <div>
               <div className="system-md-semi-bold text-text-secondary">{userProfile.name}</div>
-              <div className="text-text-tertiary system-xs-regular">{userProfile.email}</div>
+              <div className="system-xs-regular text-text-tertiary">{userProfile.email}</div>
             </div>
           </div>
           <Button variant="tertiary" size="small" onClick={onLoginSwitchClick}>{t('switchAccount', { ns: 'oauth' })}</Button>
@@ -149,7 +149,7 @@ export default function OAuthAuthorize() {
           {authAppInfo!.scope.split(/\s+/).filter(Boolean).map((scope: string) => {
             const Icon = SCOPE_INFO_MAP[scope]
             return (
-              <div key={scope} className="flex items-center gap-2 text-text-secondary body-sm-medium">
+              <div key={scope} className="flex items-center gap-2 body-sm-medium text-text-secondary">
                 {Icon ? <Icon.icon className="h-4 w-4" /> : <RiAccountCircleLine className="h-4 w-4" />}
                 {Icon.label}
               </div>
@@ -182,7 +182,7 @@ export default function OAuthAuthorize() {
           </defs>
         </svg>
       </div>
-      <div className="mt-3 text-text-tertiary system-xs-regular">{t('tips.common', { ns: 'oauth' })}</div>
+      <div className="mt-3 system-xs-regular text-text-tertiary">{t('tips.common', { ns: 'oauth' })}</div>
     </div>
   )
 }
diff --git a/web/app/activate/activateForm.tsx b/web/app/activate/activateForm.tsx
index d5274d52f0..62dd7f885f 100644
--- a/web/app/activate/activateForm.tsx
+++ b/web/app/activate/activateForm.tsx
@@ -1,8 +1,8 @@
 'use client'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
+import { Button } from '@/app/components/base/ui/button'
 import useDocumentTitle from '@/hooks/use-document-title'
 
 import { useRouter, useSearchParams } from '@/next/navigation'
diff --git a/web/app/components/app-sidebar/app-info/__tests__/app-info-detail-panel.spec.tsx b/web/app/components/app-sidebar/app-info/__tests__/app-info-detail-panel.spec.tsx
index 3082eb3789..2171974253 100644
--- a/web/app/components/app-sidebar/app-info/__tests__/app-info-detail-panel.spec.tsx
+++ b/web/app/components/app-sidebar/app-info/__tests__/app-info-detail-panel.spec.tsx
@@ -35,8 +35,8 @@ vi.mock('@/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view',
   ),
 }))
 
-vi.mock('@/app/components/base/button', () => ({
-  default: ({ children, onClick, className, size, variant }: {
+vi.mock('@/app/components/base/ui/button', () => ({
+  Button: ({ children, onClick, className, size, variant }: {
     children: React.ReactNode
     onClick?: () => void
     className?: string
diff --git a/web/app/components/app-sidebar/app-info/__tests__/app-operations.spec.tsx b/web/app/components/app-sidebar/app-info/__tests__/app-operations.spec.tsx
index 1df23c2d20..2c5b133a74 100644
--- a/web/app/components/app-sidebar/app-info/__tests__/app-operations.spec.tsx
+++ b/web/app/components/app-sidebar/app-info/__tests__/app-operations.spec.tsx
@@ -4,8 +4,8 @@ import userEvent from '@testing-library/user-event'
 import * as React from 'react'
 import AppOperations from '../app-operations'
 
-vi.mock('../../../base/button', () => ({
-  default: ({ children, onClick, className, size, variant, id, tabIndex, ...rest }: {
+vi.mock('../../../base/ui/button', () => ({
+  Button: ({ children, onClick, className, size, variant, id, tabIndex, ...rest }: {
     'children': React.ReactNode
     'onClick'?: () => void
     'className'?: string
diff --git a/web/app/components/app-sidebar/app-info/app-info-detail-panel.tsx b/web/app/components/app-sidebar/app-info/app-info-detail-panel.tsx
index 4aacc0cdb1..624630b179 100644
--- a/web/app/components/app-sidebar/app-info/app-info-detail-panel.tsx
+++ b/web/app/components/app-sidebar/app-info/app-info-detail-panel.tsx
@@ -13,8 +13,8 @@ import * as React from 'react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import CardView from '@/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view'
-import Button from '@/app/components/base/button'
 import ContentDialog from '@/app/components/base/content-dialog'
+import { Button } from '@/app/components/base/ui/button'
 import { AppModeEnum } from '@/types/app'
 import AppIcon from '../../base/app-icon'
 import { getAppModeLabel } from './app-mode-labels'
@@ -97,7 +97,7 @@ const AppInfoDetailPanel = ({
     <ContentDialog
       show={show}
       onClose={onClose}
-      className="absolute bottom-2 left-2 top-2 flex w-[420px] flex-col rounded-2xl p-0!"
+      className="absolute top-2 bottom-2 left-2 flex w-[420px] flex-col rounded-2xl p-0!"
     >
       <div className="flex shrink-0 flex-col items-start justify-center gap-3 self-stretch p-4">
         <div className="flex items-center gap-3 self-stretch">
@@ -109,14 +109,14 @@ const AppInfoDetailPanel = ({
             imageUrl={appDetail.icon_url}
           />
           <div className="flex flex-1 flex-col items-start justify-center overflow-hidden">
-            <div className="w-full truncate text-text-secondary system-md-semibold">{appDetail.name}</div>
-            <div className="text-text-tertiary system-2xs-medium-uppercase">
+            <div className="w-full truncate system-md-semibold text-text-secondary">{appDetail.name}</div>
+            <div className="system-2xs-medium-uppercase text-text-tertiary">
               {getAppModeLabel(appDetail.mode, t)}
             </div>
           </div>
         </div>
         {appDetail.description && (
-          <div className="overflow-wrap-anywhere max-h-[105px] w-full max-w-full overflow-y-auto whitespace-normal wrap-break-word text-text-tertiary system-xs-regular">
+          <div className="overflow-wrap-anywhere max-h-[105px] w-full max-w-full overflow-y-auto system-xs-regular wrap-break-word whitespace-normal text-text-tertiary">
             {appDetail.description}
           </div>
         )}
@@ -140,7 +140,7 @@ const AppInfoDetailPanel = ({
             onClick={switchOperation.onClick}
           >
             {switchOperation.icon}
-            <span className="text-text-tertiary system-sm-medium">{switchOperation.title}</span>
+            <span className="system-sm-medium text-text-tertiary">{switchOperation.title}</span>
           </Button>
         </div>
       )}
diff --git a/web/app/components/app-sidebar/app-info/app-operations.tsx b/web/app/components/app-sidebar/app-info/app-operations.tsx
index e3cf233fea..95ede2decf 100644
--- a/web/app/components/app-sidebar/app-info/app-operations.tsx
+++ b/web/app/components/app-sidebar/app-info/app-operations.tsx
@@ -2,7 +2,7 @@ import type { JSX } from 'react'
 import { RiMoreLine } from '@remixicon/react'
 import { cloneElement, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '../../base/portal-to-follow-elem'
 
 export type Operation = {
@@ -134,7 +134,7 @@ const AppOperations = ({
             tabIndex={-1}
           >
             {cloneElement(operation.icon, { className: 'h-3.5 w-3.5 text-components-button-secondary-text' })}
-            <span className="text-components-button-secondary-text system-xs-medium">
+            <span className="system-xs-medium text-components-button-secondary-text">
               {operation.title}
             </span>
           </Button>
@@ -147,7 +147,7 @@ const AppOperations = ({
           tabIndex={-1}
         >
           <RiMoreLine className="h-3.5 w-3.5 text-components-button-secondary-text" />
-          <span className="text-components-button-secondary-text system-xs-medium">
+          <span className="system-xs-medium text-components-button-secondary-text">
             {t('operation.more', { ns: 'common' })}
           </span>
         </Button>
@@ -163,7 +163,7 @@ const AppOperations = ({
             onClick={operation.onClick}
           >
             {cloneElement(operation.icon, { className: 'h-3.5 w-3.5 text-components-button-secondary-text' })}
-            <span className="text-components-button-secondary-text system-xs-medium">
+            <span className="system-xs-medium text-components-button-secondary-text">
               {operation.title}
             </span>
           </Button>
@@ -182,7 +182,7 @@ const AppOperations = ({
                 className="gap-px"
               >
                 <RiMoreLine className="h-3.5 w-3.5 text-components-button-secondary-text" />
-                <span className="text-components-button-secondary-text system-xs-medium">
+                <span className="system-xs-medium text-components-button-secondary-text">
                   {t('operation.more', { ns: 'common' })}
                 </span>
               </Button>
@@ -200,7 +200,7 @@ const AppOperations = ({
                         onClick={item.onClick}
                       >
                         {cloneElement(item.icon, { className: 'h-4 w-4 text-text-tertiary' })}
-                        <span className="text-text-secondary system-md-regular">{item.title}</span>
+                        <span className="system-md-regular text-text-secondary">{item.title}</span>
                       </div>
                     ))}
               </div>
diff --git a/web/app/components/app-sidebar/toggle-button.tsx b/web/app/components/app-sidebar/toggle-button.tsx
index 811e979b89..8c17f7ad88 100644
--- a/web/app/components/app-sidebar/toggle-button.tsx
+++ b/web/app/components/app-sidebar/toggle-button.tsx
@@ -1,8 +1,8 @@
 import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
-import Button from '../base/button'
 import Tooltip from '../base/tooltip'
 import ShortcutsName from '../workflow/shortcuts-name'
 
@@ -19,7 +19,7 @@ const TooltipContent = ({
 
   return (
     <div className="flex items-center gap-x-1">
-      <span className="px-0.5 text-text-secondary system-xs-medium">{expand ? t('sidebar.collapseSidebar', { ns: 'layout' }) : t('sidebar.expandSidebar', { ns: 'layout' })}</span>
+      <span className="px-0.5 system-xs-medium text-text-secondary">{expand ? t('sidebar.collapseSidebar', { ns: 'layout' }) : t('sidebar.expandSidebar', { ns: 'layout' })}</span>
       <ShortcutsName keys={TOGGLE_SHORTCUT} textColor="secondary" />
     </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 7a5081a296..dbdf909c0a 100644
--- a/web/app/components/app/annotation/add-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/add-annotation-modal/index.tsx
@@ -4,9 +4,9 @@ import type { AnnotationItemBasic } from '../type'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Checkbox from '@/app/components/base/checkbox'
 import Drawer from '@/app/components/base/drawer-plus'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import AnnotationFull from '@/app/components/billing/annotation-full'
 import { useProviderContext } from '@/context/provider-context'
@@ -92,11 +92,11 @@ const AddAnnotationModal: FC<Props> = ({
           (
             <div>
               {isAnnotationFull && (
-                <div className="mb-4 mt-6 px-6">
+                <div className="mt-6 mb-4 px-6">
                   <AnnotationFull />
                 </div>
               )}
-              <div className="system-sm-medium flex h-16 items-center justify-between rounded-bl-xl rounded-br-xl border-t border-divider-subtle bg-background-section-burn px-4 text-text-tertiary">
+              <div className="flex h-16 items-center justify-between rounded-br-xl rounded-bl-xl border-t border-divider-subtle bg-background-section-burn px-4 system-sm-medium text-text-tertiary">
                 <div
                   className="flex items-center space-x-2"
                 >
diff --git a/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx b/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
index 4c0be05fff..9978887820 100644
--- a/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
+++ b/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
@@ -4,8 +4,8 @@ import { RiDeleteBinLine } from '@remixicon/react'
 import * as React from 'react'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { Csv as CSVIcon } from '@/app/components/base/icons/src/public/files'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { cn } from '@/utils/classnames'
 
@@ -100,7 +100,7 @@ const CSVUploader: FC<Props> = ({
                 <span className="cursor-pointer text-text-accent" onClick={selectHandle}>{t('batchModal.browse', { ns: 'appAnnotation' })}</span>
               </div>
             </div>
-            {dragging && <div ref={dragRef} className="absolute left-0 top-0 h-full w-full" />}
+            {dragging && <div ref={dragRef} className="absolute top-0 left-0 h-full w-full" />}
           </div>
         )}
         {file && (
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 75e854debc..20a35714e8 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
@@ -5,8 +5,8 @@ import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import AnnotationFull from '@/app/components/billing/annotation-full'
 import { useProviderContext } from '@/context/provider-context'
@@ -89,8 +89,8 @@ const BatchModal: FC<IBatchModalProps> = ({
 
   return (
     <Modal isShow={isShow} onClose={noop} className="max-w-[520px]! rounded-xl! px-8 py-6">
-      <div className="system-xl-medium relative pb-1 text-text-primary">{t('batchModal.title', { ns: 'appAnnotation' })}</div>
-      <div className="absolute right-4 top-4 cursor-pointer p-2" onClick={onCancel}>
+      <div className="relative pb-1 system-xl-medium text-text-primary">{t('batchModal.title', { ns: 'appAnnotation' })}</div>
+      <div className="absolute top-4 right-4 cursor-pointer p-2" onClick={onCancel}>
         <RiCloseLine className="h-4 w-4 text-text-tertiary" />
       </div>
       <CSVUploader
@@ -106,7 +106,7 @@ const BatchModal: FC<IBatchModalProps> = ({
       )}
 
       <div className="mt-[28px] flex justify-end pt-6">
-        <Button className="system-sm-medium mr-2 text-text-tertiary" onClick={onCancel}>
+        <Button className="mr-2 system-sm-medium text-text-tertiary" onClick={onCancel}>
           {t('batchModal.cancel', { ns: 'appAnnotation' })}
         </Button>
         <Button
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 514d2c07ba..152724e0e9 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
@@ -4,9 +4,9 @@ import { RiDeleteBinLine, RiEditFill, RiEditLine } from '@remixicon/react'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { Robot, User } from '@/app/components/base/icons/src/public/avatar'
 import Textarea from '@/app/components/base/textarea'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 
 export enum EditItemType {
@@ -21,7 +21,7 @@ type Props = {
 }
 
 export const EditTitle: FC<{ className?: string, title: string }> = ({ className, title }) => (
-  <div className={cn(className, 'system-xs-medium flex h-[18px] items-center text-text-tertiary')}>
+  <div className={cn(className, 'flex h-[18px] items-center system-xs-medium text-text-tertiary')}>
     <RiEditFill className="mr-1 h-3.5 w-3.5" />
     <div>{title}</div>
     <div
@@ -75,7 +75,7 @@ const EditItem: FC<Props> = ({
         {avatar}
       </div>
       <div className="grow">
-        <div className="system-xs-semibold mb-1 text-text-primary">{name}</div>
+        <div className="mb-1 system-xs-semibold text-text-primary">{name}</div>
         <div className="system-sm-regular text-text-primary">{content}</div>
         {!isEdit
           ? (
@@ -83,13 +83,13 @@ const EditItem: FC<Props> = ({
                 {showNewContent && (
                   <div className="mt-3">
                     <EditTitle title={editTitle} />
-                    <div className="system-sm-regular mt-1 text-text-primary">{newContent}</div>
+                    <div className="mt-1 system-sm-regular text-text-primary">{newContent}</div>
                   </div>
                 )}
                 <div className="mt-2 flex items-center">
                   {!readonly && (
                     <div
-                      className="system-xs-medium flex cursor-pointer items-center space-x-1 text-text-accent"
+                      className="flex cursor-pointer items-center space-x-1 system-xs-medium text-text-accent"
                       onClick={() => {
                         setIsEdit(true)
                       }}
@@ -100,7 +100,7 @@ const EditItem: FC<Props> = ({
                   )}
 
                   {showNewContent && (
-                    <div className="system-xs-medium ml-2 flex items-center text-text-tertiary">
+                    <div className="ml-2 flex items-center system-xs-medium text-text-tertiary">
                       <div className="mr-2">·</div>
                       <div
                         className="flex cursor-pointer items-center space-x-1"
diff --git a/web/app/components/app/annotation/header-opts/index.tsx b/web/app/components/app/annotation/header-opts/index.tsx
index 5ff90f9431..9dfb3bad42 100644
--- a/web/app/components/app/annotation/header-opts/index.tsx
+++ b/web/app/components/app/annotation/header-opts/index.tsx
@@ -16,13 +16,13 @@ import {
 import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
 import { FileDownload02, FilePlus02 } from '@/app/components/base/icons/src/vender/line/files'
 import CustomPopover from '@/app/components/base/popover'
+import { Button } from '@/app/components/base/ui/button'
 import { useLocale } from '@/context/i18n'
 import { LanguagesSupported } from '@/i18n-config/language'
-import { clearAllAnnotations, fetchExportAnnotationList } from '@/service/annotation'
 
+import { clearAllAnnotations, fetchExportAnnotationList } from '@/service/annotation'
 import { cn } from '@/utils/classnames'
 import { downloadBlob } from '@/utils/download'
-import Button from '../../../base/button'
 import AddAnnotationModal from '../add-annotation-modal'
 import BatchAddModal from '../batch-add-annotation-modal'
 import ClearAllAnnotationsConfirmModal from '../clear-all-annotations-confirm-modal'
@@ -103,12 +103,12 @@ const HeaderOptions: FC<Props> = ({
           }}
         >
           <FilePlus02 className="h-4 w-4 text-text-tertiary" />
-          <span className="system-sm-regular grow text-left text-text-secondary">{t('table.header.bulkImport', { ns: 'appAnnotation' })}</span>
+          <span className="grow text-left system-sm-regular text-text-secondary">{t('table.header.bulkImport', { ns: 'appAnnotation' })}</span>
         </button>
         <Menu as="div" className="relative h-full w-full">
           <MenuButton className="mx-1 flex h-9 w-[calc(100%-8px)] cursor-pointer items-center space-x-2 rounded-lg px-3 py-2 hover:bg-components-panel-on-panel-item-bg-hover disabled:opacity-50">
             <FileDownload02 className="h-4 w-4 text-text-tertiary" />
-            <span className="system-sm-regular grow text-left text-text-secondary">{t('table.header.bulkExport', { ns: 'appAnnotation' })}</span>
+            <span className="grow text-left system-sm-regular text-text-secondary">{t('table.header.bulkExport', { ns: 'appAnnotation' })}</span>
             <ChevronRight className="h-[14px] w-[14px] shrink-0 text-text-tertiary" />
           </MenuButton>
           <Transition
@@ -122,7 +122,7 @@ const HeaderOptions: FC<Props> = ({
           >
             <MenuItems
               className={cn(
-                'absolute left-1 top-px z-10 min-w-[100px] origin-top-right -translate-x-full rounded-xl border-[0.5px] border-components-panel-on-panel-item-bg bg-components-panel-bg py-1 shadow-xs',
+                'absolute top-px left-1 z-10 min-w-[100px] origin-top-right -translate-x-full rounded-xl border-[0.5px] border-components-panel-on-panel-item-bg bg-components-panel-bg py-1 shadow-xs',
               )}
             >
               <CSVDownloader
@@ -135,11 +135,11 @@ const HeaderOptions: FC<Props> = ({
                 ]}
               >
                 <button type="button" disabled={annotationUnavailable} className="mx-1 flex h-9 w-[calc(100%-8px)] cursor-pointer items-center space-x-2 rounded-lg px-3 py-2 hover:bg-components-panel-on-panel-item-bg-hover disabled:opacity-50">
-                  <span className="system-sm-regular grow text-left text-text-secondary">CSV</span>
+                  <span className="grow text-left system-sm-regular text-text-secondary">CSV</span>
                 </button>
               </CSVDownloader>
               <button type="button" disabled={annotationUnavailable} className={cn('mx-1 flex h-9 w-[calc(100%-8px)] cursor-pointer items-center space-x-2 rounded-lg px-3 py-2 hover:bg-components-panel-on-panel-item-bg-hover disabled:opacity-50', 'border-0!')} onClick={JSONLOutput}>
-                <span className="system-sm-regular grow text-left text-text-secondary">JSONL</span>
+                <span className="grow text-left system-sm-regular text-text-secondary">JSONL</span>
               </button>
             </MenuItems>
           </Transition>
@@ -150,7 +150,7 @@ const HeaderOptions: FC<Props> = ({
           className="mx-1 flex h-9 w-[calc(100%-8px)] cursor-pointer items-center space-x-2 rounded-lg px-3 py-2 text-red-600 hover:bg-red-50 disabled:opacity-50"
         >
           <RiDeleteBinLine className="h-4 w-4" />
-          <span className="system-sm-regular grow text-left">
+          <span className="grow text-left system-sm-regular">
             {t('table.header.clearAll', { ns: 'appAnnotation' })}
           </span>
         </button>
diff --git a/web/app/components/app/app-access-control/add-member-or-group-pop.tsx b/web/app/components/app/app-access-control/add-member-or-group-pop.tsx
index b25fb94191..f4c960f1bf 100644
--- a/web/app/components/app/app-access-control/add-member-or-group-pop.tsx
+++ b/web/app/components/app/app-access-control/add-member-or-group-pop.tsx
@@ -6,12 +6,12 @@ import { useDebounce } from 'ahooks'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Avatar } from '@/app/components/base/ui/avatar'
+import { Button } from '@/app/components/base/ui/button'
 import { useSelector } from '@/context/app-context'
 import { SubjectType } from '@/models/access-control'
 import { useSearchForWhiteListCandidates } from '@/service/access-control'
 import { cn } from '@/utils/classnames'
 import useAccessControlStore from '../../../../context/access-control-store'
-import Button from '../../base/button'
 import Checkbox from '../../base/checkbox'
 import Input from '../../base/input'
 import Loading from '../../base/loading'
@@ -118,7 +118,7 @@ function SelectedGroupsBreadCrumb() {
       <span className={cn('system-xs-regular text-text-tertiary', selectedGroupsForBreadcrumb.length > 0 && 'cursor-pointer text-text-accent')} onClick={handleReset}>{t('accessControlDialog.operateGroupAndMember.allMembers', { ns: 'app' })}</span>
       {selectedGroupsForBreadcrumb.map((group, index) => {
         return (
-          <div key={index} className="system-xs-regular flex items-center gap-x-0.5 text-text-tertiary">
+          <div key={index} className="flex items-center gap-x-0.5 system-xs-regular text-text-tertiary">
             <span>/</span>
             <span className={index === selectedGroupsForBreadcrumb.length - 1 ? '' : 'cursor-pointer text-text-accent'} onClick={() => handleBreadCrumbClick(index)}>{group.name}</span>
           </div>
@@ -161,7 +161,7 @@ function GroupItem({ group }: GroupItemProps) {
             <RiOrganizationChart className="h-[14px] w-[14px] text-components-avatar-shape-fill-stop-0" />
           </div>
         </div>
-        <p className="system-sm-medium mr-1 text-text-secondary">{group.name}</p>
+        <p className="mr-1 system-sm-medium text-text-secondary">{group.name}</p>
         <p className="system-xs-regular text-text-tertiary">{group.groupSize}</p>
       </div>
       <Button
@@ -206,7 +206,7 @@ function MemberItem({ member }: MemberItemProps) {
             <Avatar size="xxs" avatar={null} name={member.name} />
           </div>
         </div>
-        <p className="system-sm-medium mr-1 text-text-secondary">{member.name}</p>
+        <p className="mr-1 system-sm-medium text-text-secondary">{member.name}</p>
         {currentUser.email === member.email && (
           <p className="system-xs-regular text-text-tertiary">
             (
diff --git a/web/app/components/app/app-access-control/index.tsx b/web/app/components/app/app-access-control/index.tsx
index 0c1c64eadc..aeaae3d46d 100644
--- a/web/app/components/app/app-access-control/index.tsx
+++ b/web/app/components/app/app-access-control/index.tsx
@@ -5,12 +5,12 @@ import { Description as DialogDescription, DialogTitle } from '@headlessui/react
 import { RiBuildingLine, RiGlobalLine, RiVerifiedBadgeLine } from '@remixicon/react'
 import { useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { AccessMode, SubjectType } from '@/models/access-control'
 import { useUpdateAccessMode } from '@/service/access-control'
 import useAccessControlStore from '../../../../context/access-control-store'
-import Button from '../../base/button'
 import AccessControlDialog from './access-control-dialog'
 import AccessControlItem from './access-control-item'
 import SpecificGroupsOrMembers, { WebAppSSONotEnabledTip } from './specific-groups-or-members'
@@ -67,9 +67,9 @@ export default function AccessControl(props: AccessControlProps) {
   return (
     <AccessControlDialog show onClose={onClose}>
       <div className="flex flex-col gap-y-3">
-        <div className="pb-3 pl-6 pr-14 pt-6">
+        <div className="pt-6 pr-14 pb-3 pl-6">
           <DialogTitle className="title-2xl-semi-bold text-text-primary">{t('accessControlDialog.title', { ns: 'app' })}</DialogTitle>
-          <DialogDescription className="system-xs-regular mt-1 text-text-tertiary">{t('accessControlDialog.description', { ns: 'app' })}</DialogDescription>
+          <DialogDescription className="mt-1 system-xs-regular text-text-tertiary">{t('accessControlDialog.description', { ns: 'app' })}</DialogDescription>
         </div>
         <div className="flex flex-col gap-y-1 px-6 pb-3">
           <div className="leading-6">
diff --git a/web/app/components/app/app-publisher/index.tsx b/web/app/components/app/app-publisher/index.tsx
index 8792a1c507..9c50a98124 100644
--- a/web/app/components/app/app-publisher/index.tsx
+++ b/web/app/components/app/app-publisher/index.tsx
@@ -13,12 +13,12 @@ import { useTranslation } from 'react-i18next'
 import EmbeddedModal from '@/app/components/app/overview/embedded'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { trackEvent } from '@/app/components/base/amplitude'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useAsyncWindowOpen } from '@/hooks/use-async-window-open'
 import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
@@ -224,7 +224,7 @@ const AppPublisher = ({
         <PortalToFollowElemTrigger onClick={handleTrigger}>
           <Button
             variant="primary"
-            className="py-2 pl-3 pr-2"
+            className="py-2 pr-2 pl-3"
             disabled={disabled}
           >
             {t('common.publish', { ns: 'workflow' })}
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 edc2bd32a8..b4ad0423b0 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
@@ -4,12 +4,12 @@ import type { Model, ModelItem } from '@/app/components/header/account-setting/m
 import { RiArrowDownSLine } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { useProviderContext } from '@/context/provider-context'
 import ModelIcon from '../../header/account-setting/model-provider-page/model-icon'
diff --git a/web/app/components/app/app-publisher/sections.tsx b/web/app/components/app/app-publisher/sections.tsx
index aa9af3bae0..d4864a3763 100644
--- a/web/app/components/app/app-publisher/sections.tsx
+++ b/web/app/components/app/app-publisher/sections.tsx
@@ -3,10 +3,10 @@ import type { ModelAndParameter } from '../configuration/debug/types'
 import type { AppPublisherProps } from './index'
 import type { PublishWorkflowParams } from '@/types/workflow'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import { CodeBrowser } from '@/app/components/base/icons/src/vender/line/development'
 import Loading from '@/app/components/base/loading'
+import { Button } from '@/app/components/base/ui/button'
 import {
   Tooltip,
   TooltipContent,
diff --git a/web/app/components/app/app-publisher/version-info-modal.tsx b/web/app/components/app/app-publisher/version-info-modal.tsx
index a1d6edcf04..d5f4c9c189 100644
--- a/web/app/components/app/app-publisher/version-info-modal.tsx
+++ b/web/app/components/app/app-publisher/version-info-modal.tsx
@@ -5,8 +5,8 @@ import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
-import Button from '../../base/button'
 import Input from '../../base/input'
 import Textarea from '../../base/textarea'
 
@@ -67,17 +67,17 @@ const VersionInfoModal: FC<VersionInfoModalProps> = ({
 
   return (
     <Modal className="p-0" isShow={isOpen} onClose={onClose}>
-      <div className="relative w-full p-6 pb-4 pr-14">
+      <div className="relative w-full p-6 pr-14 pb-4">
         <div className="title-2xl-semi-bold text-text-primary first-letter:capitalize">
           {versionInfo?.marked_name ? t('versionHistory.editVersionInfo', { ns: 'workflow' }) : t('versionHistory.nameThisVersion', { ns: 'workflow' })}
         </div>
-        <div className="absolute right-5 top-5 flex h-8 w-8 cursor-pointer items-center justify-center p-1.5" onClick={onClose}>
+        <div className="absolute top-5 right-5 flex h-8 w-8 cursor-pointer items-center justify-center p-1.5" onClick={onClose}>
           <RiCloseLine className="h-[18px] w-[18px] text-text-tertiary" />
         </div>
       </div>
       <div className="flex flex-col gap-y-4 px-6 py-3">
         <div className="flex flex-col gap-y-1">
-          <div className="system-sm-semibold flex h-6 items-center text-text-secondary">
+          <div className="flex h-6 items-center system-sm-semibold text-text-secondary">
             {t('versionHistory.editField.title', { ns: 'workflow' })}
           </div>
           <Input
@@ -88,7 +88,7 @@ const VersionInfoModal: FC<VersionInfoModalProps> = ({
           />
         </div>
         <div className="flex flex-col gap-y-1">
-          <div className="system-sm-semibold flex h-6 items-center text-text-secondary">
+          <div className="flex h-6 items-center system-sm-semibold text-text-secondary">
             {t('versionHistory.editField.releaseNotes', { ns: 'workflow' })}
           </div>
           <Textarea
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 d5fbd9e78f..029743dfb6 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
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import WarningMask from '.'
 
 type IFormattingChangedProps = {
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 56ccae5ade..4b25b023b2 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
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import WarningMask from '.'
 
 type IFormattingChangedProps = {
diff --git a/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx b/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx
index f23567b909..2cd33759f8 100644
--- a/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx
+++ b/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx
@@ -13,13 +13,13 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { ADD_EXTERNAL_DATA_TOOL } from '@/app/components/app/configuration/config-var'
-import Button from '@/app/components/base/button'
 import {
   Copy,
   CopyCheck,
 } from '@/app/components/base/icons/src/vender/line/files'
 import PromptEditor from '@/app/components/base/prompt-editor'
 import { INSERT_VARIABLE_VALUE_BLOCK_COMMAND } from '@/app/components/base/prompt-editor/plugins/variable-block'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import {
   Tooltip,
@@ -148,14 +148,14 @@ const AdvancedPromptInput: FC<Props> = ({
   const [editorHeight, setEditorHeight] = React.useState(isChatMode ? 200 : 508)
   const contextMissing = (
     <div
-      className="flex h-11 items-center justify-between rounded-tl-xl rounded-tr-xl pb-1 pl-4 pr-3 pt-2"
+      className="flex h-11 items-center justify-between rounded-tl-xl rounded-tr-xl pt-2 pr-3 pb-1 pl-4"
       style={{
         background: 'linear-gradient(180deg, #FEF0C7 0%, rgba(254, 240, 199, 0) 100%)',
       }}
     >
       <div className="flex items-center pr-2">
         <RiErrorWarningFill className="mr-1 h-4 w-4 text-[#F79009]" />
-        <div className="text-[13px] font-medium leading-[18px] text-[#DC6803]">{t('promptMode.contextMissing', { ns: 'appDebug' })}</div>
+        <div className="text-[13px] leading-[18px] font-medium text-[#DC6803]">{t('promptMode.contextMissing', { ns: 'appDebug' })}</div>
       </div>
       <Button
         size="small"
@@ -172,7 +172,7 @@ const AdvancedPromptInput: FC<Props> = ({
         {isContextMissing
           ? contextMissing
           : (
-              <div className={cn(s.boxHeader, 'flex h-11 items-center justify-between rounded-tl-xl rounded-tr-xl bg-background-default pb-1 pl-4 pr-3 pt-2 hover:shadow-xs')}>
+              <div className={cn(s.boxHeader, 'flex h-11 items-center justify-between rounded-tl-xl rounded-tr-xl bg-background-default pt-2 pr-3 pb-1 pl-4 hover:shadow-xs')}>
                 {isChatMode
                   ? (
                       <MessageTypeSelector value={type} onChange={onTypeChange} />
@@ -180,13 +180,13 @@ const AdvancedPromptInput: FC<Props> = ({
                   : (
                       <div className="flex items-center space-x-1">
 
-                        <div className="text-sm font-semibold uppercase text-indigo-800">
+                        <div className="text-sm font-semibold text-indigo-800 uppercase">
                           {t('pageTitle.line1', { ns: 'appDebug' })}
                         </div>
                         <Tooltip>
                           <TooltipTrigger
                             render={(
-                              <span className="i-ri-question-line ml-1 h-4 w-4 shrink-0 text-text-quaternary" />
+                              <span className="ml-1 i-ri-question-line h-4 w-4 shrink-0 text-text-quaternary" />
                             )}
                           />
                           <TooltipContent>
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 47d9aaa4d2..03755df018 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
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import * as React from 'react'
 import { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import VarHighlight from '../../base/var-highlight'
 
 type IConfirmAddVarProps = {
@@ -35,7 +35,7 @@ const ConfirmAddVar: FC<IConfirmAddVarProps> = ({
   // }, mainContentRef)
   return (
     <div
-      className="absolute inset-0  flex items-center justify-center rounded-xl"
+      className="absolute inset-0 flex items-center justify-center rounded-xl"
       style={{
         backgroundColor: 'rgba(35, 56, 118, 0.2)',
       }}
diff --git a/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx b/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx
index 3773234347..477e1db4a0 100644
--- a/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx
+++ b/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx
@@ -4,8 +4,8 @@ import type { ConversationHistoriesRole } from '@/models/debug'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 
 type Props = {
   isShow: boolean
@@ -30,7 +30,7 @@ const EditModal: FC<Props> = ({
       isShow={isShow}
       onClose={onClose}
     >
-      <div className="mt-6 text-sm font-medium leading-[21px] text-text-primary">{t('feature.conversationHistory.editModal.userPrefix', { ns: 'appDebug' })}</div>
+      <div className="mt-6 text-sm leading-[21px] font-medium text-text-primary">{t('feature.conversationHistory.editModal.userPrefix', { ns: 'appDebug' })}</div>
       <input
         className="mt-2 box-border h-10 w-full rounded-lg bg-components-input-bg-normal px-3 text-sm leading-10"
         value={tempData.user_prefix}
@@ -40,7 +40,7 @@ const EditModal: FC<Props> = ({
         })}
       />
 
-      <div className="mt-6 text-sm font-medium leading-[21px] text-text-primary">{t('feature.conversationHistory.editModal.assistantPrefix', { ns: 'appDebug' })}</div>
+      <div className="mt-6 text-sm leading-[21px] font-medium text-text-primary">{t('feature.conversationHistory.editModal.assistantPrefix', { ns: 'appDebug' })}</div>
       <input
         className="mt-2 box-border h-10 w-full rounded-lg bg-components-input-bg-normal px-3 text-sm leading-10"
         value={tempData.assistant_prefix}
diff --git a/web/app/components/app/configuration/config-prompt/index.tsx b/web/app/components/app/configuration/config-prompt/index.tsx
index 3f6963d132..3a36358d5e 100644
--- a/web/app/components/app/configuration/config-prompt/index.tsx
+++ b/web/app/components/app/configuration/config-prompt/index.tsx
@@ -10,7 +10,7 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import AdvancedMessageInput from '@/app/components/app/configuration/config-prompt/advanced-prompt-input'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { MAX_PROMPT_MESSAGE_LENGTH } from '@/config'
 import ConfigContext from '@/context/debug-configuration'
 import { PromptRole } from '@/models/debug'
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 1fcaebbc0d..3168d2a273 100644
--- a/web/app/components/app/configuration/config-var/modal-foot.tsx
+++ b/web/app/components/app/configuration/config-var/modal-foot.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 
 type IModalFootProps = {
   onConfirm: () => void
diff --git a/web/app/components/app/configuration/config-vision/param-config.tsx b/web/app/components/app/configuration/config-vision/param-config.tsx
index 9199145ddb..887ebed2a0 100644
--- a/web/app/components/app/configuration/config-vision/param-config.tsx
+++ b/web/app/components/app/configuration/config-vision/param-config.tsx
@@ -3,12 +3,12 @@ import type { FC } from 'react'
 import { RiSettings2Line } from '@remixicon/react'
 import { memo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import ParamConfigContent from './param-config-content'
 
diff --git a/web/app/components/app/configuration/config/agent-setting-button.tsx b/web/app/components/app/configuration/config/agent-setting-button.tsx
index a83722e8a1..0f1021e7ce 100644
--- a/web/app/components/app/configuration/config/agent-setting-button.tsx
+++ b/web/app/components/app/configuration/config/agent-setting-button.tsx
@@ -5,7 +5,7 @@ import { RiSettings2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import AgentSetting from './agent/agent-setting'
 
 type Props = {
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 b766e52089..31b76bc46d 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
@@ -6,9 +6,9 @@ import { useClickAway } from 'ahooks'
 import * as React from 'react'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { CuteRobot } from '@/app/components/base/icons/src/vender/solid/communication'
 import { Unblur } from '@/app/components/base/icons/src/vender/solid/education'
+import { Button } from '@/app/components/base/ui/button'
 import { Slider } from '@/app/components/base/ui/slider'
 import { DEFAULT_AGENT_PROMPT, MAX_ITERATIONS_NUM } from '@/config'
 import ItemPanel from './item-panel'
@@ -59,7 +59,7 @@ const AgentSetting: FC<Props> = ({
         ref={ref}
         className="flex h-full w-[640px] flex-col overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl"
       >
-        <div className="flex h-14 shrink-0 items-center justify-between border-b border-divider-regular pl-6 pr-5">
+        <div className="flex h-14 shrink-0 items-center justify-between border-b border-divider-regular pr-5 pl-6">
           <div className="flex flex-col text-base font-semibold text-text-primary">
             <div className="leading-6">{t('agent.setting.name', { ns: 'appDebug' })}</div>
           </div>
@@ -74,7 +74,7 @@ const AgentSetting: FC<Props> = ({
         </div>
         {/* Body */}
         <div
-          className="grow overflow-y-auto border-b p-6 pb-[68px] pt-5"
+          className="grow overflow-y-auto border-b p-6 pt-5 pb-[68px]"
           style={{
             borderBottom: 'rgba(0, 0, 0, 0.05)',
           }}
@@ -88,7 +88,7 @@ const AgentSetting: FC<Props> = ({
             name={t('agent.agentMode', { ns: 'appDebug' })}
             description={t('agent.agentModeDes', { ns: 'appDebug' })}
           >
-            <div className="text-[13px] font-medium leading-[18px] text-text-primary">{isFunctionCall ? t('agent.agentModeType.functionCall', { ns: 'appDebug' }) : t('agent.agentModeType.ReACT', { ns: 'appDebug' })}</div>
+            <div className="text-[13px] leading-[18px] font-medium text-text-primary">{isFunctionCall ? t('agent.agentModeType.functionCall', { ns: 'appDebug' }) : t('agent.agentModeType.ReACT', { ns: 'appDebug' })}</div>
           </ItemPanel>
 
           <ItemPanel
@@ -119,7 +119,7 @@ const AgentSetting: FC<Props> = ({
                 min={maxIterationsMin}
                 max={MAX_ITERATIONS_NUM}
                 step={1}
-                className="block h-7 w-11 rounded-lg border-0 bg-components-input-bg-normal px-1.5 pl-1 leading-7 text-text-primary placeholder:text-text-tertiary focus:ring-1 focus:ring-inset focus:ring-primary-600"
+                className="block h-7 w-11 rounded-lg border-0 bg-components-input-bg-normal px-1.5 pl-1 leading-7 text-text-primary placeholder:text-text-tertiary focus:ring-1 focus:ring-primary-600 focus:ring-inset"
                 value={tempPayload.max_iteration}
                 onChange={(e) => {
                   let value = Number.parseInt(e.target.value, 10)
@@ -139,12 +139,12 @@ const AgentSetting: FC<Props> = ({
 
           {!isFunctionCall && (
             <div className="rounded-xl bg-background-section-burn py-2 shadow-xs">
-              <div className="flex h-8 items-center px-4 text-sm font-semibold leading-6 text-text-secondary">{t('builtInPromptTitle', { ns: 'tools' })}</div>
-              <div className="h-[396px] overflow-y-auto whitespace-pre-line px-4 text-sm font-normal leading-5 text-text-secondary">
+              <div className="flex h-8 items-center px-4 text-sm leading-6 font-semibold text-text-secondary">{t('builtInPromptTitle', { ns: 'tools' })}</div>
+              <div className="h-[396px] overflow-y-auto px-4 text-sm leading-5 font-normal whitespace-pre-line text-text-secondary">
                 {isChatModel ? DEFAULT_AGENT_PROMPT.chat : DEFAULT_AGENT_PROMPT.completion}
               </div>
               <div className="px-4">
-                <div className="inline-flex h-5 items-center rounded-md bg-components-input-bg-normal px-1 text-xs font-medium leading-[18px] text-text-tertiary">{(isChatModel ? DEFAULT_AGENT_PROMPT.chat : DEFAULT_AGENT_PROMPT.completion).length}</div>
+                <div className="inline-flex h-5 items-center rounded-md bg-components-input-bg-normal px-1 text-xs leading-[18px] font-medium text-text-tertiary">{(isChatModel ? DEFAULT_AGENT_PROMPT.chat : DEFAULT_AGENT_PROMPT.completion).length}</div>
               </div>
             </div>
           )}
diff --git a/web/app/components/app/configuration/config/agent/agent-tools/index.tsx b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
index 752426cc2d..16212afa73 100644
--- a/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
@@ -18,11 +18,11 @@ import { useContext } from 'use-context-selector'
 import Panel from '@/app/components/app/configuration/base/feature-panel'
 import OperationBtn from '@/app/components/app/configuration/base/operation-btn'
 import AppIcon from '@/app/components/base/app-icon'
-import Button from '@/app/components/base/button'
 import { DefaultToolIcon } from '@/app/components/base/icons/src/public/other'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 import { CollectionType } from '@/app/components/tools/types'
 import { addDefaultValue, toolParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
@@ -165,7 +165,7 @@ const AgentTools: FC = () => {
         )}
         headerRight={(
           <div className="flex items-center">
-            <div className="text-xs font-normal leading-[18px] text-text-tertiary">
+            <div className="text-xs leading-[18px] font-normal text-text-tertiary">
               {tools.filter(item => !!item.enabled).length}
               /
               {tools.length}
@@ -174,7 +174,7 @@ const AgentTools: FC = () => {
             </div>
             {tools.length < MAX_TOOLS_NUM && !readonly && (
               <>
-                <div className="ml-3 mr-1 h-3.5 w-px bg-divider-regular"></div>
+                <div className="mr-1 ml-3 h-3.5 w-px bg-divider-regular"></div>
                 <ToolPicker
                   trigger={<OperationBtn type="add" />}
                   isShow={isShowChooseTool}
@@ -209,11 +209,11 @@ const AgentTools: FC = () => {
                 )}
                 <div
                   className={cn(
-                    'system-xs-regular ml-1.5 flex w-0 grow items-center truncate',
+                    'ml-1.5 flex w-0 grow items-center truncate system-xs-regular',
                     (item.isDeleted || item.notAuthor || !item.enabled) ? 'opacity-50' : '',
                   )}
                 >
-                  <span className="system-xs-medium pr-1.5 text-text-secondary">{getProviderShowName(item)}</span>
+                  <span className="pr-1.5 system-xs-medium text-text-secondary">{getProviderShowName(item)}</span>
                   <span className="text-text-tertiary">{item.tool_label}</span>
                   {!item.isDeleted && !readonly && (
                     <Tooltip
@@ -268,7 +268,7 @@ const AgentTools: FC = () => {
                         needsDelay={false}
                       >
                         <div
-                          className="cursor-pointer rounded-md p-1  hover:bg-black/5"
+                          className="cursor-pointer rounded-md p-1 hover:bg-black/5"
                           onClick={() => {
                             setCurrentTool(item)
                             setIsShowSettingTool(true)
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 d6c39af58f..757465b5ee 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
@@ -10,10 +10,10 @@ import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-import Button from '@/app/components/base/button'
 import Drawer from '@/app/components/base/drawer'
 import Loading from '@/app/components/base/loading'
 import TabSlider from '@/app/components/base/tab-slider-plain'
+import { Button } from '@/app/components/base/ui/button'
 import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
 import Icon from '@/app/components/plugins/card/base/card-icon'
 import Description from '@/app/components/plugins/card/base/description'
@@ -140,7 +140,7 @@ const SettingBuiltInTool: FC<Props> = ({
                 )}
               </div>
               {item.human_description && (
-                <div className="system-xs-regular mt-0.5 text-text-tertiary">
+                <div className="mt-0.5 system-xs-regular text-text-tertiary">
                   {item.human_description?.[language]}
                 </div>
               )}
@@ -171,7 +171,7 @@ const SettingBuiltInTool: FC<Props> = ({
       footer={null}
       mask={false}
       positionCenter={false}
-      panelClassName={cn('mb-2 mr-2 mt-[64px] w-[420px]! max-w-[420px]! justify-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg! p-0! shadow-xl')}
+      panelClassName={cn('mt-[64px] mr-2 mb-2 w-[420px]! max-w-[420px]! justify-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg! p-0! shadow-xl')}
     >
       <>
         {isLoading && <Loading type="app" />}
@@ -179,14 +179,14 @@ const SettingBuiltInTool: FC<Props> = ({
           <>
             {/* header */}
             <div className="relative border-b border-divider-subtle p-4 pb-3">
-              <div className="absolute right-3 top-3">
+              <div className="absolute top-3 right-3">
                 <ActionButton onClick={onHide}>
                   <RiCloseLine className="h-4 w-4" />
                 </ActionButton>
               </div>
               {showBackButton && (
                 <div
-                  className="system-xs-semibold-uppercase mb-2 flex cursor-pointer items-center gap-1 text-text-accent-secondary"
+                  className="mb-2 flex cursor-pointer items-center gap-1 system-xs-semibold-uppercase text-text-accent-secondary"
                   onClick={onHide}
                 >
                   <RiArrowLeftLine className="h-4 w-4" />
@@ -201,9 +201,9 @@ const SettingBuiltInTool: FC<Props> = ({
                   packageName={collection.name.split('/').pop() || ''}
                 />
               </div>
-              <div className="system-md-semibold mt-1 text-text-primary">{currTool?.label[language]}</div>
+              <div className="mt-1 system-md-semibold text-text-primary">{currTool?.label[language]}</div>
               {!!currTool?.description[language] && (
-                <Description className="mb-2 mt-3 h-auto" text={currTool.description[language]} descriptionLineRows={2}></Description>
+                <Description className="mt-3 mb-2 h-auto" text={currTool.description[language]} descriptionLineRows={2}></Description>
               )}
               {
                 collection.allow_delete && collection.type === CollectionType.builtIn && (
@@ -240,13 +240,13 @@ const SettingBuiltInTool: FC<Props> = ({
                       />
                     )
                   : (
-                      <div className="system-sm-semibold-uppercase p-4 pb-1 text-text-primary">{t('setBuiltInTools.parameters', { ns: 'tools' })}</div>
+                      <div className="p-4 pb-1 system-sm-semibold-uppercase text-text-primary">{t('setBuiltInTools.parameters', { ns: 'tools' })}</div>
                     )}
                 <div className="h-0 grow overflow-y-auto px-4">
                   {isInfoActive ? infoUI : settingUI}
                   {!readonly && !isInfoActive && (
                     <div className="flex shrink-0 justify-end space-x-2 rounded-b-[10px] bg-components-panel-bg py-2">
-                      <Button className="flex h-8 items-center px-3! text-[13px]! font-medium " onClick={onHide}>{t('operation.cancel', { ns: 'common' })}</Button>
+                      <Button className="flex h-8 items-center px-3! text-[13px]! font-medium" onClick={onHide}>{t('operation.cancel', { ns: 'common' })}</Button>
                       <Button className="flex h-8 items-center px-3! text-[13px]! font-medium" variant="primary" disabled={!isValid} onClick={() => onSave?.(tempSetting)}>{t('operation.save', { ns: 'common' })}</Button>
                     </div>
                   )}
diff --git a/web/app/components/app/configuration/config/automatic/automatic-btn.tsx b/web/app/components/app/configuration/config/automatic/automatic-btn.tsx
index 7999ba87af..af14fb037d 100644
--- a/web/app/components/app/configuration/config/automatic/automatic-btn.tsx
+++ b/web/app/components/app/configuration/config/automatic/automatic-btn.tsx
@@ -5,7 +5,7 @@ import {
 } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 
 type IAutomaticBtnProps = {
   onClick: () => void
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 d2522e875e..fcdee7db11 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
@@ -19,11 +19,11 @@ import { useBoolean, useSessionStorageState } from 'ahooks'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'
 import { Generator } from '@/app/components/base/icons/src/vender/other'
 import Loading from '@/app/components/base/loading'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 
 import { toast } from '@/app/components/base/ui/toast'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
@@ -62,7 +62,7 @@ const TryLabel: FC<{
 }> = ({ Icon, text, onClick }) => {
   return (
     <div
-      className="mr-1 mt-2 flex h-7 shrink-0 cursor-pointer items-center rounded-lg bg-components-button-secondary-bg px-2"
+      className="mt-2 mr-1 flex h-7 shrink-0 cursor-pointer items-center rounded-lg bg-components-button-secondary-bg px-2"
       onClick={onClick}
     >
       <Icon className="h-4 w-4 text-text-tertiary"></Icon>
@@ -283,7 +283,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
       <div className="flex h-[680px] flex-wrap">
         <div className="h-full w-[570px] shrink-0 overflow-y-auto border-r border-divider-regular p-6">
           <div className="mb-5">
-            <div className={`text-lg font-bold leading-[28px] ${s.textGradient}`}>{t('generate.title', { ns: 'appDebug' })}</div>
+            <div className={`text-lg leading-[28px] font-bold ${s.textGradient}`}>{t('generate.title', { ns: 'appDebug' })}</div>
             <div className="mt-1 text-[13px] font-normal text-text-tertiary">{t('generate.description', { ns: 'appDebug' })}</div>
           </div>
           <div>
@@ -301,7 +301,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
           {isBasicMode && (
             <div className="mt-4">
               <div className="flex items-center">
-                <div className="mr-3 shrink-0 text-xs font-semibold uppercase leading-[18px] text-text-tertiary">{t('generate.tryIt', { ns: 'appDebug' })}</div>
+                <div className="mr-3 shrink-0 text-xs leading-[18px] font-semibold text-text-tertiary uppercase">{t('generate.tryIt', { ns: 'appDebug' })}</div>
                 <div
                   className="h-px grow"
                   style={{
@@ -326,7 +326,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
           {/* inputs */}
           <div className="mt-4">
             <div>
-              <div className="system-sm-semibold-uppercase mb-1.5 text-text-secondary">{t('generate.instruction', { ns: 'appDebug' })}</div>
+              <div className="mb-1.5 system-sm-semibold-uppercase text-text-secondary">{t('generate.instruction', { ns: 'appDebug' })}</div>
               {isBasicMode
                 ? (
                     <InstructionEditorInBasic
diff --git a/web/app/components/app/configuration/config/automatic/result.tsx b/web/app/components/app/configuration/config/automatic/result.tsx
index 776d774bd8..4beefe8386 100644
--- a/web/app/components/app/configuration/config/automatic/result.tsx
+++ b/web/app/components/app/configuration/config/automatic/result.tsx
@@ -5,7 +5,7 @@ import { RiClipboardLine } from '@remixicon/react'
 import copy from 'copy-to-clipboard'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import CodeEditor from '@/app/components/workflow/nodes/llm/components/json-schema-config-modal/code-editor'
 import PromptRes from './prompt-res'
@@ -42,7 +42,7 @@ const Result: FC<Props> = ({
     <div className="flex h-full flex-col">
       <div className="mb-3 flex shrink-0 items-center justify-between">
         <div>
-          <div className="shrink-0 text-base font-semibold leading-[160%] text-text-secondary">{t('generate.resTitle', { ns: 'appDebug' })}</div>
+          <div className="shrink-0 text-base leading-[160%] font-semibold text-text-secondary">{t('generate.resTitle', { ns: 'appDebug' })}</div>
           <VersionSelector
             versionLen={versions.length}
             value={currentVersionIndex}
diff --git a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
index 2d6b3efb3d..666dab3425 100644
--- a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
+++ b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
@@ -10,11 +10,11 @@ import {
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'
 import { Generator } from '@/app/components/base/icons/src/vender/other'
 import Loading from '@/app/components/base/loading'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
@@ -202,7 +202,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
       <div className="relative flex h-[680px] flex-wrap">
         <div className="h-full w-[570px] shrink-0 overflow-y-auto border-r border-divider-regular p-6">
           <div className="mb-5">
-            <div className={`text-lg font-bold leading-[28px] ${s.textGradient}`}>{t('codegen.title', { ns: 'appDebug' })}</div>
+            <div className={`text-lg leading-[28px] font-bold ${s.textGradient}`}>{t('codegen.title', { ns: 'appDebug' })}</div>
             <div className="mt-1 text-[13px] font-normal text-text-tertiary">{t('codegen.description', { ns: 'appDebug' })}</div>
           </div>
           <div className="mb-4">
@@ -219,7 +219,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
           </div>
           <div>
             <div className="text-[0px]">
-              <div className="mb-1.5 text-text-secondary system-sm-semibold-uppercase">{t('codegen.instruction', { ns: 'appDebug' })}</div>
+              <div className="mb-1.5 system-sm-semibold-uppercase text-text-secondary">{t('codegen.instruction', { ns: 'appDebug' })}</div>
               <InstructionEditor
                 editorKey={editorKey}
                 value={instruction}
diff --git a/web/app/components/app/configuration/configuration-view.tsx b/web/app/components/app/configuration/configuration-view.tsx
index f2f9c06e92..aaee68cb71 100644
--- a/web/app/components/app/configuration/configuration-view.tsx
+++ b/web/app/components/app/configuration/configuration-view.tsx
@@ -10,7 +10,6 @@ import EditHistoryModal from '@/app/components/app/configuration/config-prompt/c
 import AgentSettingButton from '@/app/components/app/configuration/config/agent-setting-button'
 import SelectDataSet from '@/app/components/app/configuration/dataset-config/select-dataset'
 import Debug from '@/app/components/app/configuration/debug'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import Drawer from '@/app/components/base/drawer'
 import { FeaturesProvider } from '@/app/components/base/features'
@@ -25,6 +24,7 @@ import {
   AlertDialogDescription,
   AlertDialogTitle,
 } from '@/app/components/base/ui/alert-dialog'
+import { Button } from '@/app/components/base/ui/button'
 import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
 import PluginDependency from '@/app/components/workflow/plugin-dependency'
 import ConfigContext from '@/context/debug-configuration'
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 53a07a9b1d..fa8a8bdab3 100644
--- a/web/app/components/app/configuration/ctrl-btn-group/index.tsx
+++ b/web/app/components/app/configuration/ctrl-btn-group/index.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import s from './style.module.css'
 
 type IContrlBtnGroupProps = {
@@ -14,7 +14,7 @@ const ContrlBtnGroup: FC<IContrlBtnGroupProps> = ({ onSave, onReset }) => {
   const { t } = useTranslation()
   return (
     <div className="fixed bottom-0 left-[224px] h-[64px] w-[519px]">
-      <div className={`${s.ctrlBtn} flex h-full items-center gap-2  bg-white pl-4`}>
+      <div className={`${s.ctrlBtn} flex h-full items-center gap-2 bg-white pl-4`}>
         <Button variant="primary" onClick={onSave} data-testid="apply-btn">{t('operation.applyConfig', { ns: 'appDebug' })}</Button>
         <Button onClick={onReset} data-testid="reset-btn">{t('operation.resetConfig', { ns: 'appDebug' })}</Button>
       </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 89410203df..5c40afba9f 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
@@ -5,8 +5,8 @@ import { RiEqualizer2Line } from '@remixicon/react'
 import { memo, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useCurrentProviderAndModel, useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
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 5fc594dc6b..21ed5134b0 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
@@ -7,9 +7,9 @@ import { useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
 import Badge from '@/app/components/base/badge'
-import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { ModelFeatureEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import FeatureIcon from '@/app/components/header/account-setting/model-provider-page/model-selector/feature-icon'
 import { useKnowledge } from '@/hooks/use-knowledge'
@@ -134,7 +134,7 @@ const SelectDataSet: FC<ISelectDataSetProps> = ({
                   </div>
                   <div className={cn('max-w-[200px] truncate text-[13px] font-medium text-text-secondary', !item.embedding_available && 'max-w-[120px]! opacity-30')}>{item.name}</div>
                   {!item.embedding_available && (
-                    <span className="ml-1 shrink-0 rounded-md border border-divider-deep px-1 text-xs font-normal leading-[18px] text-text-tertiary">{t('unavailable', { ns: 'dataset' })}</span>
+                    <span className="ml-1 shrink-0 rounded-md border border-divider-deep px-1 text-xs leading-[18px] font-normal text-text-tertiary">{t('unavailable', { ns: 'dataset' })}</span>
                   )}
                 </div>
                 {item.is_multimodal && (
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 c807a09ca8..dc8823cacb 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
@@ -6,9 +6,9 @@ import { RiCloseLine } from '@remixicon/react'
 import { isEqual } from 'es-toolkit/predicate'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { isReRankModelSelected } from '@/app/components/datasets/common/check-rerank-model'
 import { IndexingType } from '@/app/components/datasets/create/step-two'
@@ -192,7 +192,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
       }}
       ref={ref}
     >
-      <div className="flex h-14 shrink-0 items-center justify-between border-b border-divider-regular pl-6 pr-5">
+      <div className="flex h-14 shrink-0 items-center justify-between border-b border-divider-regular pr-5 pl-6">
         <div className="flex flex-col text-base font-semibold text-text-primary">
           <div className="leading-6">{t('title', { ns: 'datasetSettings' })}</div>
         </div>
@@ -206,10 +206,10 @@ const SettingsModal: FC<SettingsModalProps> = ({
         </div>
       </div>
       {/* Body */}
-      <div className="overflow-y-auto border-b border-divider-regular p-6 pb-[68px] pt-5">
+      <div className="overflow-y-auto border-b border-divider-regular p-6 pt-5 pb-[68px]">
         <div className={cn(rowClass, 'items-center')}>
           <div className={labelClass}>
-            <div className="text-text-secondary system-sm-semibold">{t('form.name', { ns: 'datasetSettings' })}</div>
+            <div className="system-sm-semibold text-text-secondary">{t('form.name', { ns: 'datasetSettings' })}</div>
           </div>
           <Input
             value={localeCurrentDataset.name}
@@ -220,7 +220,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
         </div>
         <div className={cn(rowClass)}>
           <div className={labelClass}>
-            <div className="text-text-secondary system-sm-semibold">{t('form.desc', { ns: 'datasetSettings' })}</div>
+            <div className="system-sm-semibold text-text-secondary">{t('form.desc', { ns: 'datasetSettings' })}</div>
           </div>
           <div className="w-full">
             <Textarea
@@ -233,7 +233,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
         </div>
         <div className={rowClass}>
           <div className={labelClass}>
-            <div className="text-text-secondary system-sm-semibold">{t('form.permissions', { ns: 'datasetSettings' })}</div>
+            <div className="system-sm-semibold text-text-secondary">{t('form.permissions', { ns: 'datasetSettings' })}</div>
           </div>
           <div className="w-full">
             <PermissionSelector
@@ -249,7 +249,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
         {!!(currentDataset && currentDataset.indexing_technique) && (
           <div className={cn(rowClass)}>
             <div className={labelClass}>
-              <div className="text-text-secondary system-sm-semibold">{t('form.indexMethod', { ns: 'datasetSettings' })}</div>
+              <div className="system-sm-semibold text-text-secondary">{t('form.indexMethod', { ns: 'datasetSettings' })}</div>
             </div>
             <div className="grow">
               <IndexMethod
@@ -266,7 +266,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
         {indexMethod === IndexingType.QUALIFIED && (
           <div className={cn(rowClass)}>
             <div className={labelClass}>
-              <div className="text-text-secondary system-sm-semibold">{t('form.embeddingModel', { ns: 'datasetSettings' })}</div>
+              <div className="system-sm-semibold text-text-secondary">{t('form.embeddingModel', { ns: 'datasetSettings' })}</div>
             </div>
             <div className="w-full">
               <div className="h-8 w-full rounded-lg bg-components-input-bg-normal opacity-60">
diff --git a/web/app/components/app/configuration/debug/index.tsx b/web/app/components/app/configuration/debug/index.tsx
index d194d1da38..8bd8acadb5 100644
--- a/web/app/components/app/configuration/debug/index.tsx
+++ b/web/app/components/app/configuration/debug/index.tsx
@@ -25,10 +25,10 @@ import { useStore as useAppStore } from '@/app/components/app/store'
 import TextGeneration from '@/app/components/app/text-generate/item'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
 import AgentLogModal from '@/app/components/base/agent-log-modal'
-import Button from '@/app/components/base/button'
 import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
 import { RefreshCcw01 } from '@/app/components/base/icons/src/vender/line/arrows'
 import PromptLogModal from '@/app/components/base/prompt-log-modal'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import {
   Tooltip,
@@ -394,8 +394,8 @@ const Debug: FC<IDebug> = ({
   return (
     <>
       <div className="shrink-0">
-        <div className="flex items-center justify-between px-4 pb-2 pt-3">
-          <div className="text-text-primary system-xl-semibold">{t('inputs.title', { ns: 'appDebug' })}</div>
+        <div className="flex items-center justify-between px-4 pt-3 pb-2">
+          <div className="system-xl-semibold text-text-primary">{t('inputs.title', { ns: 'appDebug' })}</div>
           <div className="flex items-center">
             {
               debugWithMultipleModel
@@ -432,14 +432,14 @@ const Debug: FC<IDebug> = ({
 
                 {
                   varList.length > 0 && (
-                    <div className="relative ml-1 mr-2">
+                    <div className="relative mr-2 ml-1">
                       <Tooltip>
                         <TooltipTrigger render={<ActionButton state={expanded ? ActionButtonState.Active : undefined} onClick={() => !readonly && setExpanded(!expanded)}><RiEqualizer2Line className="h-4 w-4" /></ActionButton>} />
                         <TooltipContent>
                           {t('panel.userInputField', { ns: 'workflow' })}
                         </TooltipContent>
                       </Tooltip>
-                      {expanded && <div className="absolute bottom-[-14px] right-[5px] z-10 h-3 w-3 rotate-45 border-l-[0.5px] border-t-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg" />}
+                      {expanded && <div className="absolute right-[5px] bottom-[-14px] z-10 h-3 w-3 rotate-45 border-t-[0.5px] border-l-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg" />}
                     </div>
                   )
                 }
@@ -517,8 +517,8 @@ const Debug: FC<IDebug> = ({
                     </div>
                   </div>
                   <div className="flex flex-col gap-1">
-                    <div className="text-text-secondary system-md-semibold">{t('noModelSelected', { ns: 'appDebug' })}</div>
-                    <div className="text-text-tertiary system-xs-regular">{t('noModelSelectedTip', { ns: 'appDebug' })}</div>
+                    <div className="system-md-semibold text-text-secondary">{t('noModelSelected', { ns: 'appDebug' })}</div>
+                    <div className="system-xs-regular text-text-tertiary">{t('noModelSelectedTip', { ns: 'appDebug' })}</div>
                   </div>
                 </div>
               </div>
@@ -557,7 +557,7 @@ const Debug: FC<IDebug> = ({
                 {!completionRes && !isResponding && (
                   <div className="flex grow flex-col items-center justify-center gap-2">
                     <RiSparklingFill className="h-12 w-12 text-text-empty-state-icon" />
-                    <div className="text-text-quaternary system-sm-regular">{t('noResult', { ns: 'appDebug' })}</div>
+                    <div className="system-sm-regular text-text-quaternary">{t('noResult', { ns: 'appDebug' })}</div>
                   </div>
                 )}
               </>
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 4c6d34a2f5..24397128c6 100644
--- a/web/app/components/app/configuration/prompt-value-panel/index.tsx
+++ b/web/app/components/app/configuration/prompt-value-panel/index.tsx
@@ -12,13 +12,13 @@ import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import Button from '@/app/components/base/button'
 import FeatureBar from '@/app/components/base/features/new-feature-panel/feature-bar'
 import TextGenerationImageUploader from '@/app/components/base/image-uploader/text-generation-image-uploader'
 import Input from '@/app/components/base/input'
 import Select from '@/app/components/base/select'
 import Textarea from '@/app/components/base/textarea'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import BoolInput from '@/app/components/workflow/nodes/_base/components/before-run-form/bool-input'
 import ConfigContext from '@/context/debug-configuration'
 import { AppModeEnum, ModelModeType } from '@/types/app'
@@ -117,11 +117,11 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
             {!userInputFieldCollapse && <RiArrowDownSLine className="h-4 w-4 text-text-secondary" />}
           </div>
           {!userInputFieldCollapse && (
-            <div className="system-xs-regular mt-1 text-text-tertiary">{t('inputs.completionVarTip', { ns: 'appDebug' })}</div>
+            <div className="mt-1 system-xs-regular text-text-tertiary">{t('inputs.completionVarTip', { ns: 'appDebug' })}</div>
           )}
         </div>
         {!userInputFieldCollapse && promptVariables.length > 0 && (
-          <div className="px-4 pb-4 pt-3">
+          <div className="px-4 pt-3 pb-4">
             {promptVariables.map(({ key, name, type, options, max_length, required }, index) => (
               <div
                 key={key}
@@ -129,7 +129,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
               >
                 <div>
                   {type !== 'checkbox' && (
-                    <div className="system-sm-semibold mb-1 flex h-6 items-center gap-1 text-text-secondary">
+                    <div className="mb-1 flex h-6 items-center gap-1 system-sm-semibold text-text-secondary">
                       <div className="truncate">{name || key}</div>
                       {!required && <span className="system-xs-regular text-text-tertiary">{t('panel.optional', { ns: 'workflow' })}</span>}
                     </div>
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 121eb3e3a7..93d3cf4d24 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
@@ -6,10 +6,10 @@ import { noop } from 'es-toolkit/function'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
-import Button from '@/app/components/base/button'
 import EmojiPicker from '@/app/components/base/emoji-picker'
 import FormGeneration from '@/app/components/base/features/new-feature-panel/moderation/form-generation'
 import { BookOpen01 } from '@/app/components/base/icons/src/vender/line/education'
+import { Button } from '@/app/components/base/ui/button'
 import { Dialog, DialogContent } from '@/app/components/base/ui/dialog'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/app/components/base/ui/select'
 import { toast } from '@/app/components/base/ui/toast'
@@ -116,7 +116,7 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
           {`${action} ${t('variableConfig.apiBasedVar', { ns: 'appDebug' })}`}
         </div>
         <div className="py-2">
-          <div className="text-sm font-medium leading-9 text-text-primary">
+          <div className="text-sm leading-9 font-medium text-text-primary">
             {t('apiBasedExtension.type', { ns: 'common' })}
           </div>
           <Select
@@ -136,7 +136,7 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
           </Select>
         </div>
         <div className="py-2">
-          <div className="text-sm font-medium leading-9 text-text-primary">
+          <div className="text-sm leading-9 font-medium text-text-primary">
             {t('feature.tools.modal.name.title', { ns: 'appDebug' })}
           </div>
           <div className="flex items-center">
@@ -156,7 +156,7 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
           </div>
         </div>
         <div className="py-2">
-          <div className="text-sm font-medium leading-9 text-text-primary">
+          <div className="text-sm leading-9 font-medium text-text-primary">
             {t('feature.tools.modal.variableName.title', { ns: 'appDebug' })}
           </div>
           <input
diff --git a/web/app/components/app/create-app-dialog/app-card/index.tsx b/web/app/components/app/create-app-dialog/app-card/index.tsx
index f0633288fd..2674d3ab1e 100644
--- a/web/app/components/app/create-app-dialog/app-card/index.tsx
+++ b/web/app/components/app/create-app-dialog/app-card/index.tsx
@@ -6,7 +6,7 @@ import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContextSelector } from 'use-context-selector'
 import AppIcon from '@/app/components/base/app-icon'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import AppListContext from '@/context/app-list-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { cn } from '@/utils/classnames'
@@ -34,7 +34,7 @@ const AppCard = ({
     }
   }, [setShowTryAppPanel, app.category])
   return (
-    <div className={cn('group relative flex h-[132px] cursor-pointer flex-col overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg p-4  shadow-xs hover:shadow-lg')}>
+    <div className={cn('group relative flex h-[132px] cursor-pointer flex-col overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg p-4 shadow-xs hover:shadow-lg')}>
       <div className="flex shrink-0 grow-0 items-center gap-3 pb-2">
         <div className="relative shrink-0">
           <AppIcon
@@ -57,13 +57,13 @@ const AppCard = ({
           <AppTypeLabel className="system-2xs-medium-uppercase text-text-tertiary" type={app.app.mode} />
         </div>
       </div>
-      <div className="system-xs-regular py-1 text-text-tertiary">
+      <div className="py-1 system-xs-regular text-text-tertiary">
         <div className="line-clamp-3">
           {app.description}
         </div>
       </div>
       {(canCreate || isTrialApp) && (
-        <div className={cn('absolute bottom-0 left-0 right-0 hidden bg-linear-to-t from-components-panel-gradient-2 from-[60.27%] to-transparent p-4 pt-8 group-hover:flex')}>
+        <div className={cn('absolute right-0 bottom-0 left-0 hidden bg-linear-to-t from-components-panel-gradient-2 from-[60.27%] to-transparent p-4 pt-8 group-hover:flex')}>
           <div className={cn('grid h-8 w-full grid-cols-1 items-center space-x-2', canCreate && 'grid-cols-2')}>
             {canCreate && (
               <Button variant="primary" onClick={() => onCreate()}>
diff --git a/web/app/components/app/create-app-modal/index.tsx b/web/app/components/app/create-app-modal/index.tsx
index f2ced9b6c0..c0c70660bc 100644
--- a/web/app/components/app/create-app-modal/index.tsx
+++ b/web/app/components/app/create-app-modal/index.tsx
@@ -8,12 +8,12 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { trackEvent } from '@/app/components/base/amplitude'
 import AppIcon from '@/app/components/base/app-icon'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import FullScreenModal from '@/app/components/base/fullscreen-modal'
 import { BubbleTextMod, ChatBot, ListSparkle, Logic } from '@/app/components/base/icons/src/vender/solid/communication'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
@@ -106,15 +106,15 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
   })
   return (
     <>
-      <div className="flex h-full justify-center overflow-y-auto overflow-x-hidden">
+      <div className="flex h-full justify-center overflow-x-hidden overflow-y-auto">
         <div className="flex flex-1 shrink-0 justify-end">
           <div className="px-10">
             <div className="h-6 w-full 2xl:h-[139px]" />
-            <div className="pb-6 pt-1">
-              <span className="text-text-primary title-2xl-semi-bold">{t('newApp.startFromBlank', { ns: 'app' })}</span>
+            <div className="pt-1 pb-6">
+              <span className="title-2xl-semi-bold text-text-primary">{t('newApp.startFromBlank', { ns: 'app' })}</span>
             </div>
             <div className="mb-2 leading-6">
-              <span className="text-text-secondary system-sm-semibold">{t('newApp.chooseAppType', { ns: 'app' })}</span>
+              <span className="system-sm-semibold text-text-secondary">{t('newApp.chooseAppType', { ns: 'app' })}</span>
             </div>
             <div className="flex w-[660px] flex-col gap-4">
               <div>
@@ -154,7 +154,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
                     className="flex cursor-pointer items-center border-0 bg-transparent p-0"
                     onClick={() => setIsAppTypeExpanded(!isAppTypeExpanded)}
                   >
-                    <span className="text-text-tertiary system-2xs-medium-uppercase">{t('newApp.forBeginners', { ns: 'app' })}</span>
+                    <span className="system-2xs-medium-uppercase text-text-tertiary">{t('newApp.forBeginners', { ns: 'app' })}</span>
                     <RiArrowRightSLine className={`ml-1 h-4 w-4 text-text-tertiary transition-transform ${isAppTypeExpanded ? 'rotate-90' : ''}`} />
                   </button>
                 </div>
@@ -206,7 +206,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
               <div className="flex items-center space-x-3">
                 <div className="flex-1">
                   <div className="mb-1 flex h-6 items-center">
-                    <label className="text-text-secondary system-sm-semibold">{t('newApp.captionName', { ns: 'app' })}</label>
+                    <label className="system-sm-semibold text-text-secondary">{t('newApp.captionName', { ns: 'app' })}</label>
                   </div>
                   <Input
                     value={name}
@@ -237,8 +237,8 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
               </div>
               <div>
                 <div className="mb-1 flex h-6 items-center">
-                  <label className="text-text-secondary system-sm-semibold">{t('newApp.captionDescription', { ns: 'app' })}</label>
-                  <span className="ml-1 text-text-tertiary system-xs-regular">
+                  <label className="system-sm-semibold text-text-secondary">{t('newApp.captionDescription', { ns: 'app' })}</label>
+                  <span className="ml-1 system-xs-regular text-text-tertiary">
                     (
                     {t('newApp.optional', { ns: 'app' })}
                     )
@@ -253,8 +253,8 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
               </div>
             </div>
             {isAppsFull && <AppsFull className="mt-4" loc="app-create" />}
-            <div className="flex items-center justify-between pb-10 pt-5">
-              <div className="flex cursor-pointer items-center gap-1 text-text-tertiary system-xs-regular" onClick={onCreateFromTemplate}>
+            <div className="flex items-center justify-between pt-5 pb-10">
+              <div className="flex cursor-pointer items-center gap-1 system-xs-regular text-text-tertiary" onClick={onCreateFromTemplate}>
                 <span>{t('newApp.noIdeaTip', { ns: 'app' })}</span>
                 <div className="p-px">
                   <RiArrowRightLine className="h-3.5 w-3.5" />
@@ -271,11 +271,11 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
           </div>
         </div>
         <div className="relative flex h-full flex-1 shrink justify-start overflow-hidden">
-          <div className="absolute left-0 right-0 top-0 h-6 border-b border-b-divider-subtle 2xl:h-[139px]"></div>
+          <div className="absolute top-0 right-0 left-0 h-6 border-b border-b-divider-subtle 2xl:h-[139px]"></div>
           <div className="max-w-[760px] border-x border-x-divider-subtle">
             <div className="h-6 2xl:h-[139px]" />
             <AppPreview mode={appMode} />
-            <div className="absolute left-0 right-0 border-b border-b-divider-subtle"></div>
+            <div className="absolute right-0 left-0 border-b border-b-divider-subtle"></div>
             <div className="flex h-[448px] w-[664px] items-center justify-center" style={{ background: 'repeating-linear-gradient(135deg, transparent, transparent 2px, rgba(16,24,40,0.04) 4px,transparent 3px, transparent 6px)' }}>
               <AppScreenShot show={appMode === AppModeEnum.CHAT} mode={AppModeEnum.CHAT} />
               <AppScreenShot show={appMode === AppModeEnum.ADVANCED_CHAT} mode={AppModeEnum.ADVANCED_CHAT} />
@@ -283,7 +283,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
               <AppScreenShot show={appMode === AppModeEnum.COMPLETION} mode={AppModeEnum.COMPLETION} />
               <AppScreenShot show={appMode === AppModeEnum.WORKFLOW} mode={AppModeEnum.WORKFLOW} />
             </div>
-            <div className="absolute left-0 right-0 border-b border-b-divider-subtle"></div>
+            <div className="absolute right-0 left-0 border-b border-b-divider-subtle"></div>
           </div>
         </div>
       </div>
@@ -322,14 +322,14 @@ function AppTypeCard({ icon, title, description, active, onClick }: AppTypeCardP
         cn(`relative box-content h-[84px] w-[191px] cursor-pointer rounded-xl
       border-[0.5px] border-components-option-card-option-border
       bg-components-panel-on-panel-item-bg p-3 shadow-xs hover:shadow-md`, active
-          ? 'shadow-md outline-solid outline-[1.5px] outline-components-option-card-option-selected-border'
+          ? 'shadow-md outline-[1.5px] outline-components-option-card-option-selected-border outline-solid'
           : '')
       }
       onClick={onClick}
     >
       {icon}
-      <div className="mb-0.5 mt-2 text-text-secondary system-sm-semibold">{title}</div>
-      <div className="line-clamp-2 text-text-tertiary system-xs-regular" title={description}>{description}</div>
+      <div className="mt-2 mb-0.5 system-sm-semibold text-text-secondary">{title}</div>
+      <div className="line-clamp-2 system-xs-regular text-text-tertiary" title={description}>{description}</div>
     </div>
   )
 }
@@ -361,8 +361,8 @@ function AppPreview({ mode }: { mode: AppModeEnum }) {
   const previewInfo = modeToPreviewInfoMap[mode]
   return (
     <div className="px-8 py-4">
-      <h4 className="text-text-secondary system-sm-semibold-uppercase">{previewInfo.title}</h4>
-      <div className="mt-1 min-h-8 max-w-96 text-text-tertiary system-xs-regular">
+      <h4 className="system-sm-semibold-uppercase text-text-secondary">{previewInfo.title}</h4>
+      <div className="mt-1 min-h-8 max-w-96 system-xs-regular text-text-tertiary">
         <span>{previewInfo.description}</span>
       </div>
     </div>
diff --git a/web/app/components/app/create-from-dsl-modal/dsl-confirm-modal.tsx b/web/app/components/app/create-from-dsl-modal/dsl-confirm-modal.tsx
index db675228c4..71a6757bf2 100644
--- a/web/app/components/app/create-from-dsl-modal/dsl-confirm-modal.tsx
+++ b/web/app/components/app/create-from-dsl-modal/dsl-confirm-modal.tsx
@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 
 type DSLConfirmModalProps = {
   versions?: {
@@ -27,7 +27,7 @@ const DSLConfirmModal = ({
     >
       <div className="flex flex-col items-start gap-2 self-stretch pb-4">
         <div className="title-2xl-semi-bold text-text-primary">{t('newApp.appCreateDSLErrorTitle', { ns: 'app' })}</div>
-        <div className="system-md-regular flex grow flex-col text-text-secondary">
+        <div className="flex grow flex-col system-md-regular text-text-secondary">
           <div>{t('newApp.appCreateDSLErrorPart1', { ns: 'app' })}</div>
           <div>{t('newApp.appCreateDSLErrorPart2', { ns: 'app' })}</div>
           <br />
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 dd17655e3c..bd6c91f323 100644
--- a/web/app/components/app/create-from-dsl-modal/index.tsx
+++ b/web/app/components/app/create-from-dsl-modal/index.tsx
@@ -7,9 +7,9 @@ import { noop } from 'es-toolkit/function'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { trackEvent } from '@/app/components/base/amplitude'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
@@ -228,7 +228,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
         isShow={show}
         onClose={noop}
       >
-        <div className="flex items-center justify-between pb-3 pl-6 pr-5 pt-6 text-text-primary title-2xl-semi-bold">
+        <div className="flex items-center justify-between pt-6 pr-5 pb-3 pl-6 title-2xl-semi-bold text-text-primary">
           {t('importFromDSL', { ns: 'app' })}
           <div
             className="flex h-8 w-8 cursor-pointer items-center"
@@ -237,7 +237,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
             <RiCloseLine className="h-5 w-5 text-text-tertiary" />
           </div>
         </div>
-        <div className="flex h-9 items-center space-x-6 border-b border-divider-subtle px-6 text-text-tertiary system-md-semibold">
+        <div className="flex h-9 items-center space-x-6 border-b border-divider-subtle px-6 system-md-semibold text-text-tertiary">
           {
             tabs.map(tab => (
               <div
@@ -271,7 +271,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
           {
             currentTab === CreateFromDSLModalTab.FROM_URL && (
               <div>
-                <div className="mb-1 text-text-secondary system-md-semibold">DSL URL</div>
+                <div className="mb-1 system-md-semibold text-text-secondary">DSL URL</div>
                 <Input
                   placeholder={t('importFromDSLUrlPlaceholder', { ns: 'app' }) || ''}
                   value={dslUrlValue}
@@ -305,8 +305,8 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
         className="w-[480px]"
       >
         <div className="flex flex-col items-start gap-2 self-stretch pb-4">
-          <div className="text-text-primary title-2xl-semi-bold">{t('newApp.appCreateDSLErrorTitle', { ns: 'app' })}</div>
-          <div className="flex grow flex-col text-text-secondary system-md-regular">
+          <div className="title-2xl-semi-bold text-text-primary">{t('newApp.appCreateDSLErrorTitle', { ns: 'app' })}</div>
+          <div className="flex grow flex-col system-md-regular text-text-secondary">
             <div>{t('newApp.appCreateDSLErrorPart1', { ns: 'app' })}</div>
             <div>{t('newApp.appCreateDSLErrorPart2', { ns: 'app' })}</div>
             <br />
diff --git a/web/app/components/app/duplicate-modal/index.tsx b/web/app/components/app/duplicate-modal/index.tsx
index 151c03e925..2fe1d2124d 100644
--- a/web/app/components/app/duplicate-modal/index.tsx
+++ b/web/app/components/app/duplicate-modal/index.tsx
@@ -6,9 +6,9 @@ import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import { useProviderContext } from '@/context/provider-context'
@@ -76,12 +76,12 @@ const DuplicateAppModal = ({
         onClose={noop}
         className={cn('relative max-w-[480px]!', 'px-8')}
       >
-        <div className="absolute right-4 top-4 cursor-pointer p-2" onClick={onHide}>
+        <div className="absolute top-4 right-4 cursor-pointer p-2" onClick={onHide}>
           <RiCloseLine className="h-4 w-4 text-text-tertiary" />
         </div>
-        <div className="relative mb-9 mt-3 text-xl font-semibold leading-[30px] text-text-primary">{t('duplicateTitle', { ns: 'app' })}</div>
-        <div className="system-sm-regular mb-9 text-text-secondary">
-          <div className="system-md-medium mb-2">{t('appCustomize.subTitle', { ns: 'explore' })}</div>
+        <div className="relative mt-3 mb-9 text-xl leading-[30px] font-semibold text-text-primary">{t('duplicateTitle', { ns: 'app' })}</div>
+        <div className="mb-9 system-sm-regular text-text-secondary">
+          <div className="mb-2 system-md-medium">{t('appCustomize.subTitle', { ns: 'explore' })}</div>
           <div className="flex items-center justify-between space-x-2">
             <AppIcon
               size="large"
diff --git a/web/app/components/app/in-site-message/index.tsx b/web/app/components/app/in-site-message/index.tsx
index 0276257860..fd7ced191e 100644
--- a/web/app/components/app/in-site-message/index.tsx
+++ b/web/app/components/app/in-site-message/index.tsx
@@ -2,8 +2,8 @@
 
 import { useEffect, useMemo, useState } from 'react'
 import { trackEvent } from '@/app/components/base/amplitude'
-import Button from '@/app/components/base/button'
 import { MarkdownWithDirective } from '@/app/components/base/markdown-with-directive'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 
 type InSiteMessageAction = 'link' | 'close'
@@ -111,20 +111,20 @@ function InSiteMessage({
   return (
     <div
       className={cn(
-        'fixed bottom-3 right-3 z-50 w-[360px] overflow-hidden rounded-xl border border-components-panel-border-subtle bg-components-panel-bg shadow-2xl backdrop-blur-[5px]',
+        'fixed right-3 bottom-3 z-50 w-[360px] overflow-hidden rounded-xl border border-components-panel-border-subtle bg-components-panel-bg shadow-2xl backdrop-blur-[5px]',
         className,
       )}
     >
-      <div className="flex min-h-[128px] flex-col justify-end gap-0.5 bg-cover px-4 pb-3 pt-6 text-text-primary-on-surface" style={headerStyle}>
-        <div className="whitespace-pre-line title-3xl-bold">
+      <div className="flex min-h-[128px] flex-col justify-end gap-0.5 bg-cover px-4 pt-6 pb-3 text-text-primary-on-surface" style={headerStyle}>
+        <div className="title-3xl-bold whitespace-pre-line">
           {normalizedTitle}
         </div>
-        <div className="whitespace-pre-line body-md-regular">
+        <div className="body-md-regular whitespace-pre-line">
           {normalizedSubtitle}
         </div>
       </div>
 
-      <div className="px-4 pb-2 pt-4 text-text-secondary body-md-regular">
+      <div className="px-4 pt-4 pb-2 body-md-regular text-text-secondary">
         <MarkdownWithDirective markdown={main} />
       </div>
 
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 078386d4a9..e8071ff7ae 100644
--- a/web/app/components/app/overview/apikey-info-panel/index.tsx
+++ b/web/app/components/app/overview/apikey-info-panel/index.tsx
@@ -4,8 +4,8 @@ import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { LinkExternal02 } from '@/app/components/base/icons/src/vender/line/general'
+import { Button } from '@/app/components/base/ui/button'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { IS_CE_EDITION } from '@/config'
 import { useModalContext } from '@/context/modal-context'
@@ -29,7 +29,7 @@ const APIKeyInfoPanel: FC = () => {
     return null
 
   return (
-    <div className={cn('border-components-panel-border bg-components-panel-bg', 'relative mb-6 rounded-2xl border p-8 shadow-md ')}>
+    <div className={cn('border-components-panel-border bg-components-panel-bg', 'relative mb-6 rounded-2xl border p-8 shadow-md')}>
       <div className={cn('text-[24px] font-semibold text-text-primary', isCloud ? 'flex h-8 items-center space-x-1' : 'mb-6 leading-8')}>
         {isCloud && <em-emoji id="😀" />}
         {isCloud
@@ -56,7 +56,7 @@ const APIKeyInfoPanel: FC = () => {
       </Button>
       {!isCloud && (
         <a
-          className="mt-2 flex h-[26px] items-center space-x-1  p-1 text-xs font-medium text-[#155EEF]"
+          className="mt-2 flex h-[26px] items-center space-x-1 p-1 text-xs font-medium text-[#155EEF]"
           href="https://cloud.dify.ai/apps"
           target="_blank"
           rel="noopener noreferrer"
@@ -67,7 +67,7 @@ const APIKeyInfoPanel: FC = () => {
       )}
       <div
         onClick={() => setIsShow(false)}
-        className="absolute right-4 top-4 flex h-8 w-8 cursor-pointer items-center justify-center "
+        className="absolute top-4 right-4 flex h-8 w-8 cursor-pointer items-center justify-center"
       >
         <RiCloseLine className="h-4 w-4 text-text-tertiary" />
       </div>
diff --git a/web/app/components/app/overview/app-card-sections.tsx b/web/app/components/app/overview/app-card-sections.tsx
index 1cbc9c69c6..659335227c 100644
--- a/web/app/components/app/overview/app-card-sections.tsx
+++ b/web/app/components/app/overview/app-card-sections.tsx
@@ -6,7 +6,6 @@ import type { ConfigParams } from './settings'
 import type { AppDetailResponse } from '@/models/app'
 import type { AppSSO } from '@/types/app'
 import { RiArrowRightSLine, RiBookOpenLine, RiBuildingLine, RiEqualizer2Line, RiExternalLinkLine, RiGlobalLine, RiLockLine, RiPaintBrushLine, RiVerifiedBadgeLine, RiWindowLine } from '@remixicon/react'
-import Button from '@/app/components/base/button'
 import CopyFeedback from '@/app/components/base/copy-feedback'
 import Divider from '@/app/components/base/divider'
 import ShareQRCode from '@/app/components/base/qrcode'
@@ -19,6 +18,7 @@ import {
   AlertDialogDescription,
   AlertDialogTitle,
 } from '@/app/components/base/ui/alert-dialog'
+import { Button } from '@/app/components/base/ui/button'
 import {
   Tooltip,
   TooltipContent,
diff --git a/web/app/components/app/overview/customize/index.tsx b/web/app/components/app/overview/customize/index.tsx
index 4ec23780e9..b1d7066779 100644
--- a/web/app/components/app/overview/customize/index.tsx
+++ b/web/app/components/app/overview/customize/index.tsx
@@ -3,9 +3,9 @@ import type { FC } from 'react'
 import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
 import Tag from '@/app/components/base/tag'
+import { Button } from '@/app/components/base/ui/button'
 import { useDocLink } from '@/context/i18n'
 import { AppModeEnum } from '@/types/app'
 
@@ -54,17 +54,17 @@ const CustomizeModal: FC<IShareLinkProps> = ({
       closable={true}
     >
       <div className="mt-4 w-full rounded-lg border-[0.5px] border-components-panel-border px-6 py-5">
-        <Tag bordered={true} hideBg={true} className="border-text-accent-secondary uppercase text-text-accent-secondary">
+        <Tag bordered={true} hideBg={true} className="border-text-accent-secondary text-text-accent-secondary uppercase">
           {t(`${prefixCustomize}.way`, { ns: 'appOverview' })}
           {' '}
           1
         </Tag>
-        <p className="system-sm-medium my-2 text-text-secondary">{t(`${prefixCustomize}.way1.name`, { ns: 'appOverview' })}</p>
+        <p className="my-2 system-sm-medium text-text-secondary">{t(`${prefixCustomize}.way1.name`, { ns: 'appOverview' })}</p>
         <div className="flex py-4">
           <StepNum>1</StepNum>
           <div className="flex flex-col">
             <div className="text-text-primary">{t(`${prefixCustomize}.way1.step1`, { ns: 'appOverview' })}</div>
-            <div className="mb-2 mt-1 text-xs text-text-tertiary">{t(`${prefixCustomize}.way1.step1Tip`, { ns: 'appOverview' })}</div>
+            <div className="mt-1 mb-2 text-xs text-text-tertiary">{t(`${prefixCustomize}.way1.step1Tip`, { ns: 'appOverview' })}</div>
             <a href={`https://github.com/langgenius/${isChatApp ? 'webapp-conversation' : 'webapp-text-generator'}`} target="_blank" rel="noopener noreferrer">
               <Button>
                 <GithubIcon className="mr-2 text-text-secondary" />
@@ -77,10 +77,10 @@ const CustomizeModal: FC<IShareLinkProps> = ({
           <StepNum>2</StepNum>
           <div className="flex flex-col">
             <div className="text-text-primary">{t(`${prefixCustomize}.way1.step2`, { ns: 'appOverview' })}</div>
-            <div className="mb-2 mt-1 text-xs text-text-tertiary">{t(`${prefixCustomize}.way1.step2Tip`, { ns: 'appOverview' })}</div>
+            <div className="mt-1 mb-2 text-xs text-text-tertiary">{t(`${prefixCustomize}.way1.step2Tip`, { ns: 'appOverview' })}</div>
             <a href="https://vercel.com/docs/concepts/deployments/git/vercel-for-github" target="_blank" rel="noopener noreferrer">
               <Button>
-                <div className="mr-1.5 border-b-12 border-l-[7px] border-r-[7px] border-t-0 border-solid border-text-primary border-l-transparent border-r-transparent border-t-transparent"></div>
+                <div className="mr-1.5 border-t-0 border-r-[7px] border-b-12 border-l-[7px] border-solid border-text-primary border-t-transparent border-r-transparent border-l-transparent"></div>
                 <span>{t(`${prefixCustomize}.way1.step2Operation`, { ns: 'appOverview' })}</span>
               </Button>
             </a>
@@ -90,8 +90,8 @@ const CustomizeModal: FC<IShareLinkProps> = ({
           <StepNum>3</StepNum>
           <div className="flex w-full flex-col overflow-hidden">
             <div className="text-text-primary">{t(`${prefixCustomize}.way1.step3`, { ns: 'appOverview' })}</div>
-            <div className="mb-2 mt-1 text-xs text-text-tertiary">{t(`${prefixCustomize}.way1.step3Tip`, { ns: 'appOverview' })}</div>
-            <pre className="box-border select-text overflow-x-scroll rounded-lg border-[0.5px] border-components-panel-border bg-background-section px-4 py-3 text-xs font-medium text-text-secondary">
+            <div className="mt-1 mb-2 text-xs text-text-tertiary">{t(`${prefixCustomize}.way1.step3Tip`, { ns: 'appOverview' })}</div>
+            <pre className="box-border overflow-x-scroll rounded-lg border-[0.5px] border-components-panel-border bg-background-section px-4 py-3 text-xs font-medium text-text-secondary select-text">
               NEXT_PUBLIC_APP_ID=
               {`'${appId}'`}
               {' '}
@@ -108,12 +108,12 @@ const CustomizeModal: FC<IShareLinkProps> = ({
 
       </div>
       <div className="mt-4 w-full rounded-lg border-[0.5px] border-components-panel-border px-6 py-5">
-        <Tag bordered={true} hideBg={true} className="border-text-accent-secondary uppercase text-text-accent-secondary">
+        <Tag bordered={true} hideBg={true} className="border-text-accent-secondary text-text-accent-secondary uppercase">
           {t(`${prefixCustomize}.way`, { ns: 'appOverview' })}
           {' '}
           2
         </Tag>
-        <p className="system-sm-medium my-2 text-text-secondary">{t(`${prefixCustomize}.way2.name`, { ns: 'appOverview' })}</p>
+        <p className="my-2 system-sm-medium text-text-secondary">{t(`${prefixCustomize}.way2.name`, { ns: 'appOverview' })}</p>
         <Button
           className="mt-2"
           onClick={() =>
diff --git a/web/app/components/app/overview/settings/index.tsx b/web/app/components/app/overview/settings/index.tsx
index cd50e7f8ee..131a0f9fd5 100644
--- a/web/app/components/app/overview/settings/index.tsx
+++ b/web/app/components/app/overview/settings/index.tsx
@@ -10,7 +10,6 @@ import { Trans, useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import AppIcon from '@/app/components/base/app-icon'
 import AppIconPicker from '@/app/components/base/app-icon-picker'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import { SparklesSoft } from '@/app/components/base/icons/src/public/common'
 import Input from '@/app/components/base/input'
@@ -20,6 +19,7 @@ import { SimpleSelect } from '@/app/components/base/select'
 import Switch from '@/app/components/base/switch'
 import Textarea from '@/app/components/base/textarea'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { useModalContext } from '@/context/modal-context'
@@ -241,14 +241,14 @@ const SettingsModal: FC<ISettingsModalProps> = ({
         className="max-w-[520px] p-0"
       >
         {/* header */}
-        <div className="pb-3 pl-6 pr-5 pt-5">
+        <div className="pt-5 pr-5 pb-3 pl-6">
           <div className="flex items-center gap-1">
-            <div className="grow text-text-primary title-2xl-semi-bold">{t(`${prefixSettings}.title`, { ns: 'appOverview' })}</div>
+            <div className="grow title-2xl-semi-bold text-text-primary">{t(`${prefixSettings}.title`, { ns: 'appOverview' })}</div>
             <ActionButton className="shrink-0" onClick={onHide}>
               <RiCloseLine className="h-4 w-4" />
             </ActionButton>
           </div>
-          <div className="mt-0.5 text-text-tertiary system-xs-regular">
+          <div className="mt-0.5 system-xs-regular text-text-tertiary">
             <span>{t(`${prefixSettings}.modalTip`, { ns: 'appOverview' })}</span>
           </div>
         </div>
@@ -257,7 +257,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
           {/* name & icon */}
           <div className="flex gap-4">
             <div className="grow">
-              <div className={cn('mb-1 py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.webName`, { ns: 'appOverview' })}</div>
+              <div className={cn('mb-1 py-1 system-sm-semibold text-text-secondary')}>{t(`${prefixSettings}.webName`, { ns: 'appOverview' })}</div>
               <Input
                 className="w-full"
                 value={inputInfo.title}
@@ -277,32 +277,32 @@ const SettingsModal: FC<ISettingsModalProps> = ({
           </div>
           {/* description */}
           <div className="relative">
-            <div className={cn('py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.webDesc`, { ns: 'appOverview' })}</div>
+            <div className={cn('py-1 system-sm-semibold text-text-secondary')}>{t(`${prefixSettings}.webDesc`, { ns: 'appOverview' })}</div>
             <Textarea
               className="mt-1"
               value={inputInfo.desc}
               onChange={e => onDesChange(e.target.value)}
               placeholder={t(`${prefixSettings}.webDescPlaceholder`, { ns: 'appOverview' }) as string}
             />
-            <p className={cn('pb-0.5 text-text-tertiary body-xs-regular')}>{t(`${prefixSettings}.webDescTip`, { ns: 'appOverview' })}</p>
+            <p className={cn('pb-0.5 body-xs-regular text-text-tertiary')}>{t(`${prefixSettings}.webDescTip`, { ns: 'appOverview' })}</p>
           </div>
           <Divider className="my-0 h-px" />
           {/* answer icon */}
           {isChat && (
             <div className="w-full">
               <div className="flex items-center justify-between">
-                <div className={cn('py-1 text-text-secondary system-sm-semibold')}>{t('answerIcon.title', { ns: 'app' })}</div>
+                <div className={cn('py-1 system-sm-semibold text-text-secondary')}>{t('answerIcon.title', { ns: 'app' })}</div>
                 <Switch
                   value={inputInfo.use_icon_as_answer_icon}
                   onChange={v => setInputInfo({ ...inputInfo, use_icon_as_answer_icon: v })}
                 />
               </div>
-              <p className="pb-0.5 text-text-tertiary body-xs-regular">{t('answerIcon.description', { ns: 'app' })}</p>
+              <p className="pb-0.5 body-xs-regular text-text-tertiary">{t('answerIcon.description', { ns: 'app' })}</p>
             </div>
           )}
           {/* language */}
           <div className="flex items-center">
-            <div className={cn('grow py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.language`, { ns: 'appOverview' })}</div>
+            <div className={cn('grow py-1 system-sm-semibold text-text-secondary')}>{t(`${prefixSettings}.language`, { ns: 'appOverview' })}</div>
             <SimpleSelect
               wrapperClassName="w-[200px]"
               items={languages.filter(item => item.supported)}
@@ -315,8 +315,8 @@ const SettingsModal: FC<ISettingsModalProps> = ({
           {isChat && (
             <div className="flex items-center">
               <div className="grow">
-                <div className={cn('py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.chatColorTheme`, { ns: 'appOverview' })}</div>
-                <div className="pb-0.5 text-text-tertiary body-xs-regular">{t(`${prefixSettings}.chatColorThemeDesc`, { ns: 'appOverview' })}</div>
+                <div className={cn('py-1 system-sm-semibold text-text-secondary')}>{t(`${prefixSettings}.chatColorTheme`, { ns: 'appOverview' })}</div>
+                <div className="pb-0.5 body-xs-regular text-text-tertiary">{t(`${prefixSettings}.chatColorThemeDesc`, { ns: 'appOverview' })}</div>
               </div>
               <div className="shrink-0">
                 <Input
@@ -326,7 +326,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
                   placeholder="E.g #A020F0"
                 />
                 <div className="flex items-center justify-between">
-                  <p className={cn('text-text-tertiary body-xs-regular')}>{t(`${prefixSettings}.chatColorThemeInverted`, { ns: 'appOverview' })}</p>
+                  <p className={cn('body-xs-regular text-text-tertiary')}>{t(`${prefixSettings}.chatColorThemeInverted`, { ns: 'appOverview' })}</p>
                   <Switch value={inputInfo.chatColorThemeInverted} onChange={v => setInputInfo({ ...inputInfo, chatColorThemeInverted: v })}></Switch>
                 </div>
               </div>
@@ -335,22 +335,22 @@ const SettingsModal: FC<ISettingsModalProps> = ({
           {/* workflow detail */}
           <div className="w-full">
             <div className="flex items-center justify-between">
-              <div className={cn('py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.workflow.subTitle`, { ns: 'appOverview' })}</div>
+              <div className={cn('py-1 system-sm-semibold text-text-secondary')}>{t(`${prefixSettings}.workflow.subTitle`, { ns: 'appOverview' })}</div>
               <Switch
                 disabled={!(appInfo.mode === AppModeEnum.WORKFLOW || appInfo.mode === AppModeEnum.ADVANCED_CHAT)}
                 value={inputInfo.show_workflow_steps}
                 onChange={v => setInputInfo({ ...inputInfo, show_workflow_steps: v })}
               />
             </div>
-            <p className="pb-0.5 text-text-tertiary body-xs-regular">{t(`${prefixSettings}.workflow.showDesc`, { ns: 'appOverview' })}</p>
+            <p className="pb-0.5 body-xs-regular text-text-tertiary">{t(`${prefixSettings}.workflow.showDesc`, { ns: 'appOverview' })}</p>
           </div>
           {/* more settings switch */}
           <Divider className="my-0 h-px" />
           {!isShowMore && (
             <div className="flex cursor-pointer items-center" onClick={() => setIsShowMore(true)}>
               <div className="grow">
-                <div className={cn('py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.more.entry`, { ns: 'appOverview' })}</div>
-                <p className={cn('pb-0.5 text-text-tertiary body-xs-regular')}>
+                <div className={cn('py-1 system-sm-semibold text-text-secondary')}>{t(`${prefixSettings}.more.entry`, { ns: 'appOverview' })}</div>
+                <p className={cn('pb-0.5 body-xs-regular text-text-tertiary')}>
                   {t(`${prefixSettings}.more.copyRightPlaceholder`, { ns: 'appOverview' })}
                   {' '}
                   &
@@ -368,7 +368,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
               <div className="w-full">
                 <div className="flex items-center">
                   <div className="flex grow items-center">
-                    <div className={cn('mr-1 py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.more.copyright`, { ns: 'appOverview' })}</div>
+                    <div className={cn('mr-1 py-1 system-sm-semibold text-text-secondary')}>{t(`${prefixSettings}.more.copyright`, { ns: 'appOverview' })}</div>
                     {/* upgrade button */}
                     {enableBilling && isFreePlan && (
                       <div className="h-[18px] select-none">
@@ -397,7 +397,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
                     />
                   </Tooltip>
                 </div>
-                <p className="pb-0.5 text-text-tertiary body-xs-regular">{t(`${prefixSettings}.more.copyrightTip`, { ns: 'appOverview' })}</p>
+                <p className="pb-0.5 body-xs-regular text-text-tertiary">{t(`${prefixSettings}.more.copyrightTip`, { ns: 'appOverview' })}</p>
                 {inputInfo.copyrightSwitchValue && (
                   <Input
                     className="mt-2 h-10"
@@ -409,8 +409,8 @@ const SettingsModal: FC<ISettingsModalProps> = ({
               </div>
               {/* privacy policy */}
               <div className="w-full">
-                <div className={cn('py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.more.privacyPolicy`, { ns: 'appOverview' })}</div>
-                <p className={cn('pb-0.5 text-text-tertiary body-xs-regular')}>
+                <div className={cn('py-1 system-sm-semibold text-text-secondary')}>{t(`${prefixSettings}.more.privacyPolicy`, { ns: 'appOverview' })}</div>
+                <p className={cn('pb-0.5 body-xs-regular text-text-tertiary')}>
                   <Trans
                     i18nKey={`${prefixSettings}.more.privacyPolicyTip`}
                     ns="appOverview"
@@ -426,8 +426,8 @@ const SettingsModal: FC<ISettingsModalProps> = ({
               </div>
               {/* custom disclaimer */}
               <div className="w-full">
-                <div className={cn('py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.more.customDisclaimer`, { ns: 'appOverview' })}</div>
-                <p className={cn('pb-0.5 text-text-tertiary body-xs-regular')}>{t(`${prefixSettings}.more.customDisclaimerTip`, { ns: 'appOverview' })}</p>
+                <div className={cn('py-1 system-sm-semibold text-text-secondary')}>{t(`${prefixSettings}.more.customDisclaimer`, { ns: 'appOverview' })}</div>
+                <p className={cn('pb-0.5 body-xs-regular text-text-tertiary')}>{t(`${prefixSettings}.more.customDisclaimerTip`, { ns: 'appOverview' })}</p>
                 <Textarea
                   className="mt-1"
                   value={inputInfo.customDisclaimer}
diff --git a/web/app/components/app/switch-app-modal/index.tsx b/web/app/components/app/switch-app-modal/index.tsx
index ffa5dc6ef4..7ccbfccf30 100644
--- a/web/app/components/app/switch-app-modal/index.tsx
+++ b/web/app/components/app/switch-app-modal/index.tsx
@@ -7,12 +7,12 @@ import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import AppIcon from '@/app/components/base/app-icon'
-import Button from '@/app/components/base/button'
 import Checkbox from '@/app/components/base/checkbox'
 import Confirm from '@/app/components/base/confirm'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
@@ -98,20 +98,20 @@ const SwitchAppModal = ({ show, appDetail, inAppDetail = false, onSuccess, onClo
         isShow={show}
         onClose={noop}
       >
-        <div className="absolute right-4 top-4 cursor-pointer p-2" onClick={onClose}>
+        <div className="absolute top-4 right-4 cursor-pointer p-2" onClick={onClose}>
           <RiCloseLine className="h-4 w-4 text-text-tertiary" />
         </div>
         <div className="h-12 w-12 rounded-xl border-[0.5px] border-divider-regular bg-background-default-burn p-3 shadow-xl">
           <AlertTriangle className="h-6 w-6 text-[rgb(247,144,9)]" />
         </div>
-        <div className="relative mt-3 text-xl font-semibold leading-[30px] text-text-primary">{t('switch', { ns: 'app' })}</div>
+        <div className="relative mt-3 text-xl leading-[30px] font-semibold text-text-primary">{t('switch', { ns: 'app' })}</div>
         <div className="my-1 text-sm leading-5 text-text-tertiary">
           <span>{t('switchTipStart', { ns: 'app' })}</span>
           <span className="font-medium text-text-secondary">{t('switchTip', { ns: 'app' })}</span>
           <span>{t('switchTipEnd', { ns: 'app' })}</span>
         </div>
         <div className="pb-4">
-          <div className="py-2 text-sm font-medium leading-[20px] text-text-primary">{t('switchLabel', { ns: 'app' })}</div>
+          <div className="py-2 text-sm leading-[20px] font-medium text-text-primary">{t('switchLabel', { ns: 'app' })}</div>
           <div className="flex items-center justify-between space-x-2">
             <AppIcon
               size="large"
@@ -152,7 +152,7 @@ const SwitchAppModal = ({ show, appDetail, inAppDetail = false, onSuccess, onClo
           </div>
           <div className="flex items-center">
             <Button className="mr-2" onClick={onClose}>{t('newApp.Cancel', { ns: 'app' })}</Button>
-            <Button className="border-red-700" disabled={isAppsFull || !name} variant="warning" onClick={goStart}>{t('switchStart', { ns: 'app' })}</Button>
+            <Button className="border-red-700" disabled={isAppsFull || !name} variant="primary" destructive onClick={goStart}>{t('switchStart', { ns: 'app' })}</Button>
           </div>
         </div>
       </Modal>
diff --git a/web/app/components/app/text-generate/saved-items/no-data/index.tsx b/web/app/components/app/text-generate/saved-items/no-data/index.tsx
index c6596c8ec3..cf7c9b6f89 100644
--- a/web/app/components/app/text-generate/saved-items/no-data/index.tsx
+++ b/web/app/components/app/text-generate/saved-items/no-data/index.tsx
@@ -6,7 +6,7 @@ import {
 } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 
 type INoDataProps = {
   onStartCreateContent: () => void
@@ -18,14 +18,14 @@ const NoData: FC<INoDataProps> = ({
   const { t } = useTranslation()
 
   return (
-    <div className="rounded-xl bg-background-section-burn p-6 ">
+    <div className="rounded-xl bg-background-section-burn p-6">
       <div className="flex h-10 w-10 items-center justify-center radius-lg border-[0.5px] border-components-card-border bg-components-card-bg-alt shadow-lg backdrop-blur-xs">
         <RiBookmark3Line className="h-4 w-4 text-text-accent" />
       </div>
       <div className="mt-3">
         <span className="system-xl-semibold text-text-secondary">{t('generation.savedNoData.title', { ns: 'share' })}</span>
       </div>
-      <div className="system-sm-regular mt-1 text-text-tertiary">
+      <div className="mt-1 system-sm-regular text-text-tertiary">
         {t('generation.savedNoData.description', { ns: 'share' })}
       </div>
       <Button
diff --git a/web/app/components/base/app-icon-picker/index.tsx b/web/app/components/base/app-icon-picker/index.tsx
index 83649e0a4c..7df6699f40 100644
--- a/web/app/components/base/app-icon-picker/index.tsx
+++ b/web/app/components/base/app-icon-picker/index.tsx
@@ -6,9 +6,9 @@ import { RiImageCircleAiLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { Button } from '@/app/components/base/ui/button'
 import { DISABLE_UPLOAD_IMAGE_AS_ICON } from '@/config'
 import { cn } from '@/utils/classnames'
-import Button from '../button'
 import Divider from '../divider'
 import EmojiPickerInner from '../emoji-picker/Inner'
 import { useLocalFileUploader } from '../image-uploader/hooks'
@@ -123,7 +123,7 @@ const AppIconPicker: FC<AppIconPickerProps> = ({
                 type="button"
                 key={tab.key}
                 className={cn(
-                  'system-sm-medium flex h-8 flex-1 shrink-0 items-center justify-center rounded-lg p-2 text-text-tertiary',
+                  'flex h-8 flex-1 shrink-0 items-center justify-center rounded-lg p-2 system-sm-medium text-text-tertiary',
                   activeTab === tab.key && 'bg-components-main-nav-nav-button-bg-active text-text-accent shadow-md',
                 )}
                 onClick={() => setActiveTab(tab.key as AppIconType)}
diff --git a/web/app/components/base/button/__tests__/add-button.spec.tsx b/web/app/components/base/button/__tests__/add-button.spec.tsx
deleted file mode 100644
index 1ad999ec49..0000000000
--- a/web/app/components/base/button/__tests__/add-button.spec.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import AddButton from '../add-button'
-
-describe('AddButton', () => {
-  describe('Rendering', () => {
-    it('should render without crashing', () => {
-      const { container } = render(<AddButton onClick={vi.fn()} />)
-      expect(container.firstChild).toBeInTheDocument()
-    })
-
-    it('should render an add icon', () => {
-      render(<AddButton onClick={vi.fn()} />)
-      const iconSpan = screen.getByTestId('add-button').querySelector('span')
-      expect(iconSpan).toBeInTheDocument()
-    })
-  })
-
-  describe('Props', () => {
-    it('should apply custom className', () => {
-      const { container } = render(<AddButton onClick={vi.fn()} className="my-custom" />)
-      expect(container.firstChild).toHaveClass('my-custom')
-    })
-
-    it('should retain base classes when custom className is applied', () => {
-      const { container } = render(<AddButton onClick={vi.fn()} className="my-custom" />)
-      expect(container.firstChild).toHaveClass('cursor-pointer')
-      expect(container.firstChild).toHaveClass('rounded-md')
-      expect(container.firstChild).toHaveClass('select-none')
-    })
-  })
-
-  describe('User Interactions', () => {
-    it('should call onClick when clicked', () => {
-      const onClick = vi.fn()
-      const { container } = render(<AddButton onClick={onClick} />)
-      fireEvent.click(container.firstChild!)
-      expect(onClick).toHaveBeenCalledTimes(1)
-    })
-
-    it('should call onClick multiple times on repeated clicks', () => {
-      const onClick = vi.fn()
-      const { container } = render(<AddButton onClick={onClick} />)
-      fireEvent.click(container.firstChild!)
-      fireEvent.click(container.firstChild!)
-      fireEvent.click(container.firstChild!)
-      expect(onClick).toHaveBeenCalledTimes(3)
-    })
-  })
-})
diff --git a/web/app/components/base/button/__tests__/sync-button.spec.tsx b/web/app/components/base/button/__tests__/sync-button.spec.tsx
deleted file mode 100644
index c86a3c4314..0000000000
--- a/web/app/components/base/button/__tests__/sync-button.spec.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import SyncButton from '../sync-button'
-
-describe('SyncButton', () => {
-  describe('Rendering', () => {
-    it('should render without crashing', () => {
-      const { container } = render(<SyncButton onClick={vi.fn()} />)
-      expect(container.firstChild).toBeInTheDocument()
-    })
-
-    it('should render a refresh icon', () => {
-      render(<SyncButton onClick={vi.fn()} />)
-      const iconSpan = screen.getByTestId('sync-button').querySelector('span')
-      expect(iconSpan).toBeInTheDocument()
-    })
-  })
-
-  describe('Props', () => {
-    it('should apply custom className', () => {
-      render(<SyncButton onClick={vi.fn()} className="my-custom" />)
-      const clickableDiv = screen.getByTestId('sync-button')
-      expect(clickableDiv).toHaveClass('my-custom')
-    })
-
-    it('should retain base classes when custom className is applied', () => {
-      render(<SyncButton onClick={vi.fn()} className="my-custom" />)
-      const clickableDiv = screen.getByTestId('sync-button')
-      expect(clickableDiv).toHaveClass('rounded-md')
-      expect(clickableDiv).toHaveClass('select-none')
-    })
-  })
-
-  describe('User Interactions', () => {
-    it('should call onClick when clicked', () => {
-      const onClick = vi.fn()
-      render(<SyncButton onClick={onClick} />)
-      const clickableDiv = screen.getByTestId('sync-button')
-      fireEvent.click(clickableDiv)
-      expect(onClick).toHaveBeenCalledTimes(1)
-    })
-
-    it('should call onClick multiple times on repeated clicks', () => {
-      const onClick = vi.fn()
-      render(<SyncButton onClick={onClick} />)
-      const clickableDiv = screen.getByTestId('sync-button')
-      fireEvent.click(clickableDiv)
-      fireEvent.click(clickableDiv)
-      fireEvent.click(clickableDiv)
-      expect(onClick).toHaveBeenCalledTimes(3)
-    })
-  })
-})
diff --git a/web/app/components/base/button/add-button.stories.tsx b/web/app/components/base/button/add-button.stories.tsx
deleted file mode 100644
index 9f710c29d6..0000000000
--- a/web/app/components/base/button/add-button.stories.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import AddButton from './add-button'
-
-const meta = {
-  title: 'Base/General/AddButton',
-  component: AddButton,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: 'Compact icon-only button used for inline “add” actions in lists, cards, and modals.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    className: {
-      control: 'text',
-      description: 'Extra classes appended to the clickable container.',
-    },
-    onClick: {
-      control: false,
-      description: 'Triggered when the add button is pressed.',
-    },
-  },
-  args: {
-    onClick: () => console.log('Add button clicked'),
-  },
-} satisfies Meta<typeof AddButton>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    className: 'bg-white/80 shadow-sm backdrop-blur-xs',
-  },
-}
-
-export const InToolbar: Story = {
-  render: args => (
-    <div className="flex items-center gap-2 rounded-lg border border-divider-subtle bg-components-panel-bg p-3">
-      <span className="text-xs text-text-tertiary">Attachments</span>
-      <div className="ml-auto flex items-center gap-2">
-        <AddButton {...args} />
-      </div>
-    </div>
-  ),
-  args: {
-    className: 'border border-dashed border-primary-200',
-  },
-}
diff --git a/web/app/components/base/button/add-button.tsx b/web/app/components/base/button/add-button.tsx
deleted file mode 100644
index 92f9ae6800..0000000000
--- a/web/app/components/base/button/add-button.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import * as React from 'react'
-import { cn } from '@/utils/classnames'
-
-type Props = {
-  className?: string
-  onClick: () => void
-}
-
-const AddButton: FC<Props> = ({
-  className,
-  onClick,
-}) => {
-  return (
-    <div className={cn(className, 'cursor-pointer select-none rounded-md p-1 hover:bg-state-base-hover')} onClick={onClick} data-testid="add-button">
-      <span className="i-ri-add-line h-4 w-4 text-text-tertiary" />
-    </div>
-  )
-}
-export default React.memo(AddButton)
diff --git a/web/app/components/base/button/sync-button.stories.tsx b/web/app/components/base/button/sync-button.stories.tsx
deleted file mode 100644
index 015730c963..0000000000
--- a/web/app/components/base/button/sync-button.stories.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import SyncButton from './sync-button'
-
-const meta = {
-  title: 'Base/General/SyncButton',
-  component: SyncButton,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: 'Icon-only refresh button that surfaces a tooltip and is used for manual sync actions across the UI.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    className: {
-      control: 'text',
-      description: 'Additional classes appended to the clickable container.',
-    },
-    popupContent: {
-      control: 'text',
-      description: 'Tooltip text shown on hover.',
-    },
-    onClick: {
-      control: false,
-      description: 'Triggered when the sync button is pressed.',
-    },
-  },
-  args: {
-    popupContent: 'Sync now',
-    onClick: () => console.log('Sync button clicked'),
-  },
-} satisfies Meta<typeof SyncButton>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    className: 'bg-white/80 shadow-sm backdrop-blur-xs',
-  },
-}
-
-export const InHeader: Story = {
-  render: args => (
-    <div className="flex items-center gap-2 rounded-lg border border-divider-subtle bg-components-panel-bg p-3">
-      <span className="text-xs text-text-tertiary">Logs</span>
-      <div className="ml-auto flex items-center gap-2">
-        <SyncButton {...args} />
-      </div>
-    </div>
-  ),
-  args: {
-    popupContent: 'Refresh logs',
-  },
-}
diff --git a/web/app/components/base/button/sync-button.tsx b/web/app/components/base/button/sync-button.tsx
deleted file mode 100644
index 06c155fb1d..0000000000
--- a/web/app/components/base/button/sync-button.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import * as React from 'react'
-import TooltipPlus from '@/app/components/base/tooltip'
-import { cn } from '@/utils/classnames'
-
-type Props = {
-  className?: string
-  popupContent?: string
-  onClick: () => void
-}
-
-const SyncButton: FC<Props> = ({
-  className,
-  popupContent = '',
-  onClick,
-}) => {
-  return (
-    <TooltipPlus popupContent={popupContent}>
-      <div className={cn(className, 'cursor-pointer select-none rounded-md p-1 hover:bg-state-base-hover')} onClick={onClick} data-testid="sync-button">
-        <span className="i-ri-refresh-line h-4 w-4 text-text-tertiary" />
-      </div>
-    </TooltipPlus>
-  )
-}
-export default React.memo(SyncButton)
diff --git a/web/app/components/base/chat/chat-with-history/inputs-form/index.tsx b/web/app/components/base/chat/chat-with-history/inputs-form/index.tsx
index f1a067b3ae..2da6b9f8e0 100644
--- a/web/app/components/base/chat/chat-with-history/inputs-form/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/inputs-form/index.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import InputsFormContent from '@/app/components/base/chat/chat-with-history/inputs-form/content'
 import Divider from '@/app/components/base/divider'
 import { Message3Fill } from '@/app/components/base/icons/src/public/other'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import { useChatWithHistoryContext } from '../context'
 
@@ -43,12 +43,12 @@ const InputsFormNode = ({
         )}
         >
           <Message3Fill className="h-6 w-6 shrink-0" />
-          <div className="system-xl-semibold grow text-text-secondary">{t('chat.chatSettingsTitle', { ns: 'share' })}</div>
+          <div className="grow system-xl-semibold text-text-secondary">{t('chat.chatSettingsTitle', { ns: 'share' })}</div>
           {collapsed && (
-            <Button className="uppercase text-text-tertiary" size="small" variant="ghost" onClick={() => setCollapsed(false)}>{t('operation.edit', { ns: 'common' })}</Button>
+            <Button className="text-text-tertiary uppercase" size="small" variant="ghost" onClick={() => setCollapsed(false)}>{t('operation.edit', { ns: 'common' })}</Button>
           )}
           {!collapsed && currentConversationId && (
-            <Button className="uppercase text-text-tertiary" size="small" variant="ghost" onClick={() => setCollapsed(true)}>{t('operation.close', { ns: 'common' })}</Button>
+            <Button className="text-text-tertiary uppercase" size="small" variant="ghost" onClick={() => setCollapsed(true)}>{t('operation.close', { ns: 'common' })}</Button>
           )}
         </div>
         {!collapsed && (
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/__tests__/rename-modal.spec.tsx b/web/app/components/base/chat/chat-with-history/sidebar/__tests__/rename-modal.spec.tsx
index 6ba2082c62..754d5c89b4 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/__tests__/rename-modal.spec.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/__tests__/rename-modal.spec.tsx
@@ -83,12 +83,18 @@ describe('RenameModal', () => {
 
   it('shows loading state when saveLoading is true', () => {
     render(<RenameModal {...defaultProps} saveLoading />)
-    expect(screen.getByRole('status')).toBeInTheDocument()
+    const saveButton = screen.getByRole('button', { name: 'common.operation.save' })
+    expect(saveButton).toBeDisabled()
+    expect(saveButton).toHaveAttribute('aria-busy', 'true')
+    expect(saveButton.querySelector('.animate-spin')).toBeInTheDocument()
   })
 
   it('hides loading state when saveLoading is false', () => {
     render(<RenameModal {...defaultProps} saveLoading={false} />)
-    expect(screen.queryByRole('status')).not.toBeInTheDocument()
+    const saveButton = screen.getByRole('button', { name: 'common.operation.save' })
+    expect(saveButton).not.toBeDisabled()
+    expect(saveButton).not.toHaveAttribute('aria-busy')
+    expect(saveButton.querySelector('.animate-spin')).not.toBeInTheDocument()
   })
 
   it('keeps edited name when parent rerenders with different name prop', async () => {
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/index.tsx b/web/app/components/base/chat/chat-with-history/sidebar/index.tsx
index 4102d7d591..7759b98847 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/index.tsx
@@ -11,11 +11,11 @@ import {
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import AppIcon from '@/app/components/base/app-icon'
-import Button from '@/app/components/base/button'
 import List from '@/app/components/base/chat/chat-with-history/sidebar/list'
 import RenameModal from '@/app/components/base/chat/chat-with-history/sidebar/rename-modal'
 import Confirm from '@/app/components/base/confirm'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
+import { Button } from '@/app/components/base/ui/button'
 import MenuDropdown from '@/app/components/share/text-generation/menu-dropdown'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { cn } from '@/utils/classnames'
@@ -100,7 +100,7 @@ const Sidebar = ({ isPanel, panelVisible }: Props) => {
             imageUrl={appData?.site.icon_url}
           />
         </div>
-        <div className={cn('system-md-semibold grow truncate text-text-secondary')}>{appData?.site.title}</div>
+        <div className={cn('grow truncate system-md-semibold text-text-secondary')}>{appData?.site.title}</div>
         {!isMobile && isSidebarCollapsed && (
           <ActionButton size="l" onClick={() => handleSidebarCollapse(false)}>
             <RiExpandRightLine className="h-[18px] w-[18px]" />
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/rename-modal.tsx b/web/app/components/base/chat/chat-with-history/sidebar/rename-modal.tsx
index e66ca351f2..ab5252da64 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/rename-modal.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/rename-modal.tsx
@@ -3,9 +3,9 @@ import type { FC } from 'react'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 
 type IRenameModalProps = {
   isShow: boolean
@@ -32,7 +32,7 @@ const RenameModal: FC<IRenameModalProps> = ({
       isShow={isShow}
       onClose={onClose}
     >
-      <div className="mt-6 text-sm font-medium leading-[21px] text-text-primary">{t('chat.conversationName', { ns: 'common' })}</div>
+      <div className="mt-6 text-sm leading-[21px] font-medium text-text-primary">{t('chat.conversationName', { ns: 'common' })}</div>
       <Input
         className="mt-2 h-10 w-full"
         value={tempName}
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/human-input-form.tsx b/web/app/components/base/chat/chat/answer/human-input-content/human-input-form.tsx
index 2c22fabdb5..5da8a754fa 100644
--- a/web/app/components/base/chat/chat/answer/human-input-content/human-input-form.tsx
+++ b/web/app/components/base/chat/chat/answer/human-input-content/human-input-form.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { HumanInputFormProps } from './type'
-import type { ButtonProps } from '@/app/components/base/button'
+import type { ButtonProps } from '@/app/components/base/ui/button'
 import type { UserAction } from '@/app/components/workflow/nodes/human-input/types'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import ContentItem from './content-item'
 import { getButtonStyle, initializeInputs, splitByOutputVar } from './utils'
 
diff --git a/web/app/components/base/chat/chat/chat-input-area/operation.tsx b/web/app/components/base/chat/chat/chat-input-area/operation.tsx
index 6800daedbe..2b60457c80 100644
--- a/web/app/components/base/chat/chat/chat-input-area/operation.tsx
+++ b/web/app/components/base/chat/chat/chat-input-area/operation.tsx
@@ -11,8 +11,8 @@ import {
 import { noop } from 'es-toolkit/function'
 import { memo } from 'react'
 import ActionButton from '@/app/components/base/action-button'
-import Button from '@/app/components/base/button'
 import { FileUploaderInChatInput } from '@/app/components/base/file-uploader'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 
 type OperationProps = {
diff --git a/web/app/components/base/chat/chat/index.tsx b/web/app/components/base/chat/chat/index.tsx
index f04169327f..55b6193bd1 100644
--- a/web/app/components/base/chat/chat/index.tsx
+++ b/web/app/components/base/chat/chat/index.tsx
@@ -17,7 +17,7 @@ import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useShallow } from 'zustand/react/shallow'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import Answer from './answer'
 import ChatInputArea from './chat-input-area'
diff --git a/web/app/components/base/chat/chat/question.tsx b/web/app/components/base/chat/chat/question.tsx
index ef2277d18b..67056f99dd 100644
--- a/web/app/components/base/chat/chat/question.tsx
+++ b/web/app/components/base/chat/chat/question.tsx
@@ -17,9 +17,9 @@ import Textarea from 'react-textarea-autosize'
 import { FileList } from '@/app/components/base/file-uploader'
 import { User } from '@/app/components/base/icons/src/public/avatar'
 import { Markdown } from '@/app/components/base/markdown'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import ActionButton from '../../action-button'
-import Button from '../../button'
 import { toast } from '../../ui/toast'
 import { CssTransform } from '../embedded-chatbot/theme/utils'
 import ContentSwitch from './content-switch'
@@ -207,10 +207,10 @@ const Question: FC<QuestionProps> = ({
             ? <Markdown content={content} />
             : (
                 <div className="flex flex-col gap-4">
-                  <div className="max-h-[158px] overflow-y-auto overflow-x-hidden pr-1">
+                  <div className="max-h-[158px] overflow-x-hidden overflow-y-auto pr-1">
                     <Textarea
                       className={cn(
-                        'w-full resize-none bg-transparent p-0 leading-7 text-text-primary outline-hidden body-lg-regular',
+                        'w-full resize-none bg-transparent p-0 body-lg-regular leading-7 text-text-primary outline-hidden',
                       )}
                       autoFocus
                       minRows={1}
diff --git a/web/app/components/base/chat/chat/try-to-ask.tsx b/web/app/components/base/chat/chat/try-to-ask.tsx
index d9c7b8abb0..ada816b8fa 100644
--- a/web/app/components/base/chat/chat/try-to-ask.tsx
+++ b/web/app/components/base/chat/chat/try-to-ask.tsx
@@ -2,8 +2,8 @@ import type { FC } from 'react'
 import type { OnSend } from '../types'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
+import { Button } from '@/app/components/base/ui/button'
 
 type TryToAskProps = {
   suggestedQuestions: string[]
@@ -19,7 +19,7 @@ const TryToAsk: FC<TryToAskProps> = ({
     <div className="mb-2 py-2">
       <div className="mb-2.5 flex items-center justify-between gap-2">
         <Divider bgStyle="gradient" className="h-px w-auto! grow rotate-180" />
-        <div className="system-xs-medium-uppercase shrink-0 text-text-tertiary">{t('feature.suggestedQuestionsAfterAnswer.tryToAsk', { ns: 'appDebug' })}</div>
+        <div className="shrink-0 system-xs-medium-uppercase text-text-tertiary">{t('feature.suggestedQuestionsAfterAnswer.tryToAsk', { ns: 'appDebug' })}</div>
         <Divider bgStyle="gradient" className="h-px w-auto! grow" />
       </div>
       <div className="flex flex-wrap justify-center">
@@ -29,7 +29,7 @@ const TryToAsk: FC<TryToAskProps> = ({
               size="small"
               key={index}
               variant="secondary-accent"
-              className="mb-1 mr-1 last:mr-0"
+              className="mr-1 mb-1 last:mr-0"
               onClick={() => onSend(suggestQuestion)}
             >
               {suggestQuestion}
diff --git a/web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx b/web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx
index 5f53bdec2d..430e83478e 100644
--- a/web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import InputsFormContent from '@/app/components/base/chat/embedded-chatbot/inputs-form/content'
 import Divider from '@/app/components/base/divider'
+import { Button } from '@/app/components/base/ui/button'
 import { AppSourceType } from '@/service/share'
 import { cn } from '@/utils/classnames'
 import { useEmbeddedChatbotContext } from '../context'
@@ -49,10 +49,10 @@ const InputsFormNode = ({
         )}
         >
           <div className="i-custom-public-other-message-3-fill h-6 w-6 shrink-0" />
-          <div className="grow text-text-secondary system-xl-semibold">{t('chat.chatSettingsTitle', { ns: 'share' })}</div>
+          <div className="grow system-xl-semibold text-text-secondary">{t('chat.chatSettingsTitle', { ns: 'share' })}</div>
           {collapsed && (
             <Button
-              className="uppercase text-text-tertiary"
+              className="text-text-tertiary uppercase"
               size="small"
               variant="ghost"
               onClick={() => setCollapsed(false)}
@@ -63,7 +63,7 @@ const InputsFormNode = ({
           )}
           {!collapsed && currentConversationId && (
             <Button
-              className="uppercase text-text-tertiary"
+              className="text-text-tertiary uppercase"
               size="small"
               variant="ghost"
               onClick={() => setCollapsed(true)}
diff --git a/web/app/components/base/checkbox-list/index.tsx b/web/app/components/base/checkbox-list/index.tsx
index 5fb5ca6028..61947ad769 100644
--- a/web/app/components/base/checkbox-list/index.tsx
+++ b/web/app/components/base/checkbox-list/index.tsx
@@ -5,9 +5,9 @@ import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
 import Checkbox from '@/app/components/base/checkbox'
 import SearchInput from '@/app/components/base/search-input'
+import { Button } from '@/app/components/base/ui/button'
 import SearchMenu from '@/assets/search-menu.svg'
 import { cn } from '@/utils/classnames'
-import Button from '../button'
 
 type CheckboxListOption = {
   label: string
@@ -100,12 +100,12 @@ const CheckboxList: FC<CheckboxListProps> = ({
   return (
     <div className={cn('flex w-full flex-col gap-1', containerClassName)}>
       {label && (
-        <div className="text-text-secondary system-sm-medium">
+        <div className="system-sm-medium text-text-secondary">
           {label}
         </div>
       )}
       {description && (
-        <div className="text-text-tertiary body-xs-regular">
+        <div className="body-xs-regular text-text-tertiary">
           {description}
         </div>
       )}
@@ -126,7 +126,7 @@ const CheckboxList: FC<CheckboxListProps> = ({
               ? (
                   <div className="flex min-w-0 flex-1 items-center gap-1">
                     {title && (
-                      <span className="truncate leading-5 text-text-secondary system-xs-semibold-uppercase">
+                      <span className="truncate system-xs-semibold-uppercase leading-5 text-text-secondary">
                         {title}
                       </span>
                     )}
@@ -138,7 +138,7 @@ const CheckboxList: FC<CheckboxListProps> = ({
                   </div>
                 )
               : (
-                  <div className="flex-1 leading-6 text-text-secondary system-sm-medium-uppercase">
+                  <div className="flex-1 system-sm-medium-uppercase leading-6 text-text-secondary">
                     {
                       filteredOptions.length > 0
                         ? t('operation.searchCount', { ns: 'common', count: filteredOptions.length, content: title })
@@ -169,7 +169,7 @@ const CheckboxList: FC<CheckboxListProps> = ({
                     ? (
                         <div className="flex flex-col items-center justify-center gap-2">
                           <img alt="search menu" src={SearchMenu.src} width={32} />
-                          <span className="text-text-secondary system-sm-regular">{t('operation.noSearchResults', { ns: 'common', content: title })}</span>
+                          <span className="system-sm-regular text-text-secondary">{t('operation.noSearchResults', { ns: 'common', content: title })}</span>
                           <Button variant="secondary-accent" size="small" onClick={() => setSearchQuery('')}>{t('operation.resetKeywords', { ns: 'common' })}</Button>
                         </div>
                       )
@@ -203,7 +203,7 @@ const CheckboxList: FC<CheckboxListProps> = ({
                         id={option.value}
                       />
                       <div
-                        className="flex-1 truncate text-text-secondary system-sm-medium"
+                        className="flex-1 truncate system-sm-medium text-text-secondary"
                         title={option.label}
                       >
                         {option.label}
diff --git a/web/app/components/base/confirm/index.stories.tsx b/web/app/components/base/confirm/index.stories.tsx
index 6d22bbe87b..9f2998eb55 100644
--- a/web/app/components/base/confirm/index.stories.tsx
+++ b/web/app/components/base/confirm/index.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { useState } from 'react'
+import { Button } from '@/app/components/base/ui/button'
 import Confirm from '.'
-import Button from '../button'
 
 const meta = {
   title: 'Base/Feedback/Confirm',
diff --git a/web/app/components/base/confirm/index.tsx b/web/app/components/base/confirm/index.tsx
index 6f14a3497c..f958d32b99 100644
--- a/web/app/components/base/confirm/index.tsx
+++ b/web/app/components/base/confirm/index.tsx
@@ -7,7 +7,7 @@ import * as React from 'react'
 import { useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
-import Button from '../button'
+import { Button } from '@/app/components/base/ui/button'
 import Tooltip from '../tooltip'
 
 /** @deprecated Use `@/app/components/base/ui/alert-dialog` instead. */
@@ -122,7 +122,7 @@ function Confirm({
     >
       <div ref={dialogRef} className="relative w-full max-w-[480px] overflow-hidden">
         <div className="shadows-shadow-lg flex max-w-full flex-col items-start rounded-2xl border-[0.5px] border-solid border-components-panel-border bg-components-panel-bg">
-          <div className="flex flex-col items-start gap-2 self-stretch pb-4 pl-6 pr-6 pt-6">
+          <div className="flex flex-col items-start gap-2 self-stretch pt-6 pr-6 pb-4 pl-6">
             <Tooltip
               popupContent={title}
               disabled={!isTitleTruncated}
@@ -130,19 +130,19 @@ function Confirm({
               asChild={false}
               triggerClassName="w-full"
             >
-              <div ref={titleRef} className="title-2xl-semi-bold w-full truncate text-text-primary">
+              <div ref={titleRef} className="w-full truncate title-2xl-semi-bold text-text-primary">
                 {title}
               </div>
             </Tooltip>
-            <div className="w-full whitespace-pre-wrap wrap-break-word text-text-tertiary system-md-regular">{content}</div>
+            <div className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">{content}</div>
             {confirmInputLabel && (
               <div className="mt-2">
-                <label className="mb-1 block text-text-secondary system-sm-regular">
+                <label className="mb-1 block system-sm-regular text-text-secondary">
                   {confirmInputLabel}
                 </label>
                 <input
                   type="text"
-                  className="border-components-input-border bg-components-input-bg focus:border-components-input-border-focus focus:ring-components-input-border-focus h-9 w-full rounded-lg border px-3 text-sm text-text-primary placeholder:text-text-quaternary focus:outline-hidden focus:ring-1"
+                  className="border-components-input-border bg-components-input-bg focus:border-components-input-border-focus focus:ring-components-input-border-focus h-9 w-full rounded-lg border px-3 text-sm text-text-primary placeholder:text-text-quaternary focus:ring-1 focus:outline-hidden"
                   placeholder={confirmInputPlaceholder}
                   value={confirmInputValue}
                   onChange={e => onConfirmInputChange?.(e.target.value)}
diff --git a/web/app/components/base/date-and-time-picker/date-picker/footer.tsx b/web/app/components/base/date-and-time-picker/date-picker/footer.tsx
index 4203f16372..237282c348 100644
--- a/web/app/components/base/date-and-time-picker/date-picker/footer.tsx
+++ b/web/app/components/base/date-and-time-picker/date-picker/footer.tsx
@@ -3,8 +3,8 @@ import type { DatePickerFooterProps } from '../types'
 import { RiTimeLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
-import Button from '../../button'
 import { ViewType } from '../types'
 
 const Footer: FC<DatePickerFooterProps> = ({
@@ -27,8 +27,8 @@ const Footer: FC<DatePickerFooterProps> = ({
       {needTimePicker && (
         <button
           type="button"
-          className="system-xs-medium flex items-center gap-x-px rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-1.5
-                      py-1 text-components-button-secondary-accent-text shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]"
+          className="flex items-center gap-x-px rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-1.5 py-1
+                      system-xs-medium text-components-button-secondary-accent-text shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]"
           onClick={handleClickTimePicker}
         >
           <RiTimeLine className="h-3.5 w-3.5" />
@@ -40,7 +40,7 @@ const Footer: FC<DatePickerFooterProps> = ({
         {/* Now */}
         <button
           type="button"
-          className="system-xs-medium flex items-center justify-center px-1.5 py-1 text-components-button-secondary-accent-text"
+          className="flex items-center justify-center px-1.5 py-1 system-xs-medium text-components-button-secondary-accent-text"
           onClick={handleSelectCurrentDate}
         >
           <span className="px-[3px]">{t('operation.now', { ns: 'time' })}</span>
diff --git a/web/app/components/base/date-and-time-picker/time-picker/footer.tsx b/web/app/components/base/date-and-time-picker/time-picker/footer.tsx
index 4cf311eed7..f3c0b7e9ed 100644
--- a/web/app/components/base/date-and-time-picker/time-picker/footer.tsx
+++ b/web/app/components/base/date-and-time-picker/time-picker/footer.tsx
@@ -2,7 +2,7 @@ import type { FC } from 'react'
 import type { TimePickerFooterProps } from '../types'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '../../button'
+import { Button } from '@/app/components/base/ui/button'
 
 const Footer: FC<TimePickerFooterProps> = ({
   handleSelectCurrentTime,
diff --git a/web/app/components/base/date-and-time-picker/year-and-month-picker/footer.tsx b/web/app/components/base/date-and-time-picker/year-and-month-picker/footer.tsx
index 54d9feba7f..0cbcc3b8fb 100644
--- a/web/app/components/base/date-and-time-picker/year-and-month-picker/footer.tsx
+++ b/web/app/components/base/date-and-time-picker/year-and-month-picker/footer.tsx
@@ -2,7 +2,7 @@ import type { FC } from 'react'
 import type { YearAndMonthPickerFooterProps } from '../types'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '../../button'
+import { Button } from '@/app/components/base/ui/button'
 
 const Footer: FC<YearAndMonthPickerFooterProps> = ({
   handleYearMonthCancel,
diff --git a/web/app/components/base/drawer/index.tsx b/web/app/components/base/drawer/index.tsx
index 0d040e6020..76025085aa 100644
--- a/web/app/components/base/drawer/index.tsx
+++ b/web/app/components/base/drawer/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 import { Dialog, DialogBackdrop, DialogTitle } from '@headlessui/react'
 import { useTranslation } from 'react-i18next'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
-import Button from '../button'
 
 export type IDrawerProps = {
   title?: string
@@ -73,7 +73,7 @@ export default function Drawer({
               {title && (
                 <DialogTitle
                   as="h3"
-                  className="text-lg font-medium leading-6 text-text-primary"
+                  className="text-lg leading-6 font-medium text-text-primary"
                 >
                   {title}
                 </DialogTitle>
diff --git a/web/app/components/base/emoji-picker/index.tsx b/web/app/components/base/emoji-picker/index.tsx
index 9356efbfeb..6213b61226 100644
--- a/web/app/components/base/emoji-picker/index.tsx
+++ b/web/app/components/base/emoji-picker/index.tsx
@@ -4,9 +4,9 @@ import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import EmojiPickerInner from './Inner'
 
@@ -45,7 +45,7 @@ const EmojiPicker: FC<IEmojiPickerProps> = ({
             className="pt-3"
             onSelect={handleSelectEmoji}
           />
-          <Divider className="mb-0 mt-3" />
+          <Divider className="mt-3 mb-0" />
           <div className="flex w-full items-center justify-center gap-2 p-3">
             <Button
               className="w-full"
diff --git a/web/app/components/base/error-boundary/index.tsx b/web/app/components/base/error-boundary/index.tsx
index 3e7bc03ed6..639599c6f6 100644
--- a/web/app/components/base/error-boundary/index.tsx
+++ b/web/app/components/base/error-boundary/index.tsx
@@ -4,7 +4,7 @@ import { RiAlertLine, RiBugLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { IS_DEV } from '@/config'
 import { cn } from '@/utils/classnames'
 
@@ -151,14 +151,14 @@ class ErrorBoundaryInner extends React.Component<
               <div className="rounded-lg bg-gray-100 p-4">
                 <div className="mb-2">
                   <span className="font-mono text-xs font-semibold text-gray-600">{copy.error}</span>
-                  <pre className="mt-1 overflow-auto whitespace-pre-wrap font-mono text-xs text-gray-800">
+                  <pre className="mt-1 overflow-auto font-mono text-xs whitespace-pre-wrap text-gray-800">
                     {error.toString()}
                   </pre>
                 </div>
                 {errorInfo && (
                   <div>
                     <span className="font-mono text-xs font-semibold text-gray-600">{copy.componentStack}</span>
-                    <pre className="mt-1 max-h-40 overflow-auto whitespace-pre-wrap font-mono text-xs text-gray-700">
+                    <pre className="mt-1 max-h-40 overflow-auto font-mono text-xs whitespace-pre-wrap text-gray-700">
                       {errorInfo.componentStack}
                     </pre>
                   </div>
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx
index 56e58b0319..a89a00c01a 100644
--- a/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx
@@ -4,8 +4,8 @@ import type { AnnotationReplyConfig } from '@/models/debug'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
@@ -59,7 +59,7 @@ const ConfigParamModal: FC<Props> = ({ isShow, onHide: doHide, onSave, isInit, a
   }
   return (
     <Modal isShow={isShow} onClose={onHide} className="!mt-14 !w-[640px] !max-w-none !p-6">
-      <div className="mb-2 text-text-primary title-2xl-semi-bold">
+      <div className="mb-2 title-2xl-semi-bold text-text-primary">
         {t(`initSetup.${isInit ? 'title' : 'configTitle'}`, { ns: 'appAnnotation' })}
       </div>
 
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/index.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/index.tsx
index 1ad4ef613e..e5ec955226 100644
--- a/web/app/components/base/features/new-feature-panel/annotation-reply/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/index.tsx
@@ -5,12 +5,12 @@ import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
 import ConfigParamModal from '@/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal'
 import useAnnotationConfig from '@/app/components/base/features/new-feature-panel/annotation-reply/use-annotation-config'
 import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
 import { MessageFast } from '@/app/components/base/icons/src/vender/features'
+import { Button } from '@/app/components/base/ui/button'
 import AnnotationFullModal from '@/app/components/billing/annotation-full/modal'
 import { ANNOTATION_DEFAULT } from '@/config'
 import { usePathname, useRouter } from '@/next/navigation'
@@ -92,20 +92,20 @@ const AnnotationReply = ({
       >
         <>
           {!annotationReply?.enabled && (
-            <div className="line-clamp-2 min-h-8 text-text-tertiary system-xs-regular">{t('feature.annotation.description', { ns: 'appDebug' })}</div>
+            <div className="line-clamp-2 min-h-8 system-xs-regular text-text-tertiary">{t('feature.annotation.description', { ns: 'appDebug' })}</div>
           )}
           {!!annotationReply?.enabled && (
             <>
               {!isHovering && (
                 <div className="flex items-center gap-4 pt-0.5">
                   <div className="">
-                    <div className="mb-0.5 text-text-tertiary system-2xs-medium-uppercase">{t('feature.annotation.scoreThreshold.title', { ns: 'appDebug' })}</div>
-                    <div className="text-text-secondary system-xs-regular">{annotationReply.score_threshold || '-'}</div>
+                    <div className="mb-0.5 system-2xs-medium-uppercase text-text-tertiary">{t('feature.annotation.scoreThreshold.title', { ns: 'appDebug' })}</div>
+                    <div className="system-xs-regular text-text-secondary">{annotationReply.score_threshold || '-'}</div>
                   </div>
                   <div className="h-[27px] w-px rotate-12 bg-divider-subtle"></div>
                   <div className="">
-                    <div className="mb-0.5 text-text-tertiary system-2xs-medium-uppercase">{t('modelProvider.embeddingModel.key', { ns: 'common' })}</div>
-                    <div className="text-text-secondary system-xs-regular">{annotationReply.embedding_model?.embedding_model_name}</div>
+                    <div className="mb-0.5 system-2xs-medium-uppercase text-text-tertiary">{t('modelProvider.embeddingModel.key', { ns: 'common' })}</div>
+                    <div className="system-xs-regular text-text-secondary">{annotationReply.embedding_model?.embedding_model_name}</div>
                   </div>
                 </div>
               )}
diff --git a/web/app/components/base/features/new-feature-panel/conversation-opener/index.tsx b/web/app/components/base/features/new-feature-panel/conversation-opener/index.tsx
index 36566beac8..c27f6348b2 100644
--- a/web/app/components/base/features/new-feature-panel/conversation-opener/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/conversation-opener/index.tsx
@@ -6,11 +6,11 @@ import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
 import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
 import { FeatureEnum } from '@/app/components/base/features/types'
 import { LoveMessage } from '@/app/components/base/icons/src/vender/features'
+import { Button } from '@/app/components/base/ui/button'
 import { useModalContext } from '@/context/modal-context'
 
 type Props = {
@@ -96,12 +96,12 @@ const ConversationOpener = ({
     >
       <>
         {!opening?.enabled && (
-          <div className="line-clamp-2 min-h-8 text-text-tertiary system-xs-regular">{t('feature.conversationOpener.description', { ns: 'appDebug' })}</div>
+          <div className="line-clamp-2 min-h-8 system-xs-regular text-text-tertiary">{t('feature.conversationOpener.description', { ns: 'appDebug' })}</div>
         )}
         {!!opening?.enabled && (
           <>
             {!isHovering && (
-              <div className="line-clamp-2 min-h-8 text-text-tertiary system-xs-regular">
+              <div className="line-clamp-2 min-h-8 system-xs-regular text-text-tertiary">
                 {opening.opening_statement || t('openingStatement.placeholder', { ns: 'appDebug' })}
               </div>
             )}
diff --git a/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx b/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx
index 1bb2ed1502..6c12907196 100644
--- a/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx
@@ -10,10 +10,10 @@ import { useTranslation } from 'react-i18next'
 import { ReactSortable } from 'react-sortablejs'
 import ConfirmAddVar from '@/app/components/app/configuration/config-prompt/confirm-add-var'
 import { getInputKeys } from '@/app/components/base/block-input'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import Modal from '@/app/components/base/modal'
 import PromptEditor from '@/app/components/base/prompt-editor'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import { checkKeys, getNewVar } from '@/utils/var'
 
@@ -104,7 +104,7 @@ const OpeningSettingModal = ({
     return (
       <div>
         <div className="flex items-center py-2">
-          <div className="flex shrink-0 space-x-0.5 text-xs font-medium leading-[18px] text-text-tertiary">
+          <div className="flex shrink-0 space-x-0.5 text-xs leading-[18px] font-medium text-text-tertiary">
             <div className="uppercase">{t('openingStatement.openingQuestion', { ns: 'appDebug' })}</div>
             <div>·</div>
             <div>
@@ -152,13 +152,13 @@ const OpeningSettingModal = ({
                       return item
                     }))
                   }}
-                  className="h-9 w-full grow cursor-pointer overflow-x-auto rounded-lg border-0 bg-transparent pl-1.5 pr-8 text-sm leading-9 text-text-secondary focus:outline-hidden"
+                  className="h-9 w-full grow cursor-pointer overflow-x-auto rounded-lg border-0 bg-transparent pr-8 pl-1.5 text-sm leading-9 text-text-secondary focus:outline-hidden"
                   onFocus={() => setFocusID(index)}
                   onBlur={() => setFocusID(null)}
                 />
 
                 <div
-                  className="absolute right-1.5 top-1/2 block translate-y-[-50%] cursor-pointer rounded-md p-1 text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive"
+                  className="absolute top-1/2 right-1.5 block translate-y-[-50%] cursor-pointer rounded-md p-1 text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive"
                   onClick={() => {
                     setTempSuggestedQuestions(tempSuggestedQuestions.filter((_, i) => index !== i))
                   }}
@@ -177,7 +177,7 @@ const OpeningSettingModal = ({
             className="mt-1 flex h-9 cursor-pointer items-center gap-2 rounded-lg bg-components-button-tertiary-bg px-3 text-components-button-tertiary-text hover:bg-components-button-tertiary-bg-hover"
           >
             <span className="i-ri-add-line h-4 w-4" />
-            <div className="text-[13px] system-sm-medium">{t('variableConfig.addOption', { ns: 'appDebug' })}</div>
+            <div className="system-sm-medium text-[13px]">{t('variableConfig.addOption', { ns: 'appDebug' })}</div>
           </div>
         )}
       </div>
@@ -191,7 +191,7 @@ const OpeningSettingModal = ({
       className="mt-14! w-[640px]! max-w-none! bg-components-panel-bg-blur! p-6!"
     >
       <div className="mb-6 flex items-center justify-between">
-        <div className="text-text-primary title-2xl-semi-bold">{t('feature.conversationOpener.title', { ns: 'appDebug' })}</div>
+        <div className="title-2xl-semi-bold text-text-primary">{t('feature.conversationOpener.title', { ns: 'appDebug' })}</div>
         <div
           className="cursor-pointer p-1"
           onClick={onCancel}
diff --git a/web/app/components/base/features/new-feature-panel/feature-bar.tsx b/web/app/components/base/features/new-feature-panel/feature-bar.tsx
index 4a19fe4dc6..b537002133 100644
--- a/web/app/components/base/features/new-feature-panel/feature-bar.tsx
+++ b/web/app/components/base/features/new-feature-panel/feature-bar.tsx
@@ -2,11 +2,11 @@ import { RiApps2AddLine, RiArrowRightLine, RiSparklingFill } from '@remixicon/re
 import * as React from 'react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { useFeatures } from '@/app/components/base/features/hooks'
 import VoiceSettings from '@/app/components/base/features/new-feature-panel/text-to-speech/voice-settings'
 import { Citations, ContentModeration, FolderUpload, LoveMessage, MessageFast, Microphone01, TextToAudio, VirtualAssistant } from '@/app/components/base/icons/src/vender/features'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 
 type Props = {
@@ -39,7 +39,7 @@ const FeatureBar = ({
   }, [features, isChatMode, showFileUpload])
 
   return (
-    <div className="m-1 mt-0 -translate-y-2 rounded-b-[10px] border-b border-l border-r border-components-panel-border-subtle bg-util-colors-indigo-indigo-50 px-2.5 py-2 pt-4">
+    <div className="m-1 mt-0 -translate-y-2 rounded-b-[10px] border-r border-b border-l border-components-panel-border-subtle bg-util-colors-indigo-indigo-50 px-2.5 py-2 pt-4">
       {noFeatureEnabled && (
         <div className="flex cursor-pointer items-end gap-1" onClick={() => onFeatureBarClick?.(true)}>
           <RiApps2AddLine className="h-3.5 w-3.5 text-text-accent" />
@@ -134,7 +134,7 @@ const FeatureBar = ({
               </Tooltip>
             )}
           </div>
-          <div className="body-xs-regular grow text-text-tertiary">{t('feature.bar.enableText', { ns: 'appDebug' })}</div>
+          <div className="grow body-xs-regular text-text-tertiary">{t('feature.bar.enableText', { ns: 'appDebug' })}</div>
           {
             !hideEditEntrance && (
               <Button className="shrink-0" variant="ghost-accent" size="small" onClick={() => onFeatureBarClick?.(true)}>
diff --git a/web/app/components/base/features/new-feature-panel/file-upload/index.tsx b/web/app/components/base/features/new-feature-panel/file-upload/index.tsx
index 64c03d1fe1..0b15b6ff19 100644
--- a/web/app/components/base/features/new-feature-panel/file-upload/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/file-upload/index.tsx
@@ -4,12 +4,12 @@ import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
 import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
 import SettingModal from '@/app/components/base/features/new-feature-panel/file-upload/setting-modal'
 import { FeatureEnum } from '@/app/components/base/features/types'
 import { FolderUpload } from '@/app/components/base/icons/src/vender/features'
+import { Button } from '@/app/components/base/ui/button'
 
 type Props = {
   disabled: boolean
@@ -64,19 +64,19 @@ const FileUpload = ({
     >
       <>
         {!file?.enabled && (
-          <div className="system-xs-regular line-clamp-2 min-h-8 text-text-tertiary">{t('feature.fileUpload.description', { ns: 'appDebug' })}</div>
+          <div className="line-clamp-2 min-h-8 system-xs-regular text-text-tertiary">{t('feature.fileUpload.description', { ns: 'appDebug' })}</div>
         )}
         {file?.enabled && (
           <>
             {!isHovering && !modalOpen && (
               <div className="flex items-center gap-4 pt-0.5">
                 <div className="">
-                  <div className="system-2xs-medium-uppercase mb-0.5 text-text-tertiary">{t('feature.fileUpload.supportedTypes', { ns: 'appDebug' })}</div>
+                  <div className="mb-0.5 system-2xs-medium-uppercase text-text-tertiary">{t('feature.fileUpload.supportedTypes', { ns: 'appDebug' })}</div>
                   <div className="system-xs-regular text-text-secondary">{supportedTypes}</div>
                 </div>
                 <div className="h-[27px] w-px rotate-12 bg-divider-subtle"></div>
                 <div className="">
-                  <div className="system-2xs-medium-uppercase mb-0.5 text-text-tertiary">{t('feature.fileUpload.numberLimit', { ns: 'appDebug' })}</div>
+                  <div className="mb-0.5 system-2xs-medium-uppercase text-text-tertiary">{t('feature.fileUpload.numberLimit', { ns: 'appDebug' })}</div>
                   <div className="system-xs-regular text-text-secondary">{file?.number_limits}</div>
                 </div>
               </div>
diff --git a/web/app/components/base/features/new-feature-panel/file-upload/setting-content.tsx b/web/app/components/base/features/new-feature-panel/file-upload/setting-content.tsx
index b6674abf07..23f2e2a25e 100644
--- a/web/app/components/base/features/new-feature-panel/file-upload/setting-content.tsx
+++ b/web/app/components/base/features/new-feature-panel/file-upload/setting-content.tsx
@@ -4,9 +4,9 @@ import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
 import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
+import { Button } from '@/app/components/base/ui/button'
 import FileUploadSetting from '@/app/components/workflow/nodes/_base/components/file-upload-setting'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 
@@ -57,7 +57,7 @@ const SettingContent = ({
   return (
     <>
       <div className="mb-4 flex items-center justify-between">
-        <div className="text-text-primary system-xl-semibold">{!imageUpload ? t('feature.fileUpload.modalTitle', { ns: 'appDebug' }) : t('feature.imageUpload.modalTitle', { ns: 'appDebug' })}</div>
+        <div className="system-xl-semibold text-text-primary">{!imageUpload ? t('feature.fileUpload.modalTitle', { ns: 'appDebug' }) : t('feature.imageUpload.modalTitle', { ns: 'appDebug' })}</div>
         <div
           className="cursor-pointer p-1"
           onClick={onClose}
diff --git a/web/app/components/base/features/new-feature-panel/image-upload/index.tsx b/web/app/components/base/features/new-feature-panel/image-upload/index.tsx
index 3d99820925..4fc4cc070e 100644
--- a/web/app/components/base/features/new-feature-panel/image-upload/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/image-upload/index.tsx
@@ -5,11 +5,11 @@ import * as React from 'react'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
-import Button from '@/app/components/base/button'
 import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
 import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
 import SettingModal from '@/app/components/base/features/new-feature-panel/file-upload/setting-modal'
 import { FeatureEnum } from '@/app/components/base/features/types'
+import { Button } from '@/app/components/base/ui/button'
 
 type Props = {
   disabled: boolean
@@ -72,19 +72,19 @@ const FileUpload = ({
     >
       <>
         {!file?.enabled && (
-          <div className="system-xs-regular line-clamp-2 min-h-8 text-text-tertiary">{t('feature.imageUpload.description', { ns: 'appDebug' })}</div>
+          <div className="line-clamp-2 min-h-8 system-xs-regular text-text-tertiary">{t('feature.imageUpload.description', { ns: 'appDebug' })}</div>
         )}
         {file?.enabled && (
           <>
             {!isHovering && !modalOpen && (
               <div className="flex items-center gap-4 pt-0.5">
                 <div className="">
-                  <div className="system-2xs-medium-uppercase mb-0.5 text-text-tertiary">{t('feature.imageUpload.supportedTypes', { ns: 'appDebug' })}</div>
+                  <div className="mb-0.5 system-2xs-medium-uppercase text-text-tertiary">{t('feature.imageUpload.supportedTypes', { ns: 'appDebug' })}</div>
                   <div className="system-xs-regular text-text-secondary">{supportedTypes}</div>
                 </div>
                 <div className="h-[27px] w-px rotate-12 bg-divider-subtle"></div>
                 <div className="">
-                  <div className="system-2xs-medium-uppercase mb-0.5 text-text-tertiary">{t('feature.imageUpload.numberLimit', { ns: 'appDebug' })}</div>
+                  <div className="mb-0.5 system-2xs-medium-uppercase text-text-tertiary">{t('feature.imageUpload.numberLimit', { ns: 'appDebug' })}</div>
                   <div className="system-xs-regular text-text-secondary">{file?.number_limits}</div>
                 </div>
               </div>
diff --git a/web/app/components/base/features/new-feature-panel/moderation/index.tsx b/web/app/components/base/features/new-feature-panel/moderation/index.tsx
index 5dbb1e7e2a..5e97f6d459 100644
--- a/web/app/components/base/features/new-feature-panel/moderation/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/moderation/index.tsx
@@ -3,11 +3,11 @@ import { RiEqualizer2Line } from '@remixicon/react'
 import { produce } from 'immer'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
 import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
 import { FeatureEnum } from '@/app/components/base/features/types'
 import { ContentModeration } from '@/app/components/base/icons/src/vender/features'
+import { Button } from '@/app/components/base/ui/button'
 import { useLocale } from '@/context/i18n'
 import { useModalContext } from '@/context/modal-context'
 import { useCodeBasedExtensions } from '@/service/use-common'
@@ -139,20 +139,20 @@ const Moderation = ({
     >
       <>
         {!moderation?.enabled && (
-          <div className="line-clamp-2 min-h-8 text-text-tertiary system-xs-regular">{t('feature.moderation.description', { ns: 'appDebug' })}</div>
+          <div className="line-clamp-2 min-h-8 system-xs-regular text-text-tertiary">{t('feature.moderation.description', { ns: 'appDebug' })}</div>
         )}
         {!!moderation?.enabled && (
           <>
             {!isHovering && (
               <div className="flex items-center gap-4 pt-0.5">
                 <div className="">
-                  <div className="mb-0.5 text-text-tertiary system-2xs-medium-uppercase">{t('feature.moderation.modal.provider.title', { ns: 'appDebug' })}</div>
-                  <div className="text-text-secondary system-xs-regular">{providerContent}</div>
+                  <div className="mb-0.5 system-2xs-medium-uppercase text-text-tertiary">{t('feature.moderation.modal.provider.title', { ns: 'appDebug' })}</div>
+                  <div className="system-xs-regular text-text-secondary">{providerContent}</div>
                 </div>
                 <div className="h-[27px] w-px rotate-12 bg-divider-subtle"></div>
                 <div className="">
-                  <div className="mb-0.5 text-text-tertiary system-2xs-medium-uppercase">{t('feature.moderation.contentEnableLabel', { ns: 'appDebug' })}</div>
-                  <div className="text-text-secondary system-xs-regular">{enableContent}</div>
+                  <div className="mb-0.5 system-2xs-medium-uppercase text-text-tertiary">{t('feature.moderation.contentEnableLabel', { ns: 'appDebug' })}</div>
+                  <div className="system-xs-regular text-text-secondary">{enableContent}</div>
                 </div>
               </div>
             )}
diff --git a/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx b/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx
index f128666528..8a6862eb82 100644
--- a/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx
@@ -4,9 +4,9 @@ import type { ModerationConfig, ModerationContentConfig } from '@/models/debug'
 import { noop } from 'es-toolkit/function'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import ApiBasedExtensionSelector from '@/app/components/header/account-setting/api-based-extension-page/selector'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
@@ -232,7 +232,7 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
       className="mt-14! w-[600px]! max-w-none! p-6!"
     >
       <div className="flex items-center justify-between">
-        <div className="text-text-primary title-2xl-semi-bold">{t('feature.moderation.modal.title', { ns: 'appDebug' })}</div>
+        <div className="title-2xl-semi-bold text-text-primary">{t('feature.moderation.modal.title', { ns: 'appDebug' })}</div>
         <div
           role="button"
           tabIndex={0}
@@ -249,7 +249,7 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
         </div>
       </div>
       <div className="py-2">
-        <div className="text-sm font-medium leading-9 text-text-primary">
+        <div className="text-sm leading-9 font-medium text-text-primary">
           {t('feature.moderation.modal.provider.title', { ns: 'appDebug' })}
         </div>
         <div className="grid grid-cols-3 gap-2.5">
@@ -258,9 +258,9 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
               <div
                 key={provider.key}
                 className={cn(
-                  'flex h-8 cursor-default items-center rounded-md border border-components-option-card-option-border bg-components-option-card-option-bg px-2 text-text-secondary system-sm-regular',
+                  'flex h-8 cursor-default items-center rounded-md border border-components-option-card-option-border bg-components-option-card-option-bg px-2 system-sm-regular text-text-secondary',
                   localeData.type !== provider.key && 'cursor-pointer hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
-                  localeData.type === provider.key && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs system-sm-medium',
+                  localeData.type === provider.key && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg system-sm-medium shadow-xs',
                   localeData.type === 'openai_moderation' && provider.key === 'openai_moderation' && !isOpenAIProviderConfigured && 'text-text-disabled',
                 )}
                 onClick={() => handleDataTypeChange(provider.key)}
@@ -279,7 +279,7 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
         {
           !isLoading && !isOpenAIProviderConfigured && localeData.type === 'openai_moderation' && (
             <div className="mt-2 flex items-center rounded-lg border border-[#FEF0C7] bg-[#FFFAEB] px-3 py-2">
-              <span className="i-custom-vender-line-general-info-circle mr-1 h-4 w-4 text-[#F79009]" />
+              <span className="mr-1 i-custom-vender-line-general-info-circle h-4 w-4 text-[#F79009]" />
               <div className="flex items-center text-xs font-medium text-gray-700">
                 {t('feature.moderation.modal.openaiNotConfig.before', { ns: 'appDebug' })}
                 <span
@@ -308,7 +308,7 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
                 className="block h-full w-full resize-none appearance-none bg-transparent text-sm text-text-secondary outline-hidden"
                 placeholder={t('feature.moderation.modal.keywords.placeholder', { ns: 'appDebug' }) || ''}
               />
-              <div className="absolute bottom-2 right-2 flex h-5 items-center rounded-md bg-background-section px-1 text-xs font-medium text-text-quaternary">
+              <div className="absolute right-2 bottom-2 flex h-5 items-center rounded-md bg-background-section px-1 text-xs font-medium text-text-quaternary">
                 <span>{(localeData.config?.keywords || '').split('\n').filter(Boolean).length}</span>
                 /
                 <span className="text-text-tertiary">
@@ -331,7 +331,7 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
                 rel="noopener noreferrer"
                 className="group flex items-center text-xs text-text-tertiary hover:text-primary-600"
               >
-                <span className="i-custom-vender-line-education-book-open-01 mr-1 h-3 w-3 text-text-tertiary group-hover:text-primary-600" />
+                <span className="mr-1 i-custom-vender-line-education-book-open-01 h-3 w-3 text-text-tertiary group-hover:text-primary-600" />
                 {t('apiBasedExtension.link', { ns: 'common' })}
               </a>
             </div>
@@ -368,7 +368,7 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
         info={(localeData.type === 'api' && t('feature.moderation.modal.content.fromApi', { ns: 'appDebug' })) || ''}
         showPreset={localeData.type !== 'api'}
       />
-      <div className="mb-8 mt-1 text-xs font-medium text-text-tertiary">{t('feature.moderation.modal.content.condition', { ns: 'appDebug' })}</div>
+      <div className="mt-1 mb-8 text-xs font-medium text-text-tertiary">{t('feature.moderation.modal.content.condition', { ns: 'appDebug' })}</div>
       <div className="flex items-center justify-end">
         <Button
           onClick={onCancel}
diff --git a/web/app/components/base/features/new-feature-panel/text-to-speech/index.tsx b/web/app/components/base/features/new-feature-panel/text-to-speech/index.tsx
index f72a5859f7..2268aa4d1e 100644
--- a/web/app/components/base/features/new-feature-panel/text-to-speech/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/text-to-speech/index.tsx
@@ -4,12 +4,12 @@ import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
 import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
 import VoiceSettings from '@/app/components/base/features/new-feature-panel/text-to-speech/voice-settings'
 import { FeatureEnum } from '@/app/components/base/features/types'
 import { TextToAudio } from '@/app/components/base/icons/src/vender/features'
+import { Button } from '@/app/components/base/ui/button'
 import { languages } from '@/i18n-config/language'
 import { TtsAutoPlay } from '@/types/app'
 
@@ -63,24 +63,24 @@ const TextToSpeech = ({
     >
       <>
         {!features.text2speech?.enabled && (
-          <div className="system-xs-regular line-clamp-2 min-h-8 text-text-tertiary">{t('feature.textToSpeech.description', { ns: 'appDebug' })}</div>
+          <div className="line-clamp-2 min-h-8 system-xs-regular text-text-tertiary">{t('feature.textToSpeech.description', { ns: 'appDebug' })}</div>
         )}
         {!!features.text2speech?.enabled && (
           <>
             {!isHovering && !modalOpen && (
               <div className="flex items-center gap-4 pt-0.5">
                 <div className="">
-                  <div className="system-2xs-medium-uppercase mb-0.5 text-text-tertiary">{t('voice.voiceSettings.language', { ns: 'appDebug' })}</div>
+                  <div className="mb-0.5 system-2xs-medium-uppercase text-text-tertiary">{t('voice.voiceSettings.language', { ns: 'appDebug' })}</div>
                   <div className="system-xs-regular text-text-secondary">{languageInfo?.name || '-'}</div>
                 </div>
                 <div className="h-[27px] w-px rotate-12 bg-divider-subtle"></div>
                 <div className="">
-                  <div className="system-2xs-medium-uppercase mb-0.5 text-text-tertiary">{t('voice.voiceSettings.voice', { ns: 'appDebug' })}</div>
+                  <div className="mb-0.5 system-2xs-medium-uppercase text-text-tertiary">{t('voice.voiceSettings.voice', { ns: 'appDebug' })}</div>
                   <div className="system-xs-regular text-text-secondary">{features.text2speech?.voice || t('voice.defaultDisplay', { ns: 'appDebug' })}</div>
                 </div>
                 <div className="h-[27px] w-px rotate-12 bg-divider-subtle"></div>
                 <div className="">
-                  <div className="system-2xs-medium-uppercase mb-0.5 text-text-tertiary">{t('voice.voiceSettings.autoPlay', { ns: 'appDebug' })}</div>
+                  <div className="mb-0.5 system-2xs-medium-uppercase text-text-tertiary">{t('voice.voiceSettings.autoPlay', { ns: 'appDebug' })}</div>
                   <div className="system-xs-regular text-text-secondary">{features.text2speech?.autoPlay === TtsAutoPlay.enabled ? t('voice.voiceSettings.autoPlayEnabled', { ns: 'appDebug' }) : t('voice.voiceSettings.autoPlayDisabled', { ns: 'appDebug' })}</div>
                 </div>
               </div>
diff --git a/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx b/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
index a35ade64c4..f07119311b 100644
--- a/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
+++ b/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
@@ -5,12 +5,12 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import { FILE_URL_REGEX } from '../constants'
 import FileInput from '../file-input'
@@ -74,7 +74,7 @@ const FileFromLinkOrLocal = ({
                 )}
                 >
                   <input
-                    className="mr-0.5 block grow appearance-none bg-transparent px-1 outline-hidden system-sm-regular"
+                    className="mr-0.5 block grow appearance-none bg-transparent px-1 system-sm-regular outline-hidden"
                     placeholder={fileLinkPlaceholderText}
                     value={url}
                     onChange={(e) => {
@@ -95,7 +95,7 @@ const FileFromLinkOrLocal = ({
                 </div>
                 {
                   showError && (
-                    <div className="mt-0.5 text-text-destructive body-xs-regular">
+                    <div className="mt-0.5 body-xs-regular text-text-destructive">
                       {t('fileUploader.pasteFileLinkInvalid', { ns: 'common' })}
                     </div>
                   )
@@ -105,7 +105,7 @@ const FileFromLinkOrLocal = ({
           }
           {
             showFromLink && showFromLocal && (
-              <div className="flex h-7 items-center p-2 text-text-quaternary system-2xs-medium-uppercase">
+              <div className="flex h-7 items-center p-2 system-2xs-medium-uppercase text-text-quaternary">
                 <div className="mr-2 h-px w-[93px] bg-linear-to-l from-[rgba(16,24,40,0.08)]" />
                 OR
                 <div className="ml-2 h-px w-[93px] bg-linear-to-r from-[rgba(16,24,40,0.08)]" />
diff --git a/web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx b/web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx
index 9af0fd77a8..bc41a94d86 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx
@@ -8,7 +8,7 @@ import {
   useCallback,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { TransferMethod } from '@/types/app'
 import { cn } from '@/utils/classnames'
 import FileFromLinkOrLocal from '../file-from-link-or-local'
diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-image-item.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-image-item.tsx
index 9444280bb5..6249b47e6d 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-image-item.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-image-item.tsx
@@ -4,10 +4,10 @@ import {
   RiDownloadLine,
 } from '@remixicon/react'
 import { useState } from 'react'
-import Button from '@/app/components/base/button'
 import { ReplayLine } from '@/app/components/base/icons/src/vender/other'
 import ImagePreview from '@/app/components/base/image-uploader/image-preview'
 import ProgressCircle from '@/app/components/base/progress-bar/progress-circle'
+import { Button } from '@/app/components/base/ui/button'
 import { downloadUrl } from '@/utils/download'
 import FileImageRender from '../file-image-render'
 import {
@@ -43,7 +43,7 @@ const FileImageItem = ({
         {
           showDeleteAction && (
             <Button
-              className="absolute -right-1.5 -top-1.5 z-11 hidden h-5 w-5 rounded-full p-0 group-hover/file-image:flex"
+              className="absolute -top-1.5 -right-1.5 z-11 hidden h-5 w-5 rounded-full p-0 group-hover/file-image:flex"
               onClick={() => onRemove?.(id)}
             >
               <RiCloseLine className="h-4 w-4 text-components-button-secondary-text" />
@@ -80,9 +80,9 @@ const FileImageItem = ({
         }
         {
           showDownloadAction && (
-            <div className="absolute inset-0.5 z-10 hidden bg-background-overlay-alt bg-opacity-[0.3] group-hover/file-image:block">
+            <div className="bg-opacity-[0.3] absolute inset-0.5 z-10 hidden bg-background-overlay-alt group-hover/file-image:block">
               <div
-                className="absolute bottom-0.5 right-0.5  flex h-6 w-6 items-center justify-center rounded-lg bg-components-actionbar-bg shadow-md"
+                className="absolute right-0.5 bottom-0.5 flex h-6 w-6 items-center justify-center rounded-lg bg-components-actionbar-bg shadow-md"
                 onClick={(e) => {
                   e.stopPropagation()
                   downloadUrl({ url: download_url || '', fileName: name, target: '_blank' })
diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
index ba1d645ab4..5b326e35bc 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
@@ -1,11 +1,11 @@
 import type { FileEntity } from '../types'
 import { useState } from 'react'
 import ActionButton from '@/app/components/base/action-button'
-import Button from '@/app/components/base/button'
 import AudioPreview from '@/app/components/base/file-uploader/audio-preview'
 import PdfPreview from '@/app/components/base/file-uploader/dynamic-pdf-preview'
 import VideoPreview from '@/app/components/base/file-uploader/video-preview'
 import ProgressCircle from '@/app/components/base/progress-bar/progress-circle'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import { downloadUrl } from '@/utils/download'
 import { formatFileSize } from '@/utils/format'
@@ -55,7 +55,7 @@ const FileItem = ({
         {
           showDeleteAction && (
             <Button
-              className="absolute -right-1.5 -top-1.5 z-11 hidden h-5 w-5 rounded-full p-0 group-hover/file-item:flex"
+              className="absolute -top-1.5 -right-1.5 z-11 hidden h-5 w-5 rounded-full p-0 group-hover/file-item:flex"
               onClick={() => onRemove?.(id)}
               data-testid="delete-button"
             >
@@ -64,14 +64,14 @@ const FileItem = ({
           )
         }
         <div
-          className="mb-1 line-clamp-2 h-8 cursor-pointer break-all text-text-tertiary system-xs-medium"
+          className="mb-1 line-clamp-2 h-8 cursor-pointer system-xs-medium break-all text-text-tertiary"
           title={name}
           onClick={() => canPreview && setPreviewUrl(tmp_preview_url || '')}
         >
           {name}
         </div>
         <div className="relative flex items-center justify-between">
-          <div className="flex items-center text-text-tertiary system-2xs-medium-uppercase">
+          <div className="flex items-center system-2xs-medium-uppercase text-text-tertiary">
             <FileTypeIcon
               size="sm"
               type={getFileAppearanceType(name, type)}
@@ -93,7 +93,7 @@ const FileItem = ({
             showDownloadAction && download_url && (
               <ActionButton
                 size="m"
-                className="absolute -right-1 -top-1 hidden group-hover/file-item:flex"
+                className="absolute -top-1 -right-1 hidden group-hover/file-item:flex"
                 onClick={(e) => {
                   e.stopPropagation()
                   downloadUrl({ url: download_url || '', fileName: name, target: '_blank' })
diff --git a/web/app/components/base/form/components/form/actions.tsx b/web/app/components/base/form/components/form/actions.tsx
index 380c387972..23081fdc20 100644
--- a/web/app/components/base/form/components/form/actions.tsx
+++ b/web/app/components/base/form/components/form/actions.tsx
@@ -1,8 +1,8 @@
 import type { FormType } from '../..'
 import { useStore } from '@tanstack/react-form'
 import { useTranslation } from 'react-i18next'
+import { Button } from '@/app/components/base/ui/button'
 import { useFormContext } from '../..'
-import Button from '../../../button'
 
 export type CustomActionsProps = {
   form: FormType
diff --git a/web/app/components/base/form/index.stories.tsx b/web/app/components/base/form/index.stories.tsx
index 3a6e052f0e..0cd28379de 100644
--- a/web/app/components/base/form/index.stories.tsx
+++ b/web/app/components/base/form/index.stories.tsx
@@ -4,9 +4,9 @@ import type { FormSchema } from './types'
 import { useStore } from '@tanstack/react-form'
 import { useMemo, useState } from 'react'
 import { PreviewMode } from '@/app/components/base/features/types'
+import { Button } from '@/app/components/base/ui/button'
 import { TransferMethod } from '@/types/app'
 import { FormStoryWrapper } from '../../../../.storybook/utils/form-story-wrapper'
-import Button from '../button'
 import BaseForm from './components/base/base-form'
 import ContactFields from './form-scenarios/demo/contact-fields'
 import { demoFormOpts } from './form-scenarios/demo/shared-options'
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 3b0f83f600..ec041d9506 100644
--- a/web/app/components/base/image-uploader/image-link-input.tsx
+++ b/web/app/components/base/image-uploader/image-link-input.tsx
@@ -2,7 +2,7 @@ import type { FC } from 'react'
 import type { ImageFile } from '@/types/app'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { TransferMethod } from '@/types/app'
 
 type ImageLinkInputProps = {
@@ -38,7 +38,7 @@ const ImageLinkInput: FC<ImageLinkInputProps> = ({
   }
 
   return (
-    <div className="flex h-8 items-center rounded-lg border border-components-panel-border bg-components-panel-bg pl-1.5 pr-1 shadow-xs">
+    <div className="flex h-8 items-center rounded-lg border border-components-panel-border bg-components-panel-bg pr-1 pl-1.5 shadow-xs">
       <input
         type="text"
         className="mr-0.5 h-[18px] grow appearance-none bg-transparent px-1 text-[13px] text-text-primary outline-hidden"
diff --git a/web/app/components/base/inline-delete-confirm/index.tsx b/web/app/components/base/inline-delete-confirm/index.tsx
index a0e3b8eb96..b119f4bb83 100644
--- a/web/app/components/base/inline-delete-confirm/index.tsx
+++ b/web/app/components/base/inline-delete-confirm/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 
 type InlineDeleteConfirmProps = {
@@ -36,7 +36,7 @@ const InlineDeleteConfirm: FC<InlineDeleteConfirmProps> = ({
       className={cn(
         'flex w-[120px] flex-col justify-center gap-1.5',
         'radius-lg border-[0.5px] border-components-panel-border-subtle',
-        'bg-components-panel-bg-blur px-2 pb-2 pt-1.5',
+        'bg-components-panel-bg-blur px-2 pt-1.5 pb-2',
         'backdrop-blur-[10px]',
         'shadow-lg',
         className,
diff --git a/web/app/components/base/markdown-blocks/button.tsx b/web/app/components/base/markdown-blocks/button.tsx
index 789ecd2420..72f5dbc7f8 100644
--- a/web/app/components/base/markdown-blocks/button.tsx
+++ b/web/app/components/base/markdown-blocks/button.tsx
@@ -1,5 +1,5 @@
-import Button from '@/app/components/base/button'
 import { useChatContext } from '@/app/components/base/chat/chat/context'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import { isValidUrl } from './utils'
 
@@ -14,7 +14,7 @@ const MarkdownButton = ({ node }: any) => {
     <Button
       variant={variant}
       size={size}
-      className={cn('h-auto! min-h-8 select-none whitespace-normal px-3!')}
+      className={cn('h-auto! min-h-8 px-3! whitespace-normal select-none')}
       onClick={() => {
         if (link && isValidUrl(link)) {
           window.open(link, '_blank')
diff --git a/web/app/components/base/markdown-blocks/form.tsx b/web/app/components/base/markdown-blocks/form.tsx
index 36597cd13c..7e8dcac0b2 100644
--- a/web/app/components/base/markdown-blocks/form.tsx
+++ b/web/app/components/base/markdown-blocks/form.tsx
@@ -1,8 +1,7 @@
 import type { Dayjs } from 'dayjs'
-import type { ButtonProps } from '@/app/components/base/button'
+import type { ButtonProps } from '@/app/components/base/ui/button'
 import * as React from 'react'
 import { useCallback, useMemo, useState } from 'react'
-import Button from '@/app/components/base/button'
 import { useChatContext } from '@/app/components/base/chat/chat/context'
 import Checkbox from '@/app/components/base/checkbox'
 import DatePicker from '@/app/components/base/date-and-time-picker/date-picker'
@@ -10,6 +9,7 @@ import TimePicker from '@/app/components/base/date-and-time-picker/time-picker'
 import { formatDateForOutput, toDayjs } from '@/app/components/base/date-and-time-picker/utils/dayjs'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
+import { Button } from '@/app/components/base/ui/button'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/app/components/base/ui/select'
 
 enum DATA_FORMAT {
@@ -240,7 +240,7 @@ const MarkdownForm = ({ node }: { node: HastElement }) => {
             <label
               key={key}
               htmlFor={str(child.properties.htmlFor || child.properties.name)}
-              className="my-2 text-text-secondary system-md-semibold"
+              className="my-2 system-md-semibold text-text-secondary"
               data-testid="label-field"
             >
               {getTextContent(child)}
diff --git a/web/app/components/base/modal-like-wrap/index.tsx b/web/app/components/base/modal-like-wrap/index.tsx
index 0b51ae1829..f105ac4b67 100644
--- a/web/app/components/base/modal-like-wrap/index.tsx
+++ b/web/app/components/base/modal-like-wrap/index.tsx
@@ -2,8 +2,8 @@
 import type { FC } from 'react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
-import Button from '../button'
 
 type Props = {
   title: string
@@ -27,10 +27,10 @@ const ModalLikeWrap: FC<Props> = ({
   const { t } = useTranslation()
 
   return (
-    <div className={cn('w-[320px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg px-3 pb-4 pt-3.5 shadow-xl', className)}>
+    <div className={cn('w-[320px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg px-3 pt-3.5 pb-4 shadow-xl', className)}>
       {beforeHeader || null}
       <div className="mb-1 flex h-6 items-center justify-between">
-        <div className="text-text-primary system-xl-semibold">{title}</div>
+        <div className="system-xl-semibold text-text-primary">{title}</div>
         {!hideCloseBtn && (
           <div
             className="cursor-pointer p-1.5 text-text-tertiary"
diff --git a/web/app/components/base/modal/modal.stories.tsx b/web/app/components/base/modal/modal.stories.tsx
index 2ddf706866..7093e82f2d 100644
--- a/web/app/components/base/modal/modal.stories.tsx
+++ b/web/app/components/base/modal/modal.stories.tsx
@@ -46,7 +46,7 @@ const meta = {
     },
     extraButtonVariant: {
       control: 'select',
-      options: ['primary', 'warning', 'secondary', 'secondary-accent', 'ghost', 'ghost-accent', 'tertiary'],
+      options: ['primary', 'secondary', 'secondary-accent', 'ghost', 'ghost-accent', 'tertiary'],
       description: 'Visual style for the extra button.',
     },
     disabled: {
@@ -87,7 +87,7 @@ const meta = {
     cancelButtonText: 'Cancel',
     showExtraButton: false,
     extraButtonText: 'Disable temporarily',
-    extraButtonVariant: 'warning',
+    extraButtonVariant: 'primary',
     disabled: false,
     onClose: () => console.log('Modal closed'),
     onConfirm: () => console.log('Confirm pressed'),
diff --git a/web/app/components/base/modal/modal.tsx b/web/app/components/base/modal/modal.tsx
index 71569c9771..e649ebe41e 100644
--- a/web/app/components/base/modal/modal.tsx
+++ b/web/app/components/base/modal/modal.tsx
@@ -3,15 +3,15 @@
  * This component will be removed after migration is complete.
  * See: https://github.com/langgenius/dify/issues/32767
  */
-import type { ButtonProps } from '@/app/components/base/button'
+import type { ButtonProps } from '@/app/components/base/ui/button'
 import { noop } from 'es-toolkit/function'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 
 type ModalProps = {
@@ -46,7 +46,7 @@ const Modal = ({
   cancelButtonText,
   onCancel,
   showExtraButton,
-  extraButtonVariant = 'warning',
+  extraButtonVariant = 'primary',
   extraButtonText,
   onExtraButtonClick,
   footerSlot,
@@ -73,17 +73,17 @@ const Modal = ({
           )}
           onClick={e => e.stopPropagation()}
         >
-          <div className="relative shrink-0 p-6 pb-3 pr-14 text-text-primary title-2xl-semi-bold">
+          <div className="relative shrink-0 p-6 pr-14 pb-3 title-2xl-semi-bold text-text-primary">
             {title}
             {
               subTitle && (
-                <div className="mt-1 text-text-tertiary system-xs-regular">
+                <div className="mt-1 system-xs-regular text-text-tertiary">
                   {subTitle}
                 </div>
               )
             }
             <div
-              className="absolute right-5 top-5 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
+              className="absolute top-5 right-5 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
               onClick={onClose}
             >
               <span className="i-ri-close-line h-5 w-5 text-text-tertiary" data-testid="close-icon" />
diff --git a/web/app/components/base/notion-connector/index.tsx b/web/app/components/base/notion-connector/index.tsx
index e16db60dc5..c8df7d074e 100644
--- a/web/app/components/base/notion-connector/index.tsx
+++ b/web/app/components/base/notion-connector/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '../button'
+import { Button } from '@/app/components/base/ui/button'
 import { Notion } from '../icons/src/public/common'
 import { Icon3Dots } from '../icons/src/vender/line/others'
 
@@ -16,10 +16,10 @@ const NotionConnector = ({ onSetting }: NotionConnectorProps) => {
       <div className="mb-2 h-12 w-12 radius-lg border-[0.5px] border-components-card-border p-3 shadow-lg shadow-shadow-shadow-5">
         <Notion className="size-6" />
       </div>
-      <div className="mb-1 flex flex-col gap-y-1 pb-3 pt-1">
+      <div className="mb-1 flex flex-col gap-y-1 pt-1 pb-3">
         <span className="system-md-semibold text-text-secondary">
           {t('stepOne.notionSyncTitle', { ns: 'datasetCreation' })}
-          <Icon3Dots className="relative -left-1.5 -top-2.5 inline h-4 w-4 text-text-secondary" />
+          <Icon3Dots className="relative -top-2.5 -left-1.5 inline h-4 w-4 text-text-secondary" />
         </span>
         <div className="system-sm-regular text-text-tertiary">{t('stepOne.notionSyncTip', { ns: 'datasetCreation' })}</div>
       </div>
diff --git a/web/app/components/base/pagination/index.tsx b/web/app/components/base/pagination/index.tsx
index fbcf9b6dcb..95485c4efb 100644
--- a/web/app/components/base/pagination/index.tsx
+++ b/web/app/components/base/pagination/index.tsx
@@ -3,8 +3,8 @@ import { RiArrowLeftLine, RiArrowRightLine } from '@remixicon/react'
 import { useDebounceFn } from 'ahooks'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import { Pagination } from './pagination'
 
@@ -89,7 +89,7 @@ const CustomizedPagination: FC<Props> = ({
 
   return (
     <Pagination
-      className={cn('flex w-full select-none items-center px-6 py-3', className)}
+      className={cn('flex w-full items-center px-6 py-3 select-none', className)}
       currentPage={current}
       edgePageCount={2}
       middlePagesSiblingCount={1}
@@ -151,14 +151,14 @@ const CustomizedPagination: FC<Props> = ({
       </div>
       <div className={cn('flex grow list-none items-center justify-center gap-1')}>
         <Pagination.PageButton
-          className="system-sm-medium flex min-w-8 cursor-pointer items-center justify-center rounded-lg px-1 py-2 hover:bg-components-button-ghost-bg-hover"
+          className="flex min-w-8 cursor-pointer items-center justify-center rounded-lg px-1 py-2 system-sm-medium hover:bg-components-button-ghost-bg-hover"
           activeClassName="bg-components-button-tertiary-bg text-components-button-tertiary-text hover:bg-components-button-ghost-bg-hover"
           inactiveClassName="text-text-tertiary"
         />
       </div>
       {onLimitChange && (
         <div className="flex shrink-0 items-center gap-2">
-          <div className="system-2xs-regular-uppercase w-[51px] shrink-0 text-end text-text-tertiary">{showPerPageTip ? t('pagination.perPage', { ns: 'common' }) : ''}</div>
+          <div className="w-[51px] shrink-0 text-end system-2xs-regular-uppercase text-text-tertiary">{showPerPageTip ? t('pagination.perPage', { ns: 'common' }) : ''}</div>
           <div
             className="flex items-center gap-px radius-lg bg-components-segmented-control-bg-normal p-0.5"
             onMouseEnter={() => setShowPerPageTip(true)}
@@ -166,7 +166,7 @@ const CustomizedPagination: FC<Props> = ({
           >
             <div
               className={cn(
-                'system-sm-medium cursor-pointer rounded-lg border-[0.5px] border-transparent px-2.5 py-1.5 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
+                'cursor-pointer rounded-lg border-[0.5px] border-transparent px-2.5 py-1.5 system-sm-medium text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
                 limit === 10 && 'border-components-segmented-control-item-active-border bg-components-segmented-control-item-active-bg text-text-secondary shadow-xs hover:bg-components-segmented-control-item-active-bg',
               )}
               onClick={() => onLimitChange?.(10)}
@@ -175,7 +175,7 @@ const CustomizedPagination: FC<Props> = ({
             </div>
             <div
               className={cn(
-                'system-sm-medium cursor-pointer rounded-lg border-[0.5px] border-transparent px-2.5 py-1.5 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
+                'cursor-pointer rounded-lg border-[0.5px] border-transparent px-2.5 py-1.5 system-sm-medium text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
                 limit === 25 && 'border-components-segmented-control-item-active-border bg-components-segmented-control-item-active-bg text-text-secondary shadow-xs hover:bg-components-segmented-control-item-active-bg',
               )}
               onClick={() => onLimitChange?.(25)}
@@ -184,7 +184,7 @@ const CustomizedPagination: FC<Props> = ({
             </div>
             <div
               className={cn(
-                'system-sm-medium cursor-pointer rounded-lg border-[0.5px] border-transparent px-2.5 py-1.5 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
+                'cursor-pointer rounded-lg border-[0.5px] border-transparent px-2.5 py-1.5 system-sm-medium text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
                 limit === 50 && 'border-components-segmented-control-item-active-border bg-components-segmented-control-item-active-bg text-text-secondary shadow-xs hover:bg-components-segmented-control-item-active-bg',
               )}
               onClick={() => onLimitChange?.(50)}
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx
index b9b251fbf6..8a791dc7fc 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx
@@ -5,9 +5,9 @@ import * as React from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { InputVarType } from '@/app/components/workflow/types'
 import { getKeyboardKeyNameBySystem } from '@/app/components/workflow/utils'
-import Button from '../../../button'
 import PrePopulate from './pre-populate'
 
 const i18nPrefix = 'nodes.humanInput.insertInputField'
@@ -83,11 +83,11 @@ const InputField: React.FC<InputFieldProps> = ({
 
   return (
     <div className="w-[372px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-3 shadow-lg backdrop-blur-[5px]">
-      <div className="text-text-primary system-md-semibold">{t(`${i18nPrefix}.title`, { ns: 'workflow' })}</div>
+      <div className="system-md-semibold text-text-primary">{t(`${i18nPrefix}.title`, { ns: 'workflow' })}</div>
       <div className="mt-3">
-        <div className="text-text-secondary system-xs-medium">
+        <div className="system-xs-medium text-text-secondary">
           {t(`${i18nPrefix}.saveResponseAs`, { ns: 'workflow' })}
-          <span className="relative text-text-destructive-secondary system-xs-regular">*</span>
+          <span className="relative system-xs-regular text-text-destructive-secondary">*</span>
         </div>
         <Input
           className="mt-1.5"
@@ -99,13 +99,13 @@ const InputField: React.FC<InputFieldProps> = ({
           autoFocus
         />
         {tempPayload.output_variable_name && !nameValid && (
-          <div className="mt-1 px-1 text-text-destructive-secondary system-xs-regular">
+          <div className="mt-1 px-1 system-xs-regular text-text-destructive-secondary">
             {t(`${i18nPrefix}.variableNameInvalid`, { ns: 'workflow' })}
           </div>
         )}
       </div>
       <div className="mt-4">
-        <div className="mb-1.5 text-text-secondary system-xs-medium">
+        <div className="mb-1.5 system-xs-medium text-text-secondary">
           {t(`${i18nPrefix}.prePopulateField`, { ns: 'workflow' })}
         </div>
         <PrePopulate
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 00e2d4b402..35ab6c319b 100644
--- a/web/app/components/base/tag-management/tag-remove-modal.tsx
+++ b/web/app/components/base/tag-management/tag-remove-modal.tsx
@@ -3,9 +3,9 @@
 import type { Tag } from '@/app/components/base/tag-management/constant'
 import { noop } from 'es-toolkit/function'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 
 type TagRemoveModalProps = {
@@ -24,13 +24,13 @@ const TagRemoveModal = ({ show, tag, onConfirm, onClose }: TagRemoveModalProps)
       isShow={show}
       onClose={noop}
     >
-      <div className="absolute right-4 top-4 cursor-pointer p-2" onClick={onClose} data-testid="tag-remove-modal-close-button">
+      <div className="absolute top-4 right-4 cursor-pointer p-2" onClick={onClose} data-testid="tag-remove-modal-close-button">
         <span className="i-ri-close-line h-4 w-4 text-text-tertiary" />
       </div>
       <div className="h-12 w-12 rounded-xl border-[0.5px] border-divider-regular bg-background-default-burn p-3 shadow-xl">
         <AlertTriangle className="h-6 w-6 text-[rgb(247,144,9)]" />
       </div>
-      <div className="mt-3 text-xl font-semibold leading-[30px] text-text-primary">
+      <div className="mt-3 text-xl leading-[30px] font-semibold text-text-primary">
         {`${t('tag.delete', { ns: 'common' })} `}
         <span>{`"${tag.name}"`}</span>
       </div>
@@ -39,7 +39,7 @@ const TagRemoveModal = ({ show, tag, onConfirm, onClose }: TagRemoveModalProps)
       </div>
       <div className="flex items-center justify-end pt-6">
         <Button className="mr-2" onClick={onClose}>{t('operation.cancel', { ns: 'common' })}</Button>
-        <Button className="border-red-700" variant="warning" onClick={onConfirm}>{t('operation.delete', { ns: 'common' })}</Button>
+        <Button className="border-red-700" variant="primary" destructive onClick={onConfirm}>{t('operation.delete', { ns: 'common' })}</Button>
       </div>
     </Modal>
   )
diff --git a/web/app/components/base/ui/alert-dialog/index.tsx b/web/app/components/base/ui/alert-dialog/index.tsx
index df4cef8964..05d9ab3ad9 100644
--- a/web/app/components/base/ui/alert-dialog/index.tsx
+++ b/web/app/components/base/ui/alert-dialog/index.tsx
@@ -1,9 +1,9 @@
 'use client'
 
-import type { ButtonProps } from '@/app/components/base/button'
+import type { ButtonProps } from '@/app/components/base/ui/button'
 import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'
 import * as React from 'react'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 
 export const AlertDialog = BaseAlertDialog.Root
@@ -32,7 +32,7 @@ export function AlertDialogContent({
       <BaseAlertDialog.Backdrop
         {...backdropProps}
         className={cn(
-          'inset-0 fixed z-1002 bg-background-overlay',
+          'fixed inset-0 z-1002 bg-background-overlay',
           'transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none',
           overlayClassName,
         )}
diff --git a/web/app/components/base/button/__tests__/index.spec.tsx b/web/app/components/base/ui/button/__tests__/index.spec.tsx
similarity index 93%
rename from web/app/components/base/button/__tests__/index.spec.tsx
rename to web/app/components/base/ui/button/__tests__/index.spec.tsx
index 4fe0ab3570..fa59281484 100644
--- a/web/app/components/base/button/__tests__/index.spec.tsx
+++ b/web/app/components/base/ui/button/__tests__/index.spec.tsx
@@ -1,5 +1,5 @@
 import { cleanup, fireEvent, render, screen } from '@testing-library/react'
-import Button from '../index'
+import { Button } from '../index'
 
 afterEach(cleanup)
 
@@ -41,7 +41,6 @@ describe('Button', () => {
 
     it.each([
       'primary',
-      'warning',
       'secondary',
       'secondary-accent',
       'ghost',
@@ -95,12 +94,6 @@ describe('Button', () => {
       render(<Button>Click me</Button>)
       expect(screen.getByRole('button')).not.toHaveAttribute('aria-busy')
     })
-
-    it('applies custom spinnerClassName', () => {
-      const animClassName = 'anim-breath'
-      render(<Button loading spinnerClassName={animClassName}>Click me</Button>)
-      expect(screen.getByRole('button').querySelector('.animate-spin')?.className).toContain(animClassName)
-    })
   })
 
   describe('disabled', () => {
diff --git a/web/app/components/base/button/index.css b/web/app/components/base/ui/button/index.css
similarity index 66%
rename from web/app/components/base/button/index.css
rename to web/app/components/base/ui/button/index.css
index 0f4063fdfa..30140c212d 100644
--- a/web/app/components/base/button/index.css
+++ b/web/app/components/base/ui/button/index.css
@@ -27,26 +27,74 @@
     hover:border-components-button-primary-border-hover
     text-components-button-primary-text;
 
-  &.btn-destructive {
-    @apply bg-components-button-destructive-primary-bg
-    border-components-button-destructive-primary-border
-    hover:bg-components-button-destructive-primary-bg-hover
-    hover:border-components-button-destructive-primary-border-hover
-    text-components-button-destructive-primary-text;
-  }
-
   &:is(:disabled, [data-disabled]) {
     @apply shadow-none
     bg-components-button-primary-bg-disabled
     border-components-button-primary-border-disabled
     text-components-button-primary-text-disabled;
   }
+}
 
-  &.btn-destructive:is(:disabled, [data-disabled]) {
-    @apply shadow-none
-    bg-components-button-destructive-primary-bg-disabled
-    border-components-button-destructive-primary-border-disabled
-    text-components-button-destructive-primary-text-disabled;
+@utility btn-secondary {
+  @apply border-[0.5px]
+    shadow-xs
+    backdrop-blur-[5px]
+    bg-components-button-secondary-bg
+    border-components-button-secondary-border
+    hover:bg-components-button-secondary-bg-hover
+    hover:border-components-button-secondary-border-hover
+    text-components-button-secondary-text;
+
+  &:is(:disabled, [data-disabled]) {
+    @apply backdrop-blur-xs
+    bg-components-button-secondary-bg-disabled
+    border-components-button-secondary-border-disabled
+    text-components-button-secondary-text-disabled;
+  }
+}
+
+@utility btn-secondary-accent {
+  @apply border-[0.5px]
+    shadow-xs
+    bg-components-button-secondary-bg
+    border-components-button-secondary-border
+    hover:bg-components-button-secondary-bg-hover
+    hover:border-components-button-secondary-border-hover
+    text-components-button-secondary-accent-text;
+
+  &:is(:disabled, [data-disabled]) {
+    @apply bg-components-button-secondary-bg-disabled
+    border-components-button-secondary-border-disabled
+    text-components-button-secondary-accent-text-disabled;
+  }
+}
+
+@utility btn-tertiary {
+  @apply bg-components-button-tertiary-bg
+    hover:bg-components-button-tertiary-bg-hover
+    text-components-button-tertiary-text;
+
+  &:is(:disabled, [data-disabled]) {
+    @apply bg-components-button-tertiary-bg-disabled
+    text-components-button-tertiary-text-disabled;
+  }
+}
+
+@utility btn-ghost {
+  @apply hover:bg-components-button-ghost-bg-hover
+    text-components-button-ghost-text;
+
+  &:is(:disabled, [data-disabled]) {
+    @apply text-components-button-ghost-text-disabled;
+  }
+}
+
+@utility btn-ghost-accent {
+  @apply hover:bg-state-accent-hover
+    text-components-button-secondary-accent-text;
+
+  &:is(:disabled, [data-disabled]) {
+    @apply text-components-button-secondary-accent-text-disabled;
   }
 }
 
@@ -100,114 +148,3 @@
     @apply text-components-button-destructive-ghost-text-disabled;
   }
 }
-
-@utility btn-secondary {
-  @apply border-[0.5px]
-    shadow-xs
-    backdrop-blur-[5px]
-    bg-components-button-secondary-bg
-    border-components-button-secondary-border
-    hover:bg-components-button-secondary-bg-hover
-    hover:border-components-button-secondary-border-hover
-    text-components-button-secondary-text;
-
-  &:is(:disabled, [data-disabled]) {
-    @apply backdrop-blur-xs
-    bg-components-button-secondary-bg-disabled
-    border-components-button-secondary-border-disabled
-    text-components-button-secondary-text-disabled;
-  }
-
-  &.btn-destructive {
-    @apply bg-components-button-destructive-secondary-bg
-    border-components-button-destructive-secondary-border
-    hover:bg-components-button-destructive-secondary-bg-hover
-    hover:border-components-button-destructive-secondary-border-hover
-    text-components-button-destructive-secondary-text;
-  }
-
-  &.btn-destructive:is(:disabled, [data-disabled]) {
-    @apply bg-components-button-destructive-secondary-bg-disabled
-    border-components-button-destructive-secondary-border-disabled
-    text-components-button-destructive-secondary-text-disabled;
-  }
-}
-
-@utility btn-secondary-accent {
-  @apply border-[0.5px]
-    shadow-xs
-    bg-components-button-secondary-bg
-    border-components-button-secondary-border
-    hover:bg-components-button-secondary-bg-hover
-    hover:border-components-button-secondary-border-hover
-    text-components-button-secondary-accent-text;
-
-  &:is(:disabled, [data-disabled]) {
-    @apply bg-components-button-secondary-bg-disabled
-    border-components-button-secondary-border-disabled
-    text-components-button-secondary-accent-text-disabled;
-  }
-}
-
-@utility btn-warning {
-  @apply bg-components-button-destructive-primary-bg
-    border-components-button-destructive-primary-border
-    hover:bg-components-button-destructive-primary-bg-hover
-    hover:border-components-button-destructive-primary-border-hover
-    text-components-button-destructive-primary-text;
-
-  &:is(:disabled, [data-disabled]) {
-    @apply bg-components-button-destructive-primary-bg-disabled
-    border-components-button-destructive-primary-border-disabled
-    text-components-button-destructive-primary-text-disabled;
-  }
-}
-
-@utility btn-tertiary {
-  @apply bg-components-button-tertiary-bg
-    hover:bg-components-button-tertiary-bg-hover
-    text-components-button-tertiary-text;
-
-  &:is(:disabled, [data-disabled]) {
-    @apply bg-components-button-tertiary-bg-disabled
-    text-components-button-tertiary-text-disabled;
-  }
-
-  &.btn-destructive {
-    @apply bg-components-button-destructive-tertiary-bg
-    hover:bg-components-button-destructive-tertiary-bg-hover
-    text-components-button-destructive-tertiary-text;
-  }
-
-  &.btn-destructive:is(:disabled, [data-disabled]) {
-    @apply bg-components-button-destructive-tertiary-bg-disabled
-    text-components-button-destructive-tertiary-text-disabled;
-  }
-}
-
-@utility btn-ghost {
-  @apply hover:bg-components-button-ghost-bg-hover
-    text-components-button-ghost-text;
-
-  &:is(:disabled, [data-disabled]) {
-    @apply text-components-button-ghost-text-disabled;
-  }
-
-  &.btn-destructive {
-    @apply hover:bg-components-button-destructive-ghost-bg-hover
-    text-components-button-destructive-ghost-text;
-  }
-
-  &.btn-destructive:is(:disabled, [data-disabled]) {
-    @apply text-components-button-destructive-ghost-text-disabled;
-  }
-}
-
-@utility btn-ghost-accent {
-  @apply hover:bg-state-accent-hover
-    text-components-button-secondary-accent-text;
-
-  &:is(:disabled, [data-disabled]) {
-    @apply text-components-button-secondary-accent-text-disabled;
-  }
-}
diff --git a/web/app/components/base/button/index.stories.tsx b/web/app/components/base/ui/button/index.stories.tsx
similarity index 88%
rename from web/app/components/base/button/index.stories.tsx
rename to web/app/components/base/ui/button/index.stories.tsx
index 5a7ec55e8f..8921dc9b27 100644
--- a/web/app/components/base/button/index.stories.tsx
+++ b/web/app/components/base/ui/button/index.stories.tsx
@@ -15,7 +15,7 @@ const meta = {
     disabled: { control: 'boolean' },
     variant: {
       control: 'select',
-      options: ['primary', 'warning', 'secondary', 'secondary-accent', 'ghost', 'ghost-accent', 'tertiary'],
+      options: ['primary', 'secondary', 'secondary-accent', 'ghost', 'ghost-accent', 'tertiary'],
     },
     size: {
       control: 'select',
@@ -73,13 +73,6 @@ export const Tertiary: Story = {
   },
 }
 
-export const Warning: Story = {
-  args: {
-    variant: 'warning',
-    children: 'Warning Button',
-  },
-}
-
 export const Disabled: Story = {
   args: {
     variant: 'primary',
@@ -109,7 +102,7 @@ export const WithIcon: Story = {
     variant: 'primary',
     children: (
       <>
-        <span className="i-heroicons-rocket-launch-20-solid mr-1.5 h-4 w-4" />
+        <span className="mr-1.5 i-heroicons-rocket-launch-20-solid h-4 w-4" />
         Launch
       </>
     ),
diff --git a/web/app/components/base/button/index.tsx b/web/app/components/base/ui/button/index.tsx
similarity index 57%
rename from web/app/components/base/button/index.tsx
rename to web/app/components/base/ui/button/index.tsx
index 6fc5e982c2..22dc6ce3c8 100644
--- a/web/app/components/base/button/index.tsx
+++ b/web/app/components/base/ui/button/index.tsx
@@ -1,9 +1,8 @@
+import type { Button as BaseButtonNS } from '@base-ui/react/button'
 import type { VariantProps } from 'class-variance-authority'
 import { Button as BaseButton } from '@base-ui/react/button'
 import { cva } from 'class-variance-authority'
-import * as React from 'react'
 import { cn } from '@/utils/classnames'
-import Spinner from '../spinner'
 
 const buttonVariants = cva(
   'btn',
@@ -11,7 +10,6 @@ const buttonVariants = cva(
     variants: {
       variant: {
         'primary': 'btn-primary',
-        'warning': 'btn-warning',
         'secondary': 'btn-secondary',
         'secondary-accent': 'btn-secondary-accent',
         'ghost': 'btn-ghost',
@@ -34,48 +32,39 @@ const buttonVariants = cva(
   },
 )
 
-export type ButtonProps = {
-  loading?: boolean
-  spinnerClassName?: string
-  ref?: React.Ref<HTMLButtonElement>
-  render?: React.ReactElement
-  focusableWhenDisabled?: boolean
-} & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants>
+export type ButtonProps
+  = Omit<BaseButtonNS.Props, 'className'>
+    & VariantProps<typeof buttonVariants> & {
+      loading?: boolean
+      className?: string
+    }
 
-const Button = ({
+export function Button({
   className,
   variant,
   size,
   destructive,
   loading,
-  children,
-  spinnerClassName,
-  ref,
-  render,
-  focusableWhenDisabled,
   disabled,
   type = 'button',
+  children,
   ...props
-}: ButtonProps) => {
-  const isDisabled = disabled || loading
-
+}: ButtonProps) {
   return (
     <BaseButton
       type={type}
       className={cn(buttonVariants({ variant, size, destructive, className }))}
-      ref={ref}
-      render={render}
-      {...props}
-      disabled={isDisabled}
-      focusableWhenDisabled={focusableWhenDisabled}
+      disabled={disabled || loading}
       aria-busy={loading || undefined}
+      {...props}
     >
       {children}
-      {loading && <Spinner loading={loading} className={cn('ml-1! h-3! w-3! border-2! text-white!', spinnerClassName)} />}
+      {loading && (
+        <i
+          className="ml-1 i-ri-loader-2-line size-3 animate-spin motion-reduce:animate-none"
+          aria-hidden="true"
+        />
+      )}
     </BaseButton>
   )
 }
-Button.displayName = 'Button'
-
-export default Button
-export { Button, buttonVariants }
diff --git a/web/app/components/billing/apps-full-in-dialog/index.tsx b/web/app/components/billing/apps-full-in-dialog/index.tsx
index d7e9aedeae..2c2d5b95fd 100644
--- a/web/app/components/billing/apps-full-in-dialog/index.tsx
+++ b/web/app/components/billing/apps-full-in-dialog/index.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import ProgressBar from '@/app/components/billing/progress-bar'
 import { Plan } from '@/app/components/billing/type'
 import { mailToSupport } from '@/app/components/header/utils/util'
@@ -44,7 +44,7 @@ const AppsFull: FC<{ loc: string, className?: string }> = ({
       <div className="flex justify-between">
         {!isTeam && (
           <div>
-            <div className={cn('title-xl-semi-bold mb-1', s.textGradient)}>
+            <div className={cn('mb-1 title-xl-semi-bold', s.textGradient)}>
               {t('apps.fullTip1', { ns: 'billing' })}
             </div>
             <div className="system-xs-regular text-text-tertiary">{t('apps.fullTip1des', { ns: 'billing' })}</div>
@@ -52,7 +52,7 @@ const AppsFull: FC<{ loc: string, className?: string }> = ({
         )}
         {isTeam && (
           <div>
-            <div className={cn('title-xl-semi-bold mb-1', s.textGradient)}>
+            <div className={cn('mb-1 title-xl-semi-bold', s.textGradient)}>
               {t('apps.fullTip2', { ns: 'billing' })}
             </div>
             <div className="system-xs-regular text-text-tertiary">{t('apps.fullTip2des', { ns: 'billing' })}</div>
@@ -70,7 +70,7 @@ const AppsFull: FC<{ loc: string, className?: string }> = ({
         )}
       </div>
       <div className="flex flex-col gap-2">
-        <div className="system-xs-medium flex items-center justify-between text-text-secondary">
+        <div className="flex items-center justify-between system-xs-medium text-text-secondary">
           <div>{t('usagePage.buildApps', { ns: 'billing' })}</div>
           <div>
             {usage}
diff --git a/web/app/components/billing/plan-upgrade-modal/index.tsx b/web/app/components/billing/plan-upgrade-modal/index.tsx
index 1e8b1235b7..f4f35ec1a4 100644
--- a/web/app/components/billing/plan-upgrade-modal/index.tsx
+++ b/web/app/components/billing/plan-upgrade-modal/index.tsx
@@ -3,8 +3,8 @@ import type { FC } from 'react'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import UpgradeBtn from '@/app/components/billing/upgrade-btn'
 import { useModalContext } from '@/context/modal-context'
 import { SquareChecklist } from '../../base/icons/src/vender/other'
@@ -69,7 +69,7 @@ const PlanUpgradeModal: FC<Props> = ({
         </div>
       </div>
 
-      <div className="mb-8 mt-10 flex justify-end space-x-2 px-8">
+      <div className="mt-10 mb-8 flex justify-end space-x-2 px-8">
         <Button
           onClick={onClose}
         >
diff --git a/web/app/components/billing/plan/index.tsx b/web/app/components/billing/plan/index.tsx
index b420110a4d..ee21268078 100644
--- a/web/app/components/billing/plan/index.tsx
+++ b/web/app/components/billing/plan/index.tsx
@@ -10,8 +10,8 @@ import { useUnmountedRef } from 'ahooks'
 import * as React from 'react'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { ApiAggregate, TriggerAll } from '@/app/components/base/icons/src/vender/workflow'
+import { Button } from '@/app/components/base/ui/button'
 import UsageInfo from '@/app/components/billing/usage-info'
 import { EDUCATION_VERIFYING_LOCALSTORAGE_ITEM } from '@/app/education-apply/constants'
 import VerifyStateModal from '@/app/education-apply/verify-state-modal'
diff --git a/web/app/components/billing/pricing/header.tsx b/web/app/components/billing/pricing/header.tsx
index 5ab1895667..46078ae95e 100644
--- a/web/app/components/billing/pricing/header.tsx
+++ b/web/app/components/billing/pricing/header.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import { Button } from '@/app/components/base/ui/button'
 import { DialogDescription, DialogTitle } from '@/app/components/base/ui/dialog'
 import { cn } from '@/utils/classnames'
-import Button from '../../base/button'
 import DifyLogo from '../../base/logo/dify-logo'
 import styles from './header.module.css'
 
@@ -31,12 +31,12 @@ const Header = ({
             {t('plansCommon.title.plans', { ns: 'billing' })}
           </DialogTitle>
         </div>
-        <DialogDescription className="text-text-tertiary system-sm-regular">
+        <DialogDescription className="system-sm-regular text-text-tertiary">
           {t('plansCommon.title.description', { ns: 'billing' })}
         </DialogDescription>
         <Button
           variant="secondary"
-          className="absolute bottom-[40.5px] right-[-18px] z-10 size-9 rounded-full p-2"
+          className="absolute right-[-18px] bottom-[40.5px] z-10 size-9 rounded-full p-2"
           aria-label={t('operation.close', { ns: 'common' })}
           onClick={onClose}
         >
diff --git a/web/app/components/billing/upgrade-btn/index.tsx b/web/app/components/billing/upgrade-btn/index.tsx
index f031acf04d..510ab4c18f 100644
--- a/web/app/components/billing/upgrade-btn/index.tsx
+++ b/web/app/components/billing/upgrade-btn/index.tsx
@@ -3,8 +3,8 @@ import type { CSSProperties, FC } from 'react'
 import type { I18nKeysWithPrefix } from '@/types/i18n'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { SparklesSoft } from '@/app/components/base/icons/src/public/common'
+import { Button } from '@/app/components/base/ui/button'
 import { useModalContext } from '@/context/modal-context'
 import PremiumBadge from '../../base/premium-badge'
 
diff --git a/web/app/components/custom/custom-web-app-brand/components/chat-preview-card.tsx b/web/app/components/custom/custom-web-app-brand/components/chat-preview-card.tsx
index b54b800049..491e57563d 100644
--- a/web/app/components/custom/custom-web-app-brand/components/chat-preview-card.tsx
+++ b/web/app/components/custom/custom-web-app-brand/components/chat-preview-card.tsx
@@ -1,4 +1,4 @@
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import PoweredByBrand from './powered-by-brand'
 
@@ -22,14 +22,14 @@ const ChatPreviewCard = ({
           <div className={cn('inline-flex h-8 w-8 items-center justify-center rounded-lg border border-divider-regular', 'bg-components-icon-bg-blue-light-solid')}>
             <span className="i-custom-vender-solid-communication-bubble-text-mod h-4 w-4 text-components-avatar-shape-fill-stop-100" />
           </div>
-          <div className="grow text-text-secondary system-md-semibold">Chatflow App</div>
+          <div className="grow system-md-semibold text-text-secondary">Chatflow App</div>
           <div className="p-1.5">
             <span className="i-ri-layout-left-2-line h-4 w-4 text-text-tertiary" />
           </div>
         </div>
         <div className="shrink-0 px-4 py-3">
           <Button variant="secondary-accent" className="w-full justify-center">
-            <span className="i-ri-edit-box-line mr-1 h-4 w-4" />
+            <span className="mr-1 i-ri-edit-box-line h-4 w-4" />
             <div className="p-1 opacity-20">
               <div className="h-2 w-[94px] rounded-xs bg-text-accent-light-mode-only"></div>
             </div>
@@ -61,14 +61,14 @@ const ChatPreviewCard = ({
         </div>
       </div>
       <div className="flex w-[138px] grow flex-col justify-between p-2 pr-0">
-        <div className="flex grow flex-col justify-between rounded-l-2xl border-[0.5px] border-r-0 border-components-panel-border-subtle bg-chatbot-bg pb-4 pl-[22px] pt-16">
+        <div className="flex grow flex-col justify-between rounded-l-2xl border-[0.5px] border-r-0 border-components-panel-border-subtle bg-chatbot-bg pt-16 pb-4 pl-[22px]">
           <div className="w-[720px] rounded-2xl border border-divider-subtle bg-chat-bubble-bg px-4 py-3">
-            <div className="mb-1 text-text-primary body-md-regular">Hello! How can I assist you today?</div>
+            <div className="mb-1 body-md-regular text-text-primary">Hello! How can I assist you today?</div>
             <Button size="small">
               <div className="h-2 w-[144px] rounded-xs bg-text-quaternary opacity-20"></div>
             </Button>
           </div>
-          <div className="flex h-[52px] w-[578px] items-center rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur pl-3.5 text-text-placeholder shadow-md backdrop-blur-xs body-lg-regular">Talk to Dify</div>
+          <div className="flex h-[52px] w-[578px] items-center rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur pl-3.5 body-lg-regular text-text-placeholder shadow-md backdrop-blur-xs">Talk to Dify</div>
         </div>
       </div>
     </div>
diff --git a/web/app/components/custom/custom-web-app-brand/components/workflow-preview-card.tsx b/web/app/components/custom/custom-web-app-brand/components/workflow-preview-card.tsx
index 573c2e9c1c..3d2eccab60 100644
--- a/web/app/components/custom/custom-web-app-brand/components/workflow-preview-card.tsx
+++ b/web/app/components/custom/custom-web-app-brand/components/workflow-preview-card.tsx
@@ -1,4 +1,4 @@
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import PoweredByBrand from './powered-by-brand'
 
@@ -22,14 +22,14 @@ const WorkflowPreviewCard = ({
           <div className={cn('inline-flex h-8 w-8 items-center justify-center rounded-lg border border-divider-regular', 'bg-components-icon-bg-indigo-solid')}>
             <span className="i-ri-exchange-2-fill h-4 w-4 text-components-avatar-shape-fill-stop-100" />
           </div>
-          <div className="grow text-text-secondary system-md-semibold">Workflow App</div>
+          <div className="grow system-md-semibold text-text-secondary">Workflow App</div>
           <div className="p-1.5">
             <span className="i-ri-layout-left-2-line h-4 w-4 text-text-tertiary" />
           </div>
         </div>
         <div className="flex items-center gap-4">
-          <div className="flex h-10 shrink-0 items-center border-b-2 border-components-tab-active text-text-primary system-md-semibold-uppercase">RUN ONCE</div>
-          <div className="flex h-10 grow items-center border-b-2 border-transparent text-text-tertiary system-md-semibold-uppercase">RUN BATCH</div>
+          <div className="flex h-10 shrink-0 items-center border-b-2 border-components-tab-active system-md-semibold-uppercase text-text-primary">RUN ONCE</div>
+          <div className="flex h-10 grow items-center border-b-2 border-transparent system-md-semibold-uppercase text-text-tertiary">RUN BATCH</div>
         </div>
       </div>
       <div className="grow bg-components-panel-bg">
@@ -44,7 +44,7 @@ const WorkflowPreviewCard = ({
             <div className="h-2 w-10 rounded-xs bg-text-quaternary opacity-20"></div>
           </Button>
           <Button variant="primary" size="small" disabled>
-            <span className="i-ri-play-large-line mr-1 h-4 w-4" />
+            <span className="mr-1 i-ri-play-large-line h-4 w-4" />
             <span>Execute</span>
           </Button>
         </div>
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 0df5e043e9..0972066b00 100644
--- a/web/app/components/custom/custom-web-app-brand/index.tsx
+++ b/web/app/components/custom/custom-web-app-brand/index.tsx
@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import Switch from '@/app/components/base/switch'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import ChatPreviewCard from './components/chat-preview-card'
 import WorkflowPreviewCard from './components/workflow-preview-card'
@@ -31,7 +31,7 @@ const CustomWebAppBrand = () => {
 
   return (
     <div className="py-4">
-      <div className="mb-2 flex items-center justify-between rounded-xl bg-background-section-burn p-4 text-text-primary system-md-medium">
+      <div className="mb-2 flex items-center justify-between rounded-xl bg-background-section-burn p-4 system-md-medium text-text-primary">
         {t('webapp.removeBrand', { ns: 'custom' })}
         <Switch
           size="lg"
@@ -42,8 +42,8 @@ const CustomWebAppBrand = () => {
       </div>
       <div className={cn('flex h-14 items-center justify-between rounded-xl bg-background-section-burn px-4', webappBrandRemoved && 'opacity-30')}>
         <div>
-          <div className="text-text-primary system-md-medium">{t('webapp.changeLogo', { ns: 'custom' })}</div>
-          <div className="text-text-tertiary system-xs-regular">{t('webapp.changeLogoTip', { ns: 'custom' })}</div>
+          <div className="system-md-medium text-text-primary">{t('webapp.changeLogo', { ns: 'custom' })}</div>
+          <div className="system-xs-regular text-text-tertiary">{t('webapp.changeLogoTip', { ns: 'custom' })}</div>
         </div>
         <div className="flex items-center">
           {(!uploadDisabled && webappLogo && !webappBrandRemoved) && (
@@ -64,7 +64,7 @@ const CustomWebAppBrand = () => {
                 className="relative mr-2"
                 disabled={uploadDisabled}
               >
-                <span className="i-ri-image-add-line mr-1 h-4 w-4" />
+                <span className="mr-1 i-ri-image-add-line h-4 w-4" />
                 {
                   (webappLogo || fileId)
                     ? t('change', { ns: 'custom' })
@@ -87,7 +87,7 @@ const CustomWebAppBrand = () => {
                 className="relative mr-2"
                 disabled={true}
               >
-                <span className="i-ri-loader-2-line mr-1 h-4 w-4 animate-spin" />
+                <span className="mr-1 i-ri-loader-2-line h-4 w-4 animate-spin" />
                 {t('uploading', { ns: 'custom' })}
               </Button>
             )
@@ -118,8 +118,8 @@ const CustomWebAppBrand = () => {
       {uploadProgress === -1 && (
         <div className="mt-2 text-xs text-[#D92D20]">{t('uploadedFail', { ns: 'custom' })}</div>
       )}
-      <div className="mb-2 mt-5 flex items-center gap-2">
-        <div className="shrink-0 text-text-tertiary system-xs-medium-uppercase">{t('overview.appInfo.preview', { ns: 'appOverview' })}</div>
+      <div className="mt-5 mb-2 flex items-center gap-2">
+        <div className="shrink-0 system-xs-medium-uppercase text-text-tertiary">{t('overview.appInfo.preview', { ns: 'appOverview' })}</div>
         <Divider bgStyle="gradient" className="grow" />
       </div>
       <div className="relative mb-2 flex items-center gap-3">
diff --git a/web/app/components/datasets/common/image-previewer/index.tsx b/web/app/components/datasets/common/image-previewer/index.tsx
index 1164b4023a..64af3f80df 100644
--- a/web/app/components/datasets/common/image-previewer/index.tsx
+++ b/web/app/components/datasets/common/image-previewer/index.tsx
@@ -2,8 +2,8 @@ import { RiArrowLeftLine, RiArrowRightLine, RiCloseLine, RiRefreshLine } from '@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { useHotkeys } from 'react-hotkeys-hook'
-import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
+import { Button } from '@/app/components/base/ui/button'
 import { formatFileSize } from '@/utils/format'
 
 type CachedImage = {
@@ -155,7 +155,7 @@ const ImagePreviewer = ({
       onClick={e => e.stopPropagation()}
       tabIndex={-1}
     >
-      <div className="absolute right-6 top-6 z-10 flex cursor-pointer flex-col items-center gap-y-1">
+      <div className="absolute top-6 right-6 z-10 flex cursor-pointer flex-col items-center gap-y-1">
         <Button
           variant="tertiary"
           onClick={onClose}
@@ -172,7 +172,7 @@ const ImagePreviewer = ({
         <Loading type="app" />
       )}
       {cachedImages[currentImage.url].status === 'error' && (
-        <div className="system-sm-regular flex max-w-sm flex-col items-center gap-y-2 text-text-tertiary">
+        <div className="flex max-w-sm flex-col items-center gap-y-2 system-sm-regular text-text-tertiary">
           <span>{`Failed to load image: ${currentImage.url}. Please try again.`}</span>
           <Button
             variant="secondary"
@@ -191,7 +191,7 @@ const ImagePreviewer = ({
             src={cachedImages[currentImage.url].blobUrl}
             className="max-h-[calc(100%-2.5rem)] max-w-full object-contain shadow-lg ring-8 ring-effects-image-frame backdrop-blur-[5px]"
           />
-          <div className="system-sm-regular flex shrink-0 gap-x-2 pb-1 pt-3 text-text-tertiary">
+          <div className="flex shrink-0 gap-x-2 pt-3 pb-1 system-sm-regular text-text-tertiary">
             <span>{currentImage.name}</span>
             <span>·</span>
             <span>{`${cachedImages[currentImage.url].width} ×  ${cachedImages[currentImage.url].height}`}</span>
@@ -203,7 +203,7 @@ const ImagePreviewer = ({
       <Button
         variant="secondary"
         onClick={prevImage}
-        className="absolute left-8 top-1/2 z-10 size-9 -translate-y-1/2 rounded-full p-0"
+        className="absolute top-1/2 left-8 z-10 size-9 -translate-y-1/2 rounded-full p-0"
         disabled={currentIndex === 0}
         size="large"
       >
@@ -212,7 +212,7 @@ const ImagePreviewer = ({
       <Button
         variant="secondary"
         onClick={nextImage}
-        className="absolute right-8 top-1/2 z-10 size-9 -translate-y-1/2 rounded-full p-0"
+        className="absolute top-1/2 right-8 z-10 size-9 -translate-y-1/2 rounded-full p-0"
         disabled={currentIndex === images.length - 1}
         size="large"
       >
diff --git a/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/image-item.tsx b/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/image-item.tsx
index aee19907be..e02c29399e 100644
--- a/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/image-item.tsx
+++ b/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/image-item.tsx
@@ -6,10 +6,10 @@ import {
   memo,
   useCallback,
 } from 'react'
-import Button from '@/app/components/base/button'
 import FileImageRender from '@/app/components/base/file-uploader/file-image-render'
 import { ReplayLine } from '@/app/components/base/icons/src/vender/other'
 import ProgressCircle from '@/app/components/base/progress-bar/progress-circle'
+import { Button } from '@/app/components/base/ui/button'
 import { fileIsUploaded } from '../utils'
 
 type ImageItemProps = {
@@ -54,7 +54,7 @@ const ImageItem = ({
       {
         showDeleteAction && (
           <Button
-            className="absolute -right-1.5 -top-1.5 z-11 hidden h-5 w-5 rounded-full p-0 group-hover/file-image:flex"
+            className="absolute -top-1.5 -right-1.5 z-11 hidden h-5 w-5 rounded-full p-0 group-hover/file-image:flex"
             onClick={handleRemove}
           >
             <RiCloseLine className="h-4 w-4 text-components-button-secondary-text" />
diff --git a/web/app/components/datasets/common/image-uploader/image-uploader-in-retrieval-testing/image-item.tsx b/web/app/components/datasets/common/image-uploader/image-uploader-in-retrieval-testing/image-item.tsx
index 2d3965690f..9e5c044e77 100644
--- a/web/app/components/datasets/common/image-uploader/image-uploader-in-retrieval-testing/image-item.tsx
+++ b/web/app/components/datasets/common/image-uploader/image-uploader-in-retrieval-testing/image-item.tsx
@@ -6,10 +6,10 @@ import {
   memo,
   useCallback,
 } from 'react'
-import Button from '@/app/components/base/button'
 import FileImageRender from '@/app/components/base/file-uploader/file-image-render'
 import { ReplayLine } from '@/app/components/base/icons/src/vender/other'
 import ProgressCircle from '@/app/components/base/progress-bar/progress-circle'
+import { Button } from '@/app/components/base/ui/button'
 import { fileIsUploaded } from '../utils'
 
 type ImageItemProps = {
@@ -54,7 +54,7 @@ const ImageItem = ({
       {
         showDeleteAction && (
           <Button
-            className="absolute -right-1.5 -top-1.5 z-11 hidden h-5 w-5 rounded-full p-0 group-hover/file-image:flex"
+            className="absolute -top-1.5 -right-1.5 z-11 hidden h-5 w-5 rounded-full p-0 group-hover/file-image:flex"
             onClick={handleRemove}
           >
             <RiCloseLine className="h-4 w-4 text-components-button-secondary-text" />
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/dsl-confirm-modal.tsx b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/dsl-confirm-modal.tsx
index db675228c4..71a6757bf2 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/dsl-confirm-modal.tsx
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/dsl-confirm-modal.tsx
@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 
 type DSLConfirmModalProps = {
   versions?: {
@@ -27,7 +27,7 @@ const DSLConfirmModal = ({
     >
       <div className="flex flex-col items-start gap-2 self-stretch pb-4">
         <div className="title-2xl-semi-bold text-text-primary">{t('newApp.appCreateDSLErrorTitle', { ns: 'app' })}</div>
-        <div className="system-md-regular flex grow flex-col text-text-secondary">
+        <div className="flex grow flex-col system-md-regular text-text-secondary">
           <div>{t('newApp.appCreateDSLErrorPart1', { ns: 'app' })}</div>
           <div>{t('newApp.appCreateDSLErrorPart2', { ns: 'app' })}</div>
           <br />
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/index.tsx b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/index.tsx
index 079ea90687..ab311bd699 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/index.tsx
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/index.tsx
@@ -2,9 +2,9 @@
 import { useKeyPress } from 'ahooks'
 import { noop } from 'es-toolkit/function'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import DSLConfirmModal from './dsl-confirm-modal'
 import Header from './header'
 import { CreateFromDSLModalTab, useDSLImport } from './hooks/use-dsl-import'
@@ -78,7 +78,7 @@ const CreateFromDSLModal = ({
           )}
           {currentTab === CreateFromDSLModalTab.FROM_URL && (
             <div>
-              <div className="system-md-semibold leading6 mb-1 text-text-secondary">
+              <div className="leading6 mb-1 system-md-semibold text-text-secondary">
                 DSL URL
               </div>
               <Input
diff --git a/web/app/components/datasets/create-from-pipeline/header.tsx b/web/app/components/datasets/create-from-pipeline/header.tsx
index 204b372a1d..bc34c79d38 100644
--- a/web/app/components/datasets/create-from-pipeline/header.tsx
+++ b/web/app/components/datasets/create-from-pipeline/header.tsx
@@ -1,14 +1,14 @@
 import { RiArrowLeftLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import { Button } from '@/app/components/base/ui/button'
 import Link from '@/next/link'
-import Button from '../../base/button'
 
 const Header = () => {
   const { t } = useTranslation()
 
   return (
-    <div className="system-md-semibold relative flex px-16 pb-2 pt-5 text-text-primary">
+    <div className="relative flex px-16 pt-5 pb-2 system-md-semibold text-text-primary">
       <span>{t('creation.backToKnowledge', { ns: 'datasetPipeline' })}</span>
       <Link
         className="absolute bottom-0 left-5"
@@ -19,7 +19,7 @@ const Header = () => {
           variant="secondary-accent"
           className="size-9 rounded-full p-0"
         >
-          <RiArrowLeftLine className="size-5 " />
+          <RiArrowLeftLine className="size-5" />
         </Button>
       </Link>
     </div>
diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/actions.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/actions.tsx
index 718cb982b1..c2e9a6ba5a 100644
--- a/web/app/components/datasets/create-from-pipeline/list/template-card/actions.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/actions.tsx
@@ -1,8 +1,8 @@
 import { RiAddLine, RiArrowRightUpLine, RiMoreFill } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import CustomPopover from '@/app/components/base/popover'
+import { Button } from '@/app/components/base/ui/button'
 import Operations from './operations'
 
 type ActionsProps = {
diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/details/index.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/details/index.tsx
index 2093de7af4..aa3b4b7b5b 100644
--- a/web/app/components/datasets/create-from-pipeline/list/template-card/details/index.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/details/index.tsx
@@ -4,9 +4,9 @@ import * as React from 'react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
-import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import WorkflowPreview from '@/app/components/workflow/workflow-preview'
 import { usePipelineTemplateById } from '@/service/use-pipeline'
 import ChunkStructureCard from './chunk-structure-card'
@@ -59,12 +59,12 @@ const Details = ({
       <div className="relative flex w-[360px] shrink-0 flex-col">
         <button
           type="button"
-          className="absolute right-4 top-4 z-10 flex size-8 items-center justify-center"
+          className="absolute top-4 right-4 z-10 flex size-8 items-center justify-center"
           onClick={onClose}
         >
           <RiCloseLine className="size-4 text-text-tertiary" />
         </button>
-        <div className="flex items-start gap-x-3 pb-2 pl-4 pr-12 pt-6">
+        <div className="flex items-start gap-x-3 pt-6 pr-12 pb-2 pl-4">
           <AppIcon
             size="large"
             iconType={appIcon.type as AppIconType}
@@ -75,14 +75,14 @@ const Details = ({
           />
           <div className="flex grow flex-col gap-y-1 overflow-hidden py-px">
             <div
-              className="system-md-semibold truncate text-text-secondary"
+              className="truncate system-md-semibold text-text-secondary"
               title={pipelineTemplateInfo.name}
             >
               {pipelineTemplateInfo.name}
             </div>
             {pipelineTemplateInfo.created_by && (
               <div
-                className="system-2xs-medium-uppercase truncate text-text-tertiary"
+                className="truncate system-2xs-medium-uppercase text-text-tertiary"
                 title={pipelineTemplateInfo.created_by}
               >
                 {t('details.createdBy', {
@@ -93,7 +93,7 @@ const Details = ({
             )}
           </div>
         </div>
-        <p className="system-sm-regular px-4 pb-2 pt-1 text-text-secondary">
+        <p className="px-4 pt-1 pb-2 system-sm-regular text-text-secondary">
           {pipelineTemplateInfo.description}
         </p>
         <div className="p-3">
diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/edit-pipeline-info.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/edit-pipeline-info.tsx
index ae34015559..73f7123146 100644
--- a/web/app/components/datasets/create-from-pipeline/list/template-card/edit-pipeline-info.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/edit-pipeline-info.tsx
@@ -6,9 +6,9 @@ import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
 import AppIconPicker from '@/app/components/base/app-icon-picker'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useInvalidCustomizedTemplateList, useUpdateTemplateInfo } from '@/service/use-pipeline'
 
@@ -92,14 +92,14 @@ const EditPipelineInfo = ({
   return (
     <div className="relative flex flex-col">
       {/* Header */}
-      <div className="pb-3 pl-6 pr-14 pt-6">
+      <div className="pt-6 pr-14 pb-3 pl-6">
         <span className="title-2xl-semi-bold text-text-primary">
           {t('editPipelineInfo', { ns: 'datasetPipeline' })}
         </span>
       </div>
       <button
         type="button"
-        className="absolute right-5 top-5 flex size-8 items-center justify-center"
+        className="absolute top-5 right-5 flex size-8 items-center justify-center"
         onClick={onClose}
       >
         <RiCloseLine className="size-5 text-text-tertiary" />
@@ -108,7 +108,7 @@ const EditPipelineInfo = ({
       <div className="flex flex-col gap-y-5 px-6 py-3">
         <div className="flex items-end gap-x-3 self-stretch">
           <div className="flex grow flex-col gap-y-1 pb-1">
-            <label className="system-sm-medium flex h-6 items-center text-text-secondary">
+            <label className="flex h-6 items-center system-sm-medium text-text-secondary">
               {t('pipelineNameAndIcon', { ns: 'datasetPipeline' })}
             </label>
             <Input
@@ -129,7 +129,7 @@ const EditPipelineInfo = ({
           />
         </div>
         <div className="flex flex-col gap-y-1">
-          <label className="system-sm-medium flex h-6 items-center text-text-secondary">
+          <label className="flex h-6 items-center system-sm-medium text-text-secondary">
             {t('knowledgeDescription', { ns: 'datasetPipeline' })}
           </label>
           <Textarea
diff --git a/web/app/components/datasets/create/embedding-process/index.tsx b/web/app/components/datasets/create/embedding-process/index.tsx
index 812eb2e51c..93840efc9e 100644
--- a/web/app/components/datasets/create/embedding-process/index.tsx
+++ b/web/app/components/datasets/create/embedding-process/index.tsx
@@ -8,8 +8,8 @@ import {
 } from '@remixicon/react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
+import { Button } from '@/app/components/base/ui/button'
 import { Plan } from '@/app/components/billing/type'
 import { useProviderContext } from '@/context/provider-context'
 import { useDatasetApiAccessUrl } from '@/hooks/use-api-access-url'
@@ -39,7 +39,7 @@ const StatusHeader: FC<{ isEmbedding: boolean, isCompleted: boolean }> = ({
   const { t } = useTranslation()
 
   return (
-    <div className="system-md-semibold-uppercase flex items-center gap-x-1 text-text-secondary">
+    <div className="flex items-center gap-x-1 system-md-semibold-uppercase text-text-secondary">
       {isEmbedding && (
         <>
           <RiLoader2Fill className="size-4 animate-spin" />
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 09f1701b43..2f42b8acdf 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
@@ -3,9 +3,9 @@ import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { trackEvent } from '@/app/components/base/amplitude'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useRouter } from '@/next/navigation'
 import { createEmptyDataset } from '@/service/datasets'
diff --git a/web/app/components/datasets/create/step-one/components/next-step-button.tsx b/web/app/components/datasets/create/step-one/components/next-step-button.tsx
index 71e4e87fcf..9a343ae745 100644
--- a/web/app/components/datasets/create/step-one/components/next-step-button.tsx
+++ b/web/app/components/datasets/create/step-one/components/next-step-button.tsx
@@ -2,7 +2,7 @@
 
 import { RiArrowRightLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 
 type NextStepButtonProps = {
   disabled: boolean
diff --git a/web/app/components/datasets/create/step-two/components/general-chunking-options.tsx b/web/app/components/datasets/create/step-two/components/general-chunking-options.tsx
index 650fd3ebfb..c3e506fc02 100644
--- a/web/app/components/datasets/create/step-two/components/general-chunking-options.tsx
+++ b/web/app/components/datasets/create/step-two/components/general-chunking-options.tsx
@@ -7,10 +7,10 @@ import {
   RiSearchEyeLine,
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Checkbox from '@/app/components/base/checkbox'
 import Divider from '@/app/components/base/divider'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import SummaryIndexSetting from '@/app/components/datasets/settings/summary-index-setting'
 import { IS_CE_EDITION } from '@/config'
 import { ChunkingMode } from '@/models/datasets'
@@ -25,7 +25,7 @@ type TextLabelProps = {
 }
 
 const TextLabel: FC<TextLabelProps> = ({ children }) => {
-  return <label className="text-text-secondary system-sm-semibold">{children}</label>
+  return <label className="system-sm-semibold text-text-secondary">{children}</label>
 }
 
 type GeneralChunkingOptionsProps = {
@@ -147,7 +147,7 @@ export const GeneralChunkingOptions: FC<GeneralChunkingOptionsProps> = ({
                 onClick={() => onRuleToggle(rule.id)}
               >
                 <Checkbox checked={rule.enabled} />
-                <label className="ml-2 cursor-pointer text-text-secondary system-sm-regular">
+                <label className="ml-2 cursor-pointer system-sm-regular text-text-secondary">
                   {getRuleName(rule.id)}
                 </label>
               </div>
@@ -182,7 +182,7 @@ export const GeneralChunkingOptions: FC<GeneralChunkingOptionsProps> = ({
                       checked={currentDocForm === ChunkingMode.qa}
                       disabled={hasCurrentDatasetDocForm}
                     />
-                    <label className="ml-2 cursor-pointer text-text-secondary system-sm-regular">
+                    <label className="ml-2 cursor-pointer system-sm-regular text-text-secondary">
                       {t('stepTwo.useQALanguage', { ns: 'datasetCreation' })}
                     </label>
                   </div>
@@ -201,7 +201,7 @@ export const GeneralChunkingOptions: FC<GeneralChunkingOptionsProps> = ({
                     className="mt-2 flex h-10 items-center gap-2 rounded-xl border border-components-panel-border px-3 text-xs shadow-xs backdrop-blur-[5px]"
                   >
                     <RiAlertFill className="size-4 text-text-warning-secondary" />
-                    <span className="text-text-primary system-xs-medium">
+                    <span className="system-xs-medium text-text-primary">
                       {t('stepTwo.QATip', { ns: 'datasetCreation' })}
                     </span>
                   </div>
diff --git a/web/app/components/datasets/create/step-two/components/indexing-mode-section.tsx b/web/app/components/datasets/create/step-two/components/indexing-mode-section.tsx
index 8b49a00500..7048b0d460 100644
--- a/web/app/components/datasets/create/step-two/components/indexing-mode-section.tsx
+++ b/web/app/components/datasets/create/step-two/components/indexing-mode-section.tsx
@@ -5,11 +5,11 @@ import type { DefaultModel, Model } from '@/app/components/header/account-settin
 import type { RetrievalConfig } from '@/types/app'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
-import Button from '@/app/components/base/button'
 import CustomDialog from '@/app/components/base/dialog'
 import Divider from '@/app/components/base/divider'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import EconomicalRetrievalMethodConfig from '@/app/components/datasets/common/economical-retrieval-method-config'
 import RetrievalMethodConfig from '@/app/components/datasets/common/retrieval-method-config'
 import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
@@ -69,7 +69,7 @@ export const IndexingModeSection: FC<IndexingModeSectionProps> = ({
   return (
     <>
       {/* Index Mode */}
-      <div className="mb-1 text-text-secondary system-md-semibold">
+      <div className="mb-1 system-md-semibold text-text-secondary">
         {t('stepTwo.indexMode', { ns: 'datasetCreation' })}
       </div>
       <div className="flex items-center gap-2">
@@ -155,11 +155,11 @@ export const IndexingModeSection: FC<IndexingModeSectionProps> = ({
       {/* High quality tip */}
       {!hasSetIndexType && indexType === IndexingType.QUALIFIED && (
         <div className="mt-2 flex h-10 items-center gap-x-0.5 overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-2 shadow-xs backdrop-blur-[5px]">
-          <div className="absolute bottom-0 left-0 right-0 top-0 bg-dataset-warning-message-bg opacity-40"></div>
+          <div className="absolute top-0 right-0 bottom-0 left-0 bg-dataset-warning-message-bg opacity-40"></div>
           <div className="p-1">
             <AlertTriangle className="size-4 text-text-warning-secondary" />
           </div>
-          <span className="text-text-primary system-xs-medium">
+          <span className="system-xs-medium text-text-primary">
             {t('stepTwo.highQualityTip', { ns: 'datasetCreation' })}
           </span>
         </div>
@@ -167,7 +167,7 @@ export const IndexingModeSection: FC<IndexingModeSectionProps> = ({
 
       {/* Economical index setting tip */}
       {hasSetIndexType && indexType === IndexingType.ECONOMICAL && (
-        <div className="mt-2 text-text-tertiary system-xs-medium">
+        <div className="mt-2 system-xs-medium text-text-tertiary">
           {t('stepTwo.indexSettingTip', { ns: 'datasetCreation' })}
           <Link className="text-text-accent" href={`/datasets/${datasetId}/settings`}>
             {t('stepTwo.datasetSettingLink', { ns: 'datasetCreation' })}
@@ -178,7 +178,7 @@ export const IndexingModeSection: FC<IndexingModeSectionProps> = ({
       {/* Embedding model */}
       {indexType === IndexingType.QUALIFIED && (
         <div className="mt-5">
-          <div className={cn('mb-1 text-text-secondary system-md-semibold', datasetId && 'flex items-center justify-between')}>
+          <div className={cn('mb-1 system-md-semibold text-text-secondary', datasetId && 'flex items-center justify-between')}>
             {t('form.embeddingModel', { ns: 'datasetSettings' })}
           </div>
           <ModelSelector
@@ -189,7 +189,7 @@ export const IndexingModeSection: FC<IndexingModeSectionProps> = ({
             onSelect={onEmbeddingModelChange}
           />
           {isModelAndRetrievalConfigDisabled && (
-            <div className="mt-2 text-text-tertiary system-xs-medium">
+            <div className="mt-2 system-xs-medium text-text-tertiary">
               {t('stepTwo.indexSettingTip', { ns: 'datasetCreation' })}
               <Link className="text-text-accent" href={`/datasets/${datasetId}/settings`}>
                 {t('stepTwo.datasetSettingLink', { ns: 'datasetCreation' })}
@@ -206,10 +206,10 @@ export const IndexingModeSection: FC<IndexingModeSectionProps> = ({
         {!isModelAndRetrievalConfigDisabled
           ? (
               <div className="mb-1">
-                <div className="mb-0.5 text-text-secondary system-md-semibold">
+                <div className="mb-0.5 system-md-semibold text-text-secondary">
                   {t('form.retrievalSetting.title', { ns: 'datasetSettings' })}
                 </div>
-                <div className="text-text-tertiary body-xs-regular">
+                <div className="body-xs-regular text-text-tertiary">
                   <a
                     target="_blank"
                     rel="noopener noreferrer"
@@ -223,7 +223,7 @@ export const IndexingModeSection: FC<IndexingModeSectionProps> = ({
               </div>
             )
           : (
-              <div className={cn('mb-0.5 text-text-secondary system-md-semibold', 'flex items-center justify-between')}>
+              <div className={cn('mb-0.5 system-md-semibold text-text-secondary', 'flex items-center justify-between')}>
                 <div>{t('form.retrievalSetting.title', { ns: 'datasetSettings' })}</div>
               </div>
             )}
diff --git a/web/app/components/datasets/create/step-two/components/parent-child-options.tsx b/web/app/components/datasets/create/step-two/components/parent-child-options.tsx
index eb542fd3d5..e00a9b2880 100644
--- a/web/app/components/datasets/create/step-two/components/parent-child-options.tsx
+++ b/web/app/components/datasets/create/step-two/components/parent-child-options.tsx
@@ -5,11 +5,11 @@ import type { ParentChildConfig } from '../hooks'
 import type { ParentMode, PreProcessingRule, SummaryIndexSetting as SummaryIndexSettingType } from '@/models/datasets'
 import { RiSearchEyeLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Checkbox from '@/app/components/base/checkbox'
 import Divider from '@/app/components/base/divider'
 import { ParentChildChunk } from '@/app/components/base/icons/src/vender/knowledge'
 import RadioCard from '@/app/components/base/radio-card'
+import { Button } from '@/app/components/base/ui/button'
 import SummaryIndexSetting from '@/app/components/datasets/settings/summary-index-setting'
 import { IS_CE_EDITION } from '@/config'
 import { ChunkingMode } from '@/models/datasets'
@@ -25,7 +25,7 @@ type TextLabelProps = {
 }
 
 const TextLabel: FC<TextLabelProps> = ({ children }) => {
-  return <label className="text-text-secondary system-sm-semibold">{children}</label>
+  return <label className="system-sm-semibold text-text-secondary">{children}</label>
 }
 
 type ParentChildOptionsProps = {
@@ -185,7 +185,7 @@ export const ParentChildOptions: FC<ParentChildOptionsProps> = ({
                 onClick={() => onRuleToggle(rule.id)}
               >
                 <Checkbox checked={rule.enabled} />
-                <label className="ml-2 cursor-pointer text-text-secondary system-sm-regular">
+                <label className="ml-2 cursor-pointer system-sm-regular text-text-secondary">
                   {getRuleName(rule.id)}
                 </label>
               </div>
diff --git a/web/app/components/datasets/create/step-two/components/step-two-footer.tsx b/web/app/components/datasets/create/step-two/components/step-two-footer.tsx
index a22be64a75..37f15ecd9f 100644
--- a/web/app/components/datasets/create/step-two/components/step-two-footer.tsx
+++ b/web/app/components/datasets/create/step-two/components/step-two-footer.tsx
@@ -3,7 +3,7 @@
 import type { FC } from 'react'
 import { RiArrowLeftLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 
 type StepTwoFooterProps = {
   isSetting?: boolean
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 1d53fbbc3b..6de5e5413f 100644
--- a/web/app/components/datasets/create/stop-embedding-modal/index.tsx
+++ b/web/app/components/datasets/create/stop-embedding-modal/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import s from './index.module.css'
 
diff --git a/web/app/components/datasets/create/website/base/__tests__/url-input.spec.tsx b/web/app/components/datasets/create/website/base/__tests__/url-input.spec.tsx
index 5301d55307..749d111045 100644
--- a/web/app/components/datasets/create/website/base/__tests__/url-input.spec.tsx
+++ b/web/app/components/datasets/create/website/base/__tests__/url-input.spec.tsx
@@ -50,15 +50,18 @@ describe('UrlInput', () => {
 
     it('should show loading state on button when running', () => {
       render(<UrlInput isRunning={true} onRun={mockOnRun} />)
-      // Button should show loading text when running
       const button = screen.getByRole('button')
-      expect(button).toHaveTextContent(/loading/i)
+      expect(button).toBeDisabled()
+      expect(button).toHaveAttribute('aria-busy', 'true')
+      expect(button.querySelector('.animate-spin')).toBeInTheDocument()
     })
 
     it('should not show loading state on button when not running', () => {
       render(<UrlInput isRunning={false} onRun={mockOnRun} />)
       const button = screen.getByRole('button')
-      expect(button).not.toHaveTextContent(/loading/i)
+      expect(button).not.toBeDisabled()
+      expect(button).not.toHaveAttribute('aria-busy')
+      expect(button.querySelector('.animate-spin')).not.toBeInTheDocument()
     })
   })
 
diff --git a/web/app/components/datasets/create/website/base/crawled-result-item.tsx b/web/app/components/datasets/create/website/base/crawled-result-item.tsx
index ed83441b15..7c635de380 100644
--- a/web/app/components/datasets/create/website/base/crawled-result-item.tsx
+++ b/web/app/components/datasets/create/website/base/crawled-result-item.tsx
@@ -4,8 +4,8 @@ import type { CrawlResultItem as CrawlResultItemType } from '@/models/datasets'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Checkbox from '@/app/components/base/checkbox'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 
 type Props = {
@@ -52,7 +52,7 @@ const CrawledResultItem: FC<Props> = ({
         </div>
         <Button
           onClick={onPreview}
-          className="right-0 top-0 hidden h-6 px-1.5 text-xs font-medium uppercase group-hover:absolute group-hover:block"
+          className="top-0 right-0 hidden h-6 px-1.5 text-xs font-medium uppercase group-hover:absolute group-hover:block"
         >
           {t('stepOne.website.preview', { ns: 'datasetCreation' })}
         </Button>
diff --git a/web/app/components/datasets/create/website/base/header.tsx b/web/app/components/datasets/create/website/base/header.tsx
index cf4d537e3f..0d32b9dfdb 100644
--- a/web/app/components/datasets/create/website/base/header.tsx
+++ b/web/app/components/datasets/create/website/base/header.tsx
@@ -1,7 +1,7 @@
 import { RiBookOpenLine, RiEqualizer2Line } from '@remixicon/react'
 import * as React from 'react'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 
 type HeaderProps = {
@@ -47,7 +47,7 @@ const Header = ({
         </Button>
       </div>
       <a
-        className="system-xs-medium flex items-center gap-x-1 overflow-hidden text-text-accent"
+        className="flex items-center gap-x-1 overflow-hidden system-xs-medium text-text-accent"
         href={docLink}
         target="_blank"
         rel="noopener noreferrer"
diff --git a/web/app/components/datasets/create/website/base/url-input.tsx b/web/app/components/datasets/create/website/base/url-input.tsx
index 0f5212faeb..21f7d2ca67 100644
--- a/web/app/components/datasets/create/website/base/url-input.tsx
+++ b/web/app/components/datasets/create/website/base/url-input.tsx
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { useDocLink } from '@/context/i18n'
 import Input from './input'
 
@@ -41,7 +41,6 @@ const UrlInput: FC<Props> = ({
         variant="primary"
         onClick={handleOnRun}
         loading={isRunning}
-        spinnerClassName="ml-0!"
       >
         {!isRunning ? t(`${I18N_PREFIX}.run`, { ns: 'datasetCreation' }) : ''}
       </Button>
diff --git a/web/app/components/datasets/create/website/jina-reader/base/__tests__/url-input.spec.tsx b/web/app/components/datasets/create/website/jina-reader/base/__tests__/url-input.spec.tsx
index 296d5c091b..84fd00d267 100644
--- a/web/app/components/datasets/create/website/jina-reader/base/__tests__/url-input.spec.tsx
+++ b/web/app/components/datasets/create/website/jina-reader/base/__tests__/url-input.spec.tsx
@@ -49,13 +49,17 @@ describe('UrlInput (jina-reader)', () => {
     it('should show loading state on button when running', () => {
       render(<UrlInput isRunning={true} onRun={mockOnRun} />)
       const button = screen.getByRole('button')
-      expect(button).toHaveTextContent(/loading/i)
+      expect(button).toBeDisabled()
+      expect(button).toHaveAttribute('aria-busy', 'true')
+      expect(button.querySelector('.animate-spin')).toBeInTheDocument()
     })
 
     it('should not show loading state on button when not running', () => {
       render(<UrlInput isRunning={false} onRun={mockOnRun} />)
       const button = screen.getByRole('button')
-      expect(button).not.toHaveTextContent(/loading/i)
+      expect(button).not.toBeDisabled()
+      expect(button).not.toHaveAttribute('aria-busy')
+      expect(button.querySelector('.animate-spin')).not.toBeInTheDocument()
     })
   })
 
diff --git a/web/app/components/datasets/create/website/jina-reader/base/url-input.tsx b/web/app/components/datasets/create/website/jina-reader/base/url-input.tsx
index 691a34ca6b..a5045d601f 100644
--- a/web/app/components/datasets/create/website/jina-reader/base/url-input.tsx
+++ b/web/app/components/datasets/create/website/jina-reader/base/url-input.tsx
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { useDocLink } from '@/context/i18n'
 import Input from '../../base/input'
 
diff --git a/web/app/components/datasets/create/website/no-data.tsx b/web/app/components/datasets/create/website/no-data.tsx
index 88f7ef812c..612507d76f 100644
--- a/web/app/components/datasets/create/website/no-data.tsx
+++ b/web/app/components/datasets/create/website/no-data.tsx
@@ -2,8 +2,8 @@
 import type { FC } from 'react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { Icon3Dots } from '@/app/components/base/icons/src/vender/line/others'
+import { Button } from '@/app/components/base/ui/button'
 import { ENABLE_WEBSITE_FIRECRAWL, ENABLE_WEBSITE_JINAREADER, ENABLE_WEBSITE_WATERCRAWL } from '@/config'
 import { DataSourceProvider } from '@/models/common'
 import s from './index.module.css'
@@ -62,10 +62,10 @@ const NoData: FC<Props> = ({
         >
           {currentProvider.emoji}
         </div>
-        <div className="mb-1 mt-2 flex flex-col gap-y-1 pb-3 pt-1">
+        <div className="mt-2 mb-1 flex flex-col gap-y-1 pt-1 pb-3">
           <span className="system-md-semibold text-text-secondary">
             {currentProvider.title}
-            <Icon3Dots className="relative -left-1.5 -top-2.5 inline" />
+            <Icon3Dots className="relative -top-2.5 -left-1.5 inline" />
           </span>
           <div className="system-sm-regular text-text-tertiary">
             {currentProvider.description}
diff --git a/web/app/components/datasets/documents/components/documents-header.tsx b/web/app/components/datasets/documents/components/documents-header.tsx
index 7817feaf64..4e098f5eda 100644
--- a/web/app/components/datasets/documents/components/documents-header.tsx
+++ b/web/app/components/datasets/documents/components/documents-header.tsx
@@ -7,10 +7,10 @@ import { PlusIcon } from '@heroicons/react/24/solid'
 import { RiDraftLine, RiExternalLinkLine } from '@remixicon/react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Chip from '@/app/components/base/chip'
 import Input from '@/app/components/base/input'
 import Sort from '@/app/components/base/sort'
+import { Button } from '@/app/components/base/ui/button'
 import AutoDisabledDocument from '@/app/components/datasets/common/document-status-with-action/auto-disabled-document'
 import IndexFailed from '@/app/components/datasets/common/document-status-with-action/index-failed'
 import StatusWithAction from '@/app/components/datasets/common/document-status-with-action/status-with-action'
diff --git a/web/app/components/datasets/documents/components/empty-element.tsx b/web/app/components/datasets/documents/components/empty-element.tsx
index 40c4bbdb9e..6eacf89264 100644
--- a/web/app/components/datasets/documents/components/empty-element.tsx
+++ b/web/app/components/datasets/documents/components/empty-element.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import { PlusIcon } from '@heroicons/react/24/solid'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import s from '../style.module.css'
 import { FolderPlusIcon, NotionIcon, ThreeDotsIcon } from './icons'
 
@@ -22,7 +22,7 @@ const EmptyElement: FC<EmptyElementProps> = ({ canAdd = true, onClick, type = 'u
         </div>
         <span className={s.emptyTitle}>
           {t('list.empty.title', { ns: 'datasetDocuments' })}
-          <ThreeDotsIcon className="relative -left-1.5 -top-3 inline" />
+          <ThreeDotsIcon className="relative -top-3 -left-1.5 inline" />
         </span>
         <div className={s.emptyTip}>
           {t(`list.empty.${type}.tip`, { ns: 'datasetDocuments' })}
diff --git a/web/app/components/datasets/documents/components/rename-modal.tsx b/web/app/components/datasets/documents/components/rename-modal.tsx
index 364aaf48e6..c6f393f1ce 100644
--- a/web/app/components/datasets/documents/components/rename-modal.tsx
+++ b/web/app/components/datasets/documents/components/rename-modal.tsx
@@ -4,9 +4,9 @@ import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { renameDocumentName } from '@/service/datasets'
 
@@ -60,7 +60,7 @@ const RenameModal: FC<Props> = ({
       isShow
       onClose={onClose}
     >
-      <div className="mt-6 text-sm font-medium leading-[21px] text-text-primary">{t('list.table.name', { ns: 'datasetDocuments' })}</div>
+      <div className="mt-6 text-sm leading-[21px] font-medium text-text-primary">{t('list.table.name', { ns: 'datasetDocuments' })}</div>
       <Input
         className="mt-2 h-10"
         value={newName}
diff --git a/web/app/components/datasets/documents/create-from-pipeline/actions/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/actions/index.tsx
index dab76da832..64c5faac33 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/actions/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/actions/index.tsx
@@ -2,8 +2,8 @@ import { RiArrowRightLine } from '@remixicon/react'
 import * as React from 'react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Checkbox from '@/app/components/base/checkbox'
+import { Button } from '@/app/components/base/ui/button'
 import Link from '@/next/link'
 import { useParams } from '@/next/navigation'
 
@@ -49,7 +49,7 @@ const Actions = ({
     <div className="flex items-center gap-x-2 overflow-hidden">
       {showSelect && (
         <>
-          <div className="flex shrink-0 items-center gap-x-2 py-[3px] pl-4 pr-2">
+          <div className="flex shrink-0 items-center gap-x-2 py-[3px] pr-2 pl-4">
             <Checkbox
               onCheck={onSelectAll}
               indeterminate={indeterminate}
@@ -60,7 +60,7 @@ const Actions = ({
             </span>
           </div>
           {tip && (
-            <div title={tip} className="system-xs-regular max-w-full truncate text-text-tertiary">
+            <div title={tip} className="max-w-full truncate system-xs-regular text-text-tertiary">
               {tip}
             </div>
           )}
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/__tests__/header.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/__tests__/header.spec.tsx
index 48a0615bcc..b736935cc8 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/__tests__/header.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/__tests__/header.spec.tsx
@@ -2,8 +2,8 @@ import { render, screen } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
 import Header from '../header'
 
-vi.mock('@/app/components/base/button', () => ({
-  default: ({ children }: { children: React.ReactNode }) => <button>{children}</button>,
+vi.mock('@/app/components/base/ui/button', () => ({
+  Button: ({ children }: { children: React.ReactNode }) => <button>{children}</button>,
 }))
 
 vi.mock('@/app/components/base/divider', () => ({
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/header.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/header.tsx
index c299a53c5d..034556d96f 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/header.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/header.tsx
@@ -2,9 +2,9 @@ import type { CredentialSelectorProps } from './credential-selector'
 import { RiBookOpenLine, RiEqualizer2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import CredentialSelector from './credential-selector'
 
 type HeaderProps = {
@@ -47,7 +47,7 @@ const Header = ({
         </Tooltip>
       </div>
       <a
-        className="system-xs-medium flex shrink-0 items-center gap-x-1 text-text-accent"
+        className="flex shrink-0 items-center gap-x-1 system-xs-medium text-text-accent"
         href={docLink}
         target="_blank"
         rel="noopener noreferrer"
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/connect/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/connect/index.tsx
index 3da9a7bd54..19ec906688 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/connect/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/connect/index.tsx
@@ -1,7 +1,7 @@
 import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { Icon3Dots } from '@/app/components/base/icons/src/vender/line/others'
+import { Button } from '@/app/components/base/ui/button'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import { useToolIcon } from '@/app/components/workflow/hooks'
 import { BlockEnum } from '@/app/components/workflow/types'
@@ -28,11 +28,11 @@ const Connect = ({
         />
       </div>
       <div className="flex flex-col gap-y-1">
-        <div className="flex flex-col gap-y-1 pb-3 pt-1">
+        <div className="flex flex-col gap-y-1 pt-1 pb-3">
           <div className="system-md-semibold text-text-secondary">
             <span className="relative">
               {t('onlineDrive.notConnected', { ns: 'datasetPipeline', name: nodeData.title })}
-              <Icon3Dots className="absolute -right-2.5 -top-1.5 size-4 text-text-secondary" />
+              <Icon3Dots className="absolute -top-1.5 -right-2.5 size-4 text-text-secondary" />
             </span>
           </div>
           <div className="system-sm-regular text-text-tertiary">
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/empty-search-result.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/empty-search-result.tsx
index 53cc7c0a86..2269e33679 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/empty-search-result.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/empty-search-result.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { SearchMenu } from '@/app/components/base/icons/src/vender/knowledge'
+import { Button } from '@/app/components/base/ui/button'
 
 type EmptySearchResultProps = {
   onResetKeywords: () => void
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/header.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/header.tsx
index 3a6f294e09..5c12aaa68c 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/header.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/header.tsx
@@ -1,7 +1,7 @@
 import { RiBookOpenLine, RiEqualizer2Line } from '@remixicon/react'
 import * as React from 'react'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
+import { Button } from '@/app/components/base/ui/button'
 
 type HeaderProps = {
   onClickConfiguration?: () => void
@@ -33,7 +33,7 @@ const Header = ({
         </Button>
       </div>
       <a
-        className="system-xs-medium flex items-center gap-x-1 overflow-hidden text-text-accent"
+        className="flex items-center gap-x-1 overflow-hidden system-xs-medium text-text-accent"
         href={docLink}
         target="_blank"
         rel="noopener noreferrer"
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/__tests__/crawled-result-item.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/__tests__/crawled-result-item.spec.tsx
index 80d1f4ee19..62dba84e30 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/__tests__/crawled-result-item.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/__tests__/crawled-result-item.spec.tsx
@@ -3,8 +3,8 @@ import { render, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import CrawledResultItem from '../crawled-result-item'
 
-vi.mock('@/app/components/base/button', () => ({
-  default: ({ children, onClick }: { children: React.ReactNode, onClick: () => void }) => (
+vi.mock('@/app/components/base/ui/button', () => ({
+  Button: ({ children, onClick }: { children: React.ReactNode, onClick: () => void }) => (
     <button data-testid="preview-button" onClick={onClick}>{children}</button>
   ),
 }))
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result-item.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result-item.tsx
index 88887d2f2e..3da0e50357 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result-item.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result-item.tsx
@@ -3,9 +3,9 @@ import type { CrawlResultItem as CrawlResultItemType } from '@/models/datasets'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Checkbox from '@/app/components/base/checkbox'
 import Radio from '@/app/components/base/radio/ui'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 
 type CrawledResultItemProps = {
@@ -58,13 +58,13 @@ const CrawledResultItem = ({
       }
       <div className="flex min-w-0 grow flex-col gap-y-0.5">
         <div
-          className="system-sm-medium truncate text-text-secondary"
+          className="truncate system-sm-medium text-text-secondary"
           title={payload.title}
         >
           {payload.title}
         </div>
         <div
-          className="system-xs-regular truncate text-text-tertiary"
+          className="truncate system-xs-regular text-text-tertiary"
           title={payload.source_url}
         >
           {payload.source_url}
@@ -74,7 +74,7 @@ const CrawledResultItem = ({
         <Button
           size="small"
           onClick={onPreview}
-          className="system-xs-medium-uppercase right-2 top-2 hidden px-1.5 group-hover:absolute group-hover:block"
+          className="top-2 right-2 hidden px-1.5 system-xs-medium-uppercase group-hover:absolute group-hover:block"
         >
           {t('stepOne.website.preview', { ns: 'datasetCreation' })}
         </Button>
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/index.tsx
index 8877de93b8..48aae23492 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/index.tsx
@@ -3,11 +3,11 @@ import { RiPlayLargeLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import { useEffect, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { useAppForm } from '@/app/components/base/form'
 import BaseField from '@/app/components/base/form/form-scenarios/base/field'
 import { generateZodSchema } from '@/app/components/base/form/form-scenarios/base/utils'
 import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/general'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useConfigurations, useInitialData } from '@/app/components/rag-pipeline/hooks/use-input-fields'
 import { CrawlStep } from '@/models/datasets'
@@ -82,7 +82,7 @@ const Options = ({
     >
       <div className="flex items-center gap-x-1 px-4 py-2">
         <div
-          className="flex grow cursor-pointer select-none items-center gap-x-0.5"
+          className="flex grow cursor-pointer items-center gap-x-0.5 select-none"
           onClick={foldToggle}
         >
           <span className="system-sm-semibold-uppercase text-text-secondary">
@@ -96,7 +96,6 @@ const Options = ({
           disabled={runDisabled || isRunning}
           loading={isRunning}
           className="shrink-0 gap-x-0.5"
-          spinnerClassName="ml-0!"
         >
           <RiPlayLargeLine className="size-4" />
           <span className="px-0.5">{!isRunning ? t(`${I18N_PREFIX}.run`, { ns: 'datasetCreation' }) : t(`${I18N_PREFIX}.running`, { ns: 'datasetCreation' })}</span>
diff --git a/web/app/components/datasets/documents/create-from-pipeline/left-header.tsx b/web/app/components/datasets/documents/create-from-pipeline/left-header.tsx
index d464041d13..925da57197 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/left-header.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/left-header.tsx
@@ -1,8 +1,8 @@
 import type { Step } from './step-indicator'
 import { RiArrowLeftLine } from '@remixicon/react'
 import * as React from 'react'
-import Button from '@/app/components/base/button'
 import Effect from '@/app/components/base/effect'
+import { Button } from '@/app/components/base/ui/button'
 import Link from '@/next/link'
 import { useParams } from '@/next/navigation'
 import StepIndicator from './step-indicator'
@@ -21,9 +21,9 @@ const LeftHeader = ({
   const { datasetId } = useParams()
 
   return (
-    <div className="relative flex flex-col gap-y-0.5 pb-2 pt-4">
+    <div className="relative flex flex-col gap-y-0.5 pt-4 pb-2">
       <div className="flex items-center gap-x-2">
-        <span className="system-2xs-semibold-uppercase bg-pipeline-add-documents-title-bg bg-clip-text text-transparent">
+        <span className="bg-pipeline-add-documents-title-bg bg-clip-text system-2xs-semibold-uppercase text-transparent">
           {title}
         </span>
         <span className="system-2xs-regular text-divider-regular">/</span>
@@ -39,13 +39,13 @@ const LeftHeader = ({
         >
           <Button
             variant="secondary-accent"
-            className="absolute -left-11 top-3.5 size-9 rounded-full p-0"
+            className="absolute top-3.5 -left-11 size-9 rounded-full p-0"
           >
-            <RiArrowLeftLine className="size-5 " />
+            <RiArrowLeftLine className="size-5" />
           </Button>
         </Link>
       )}
-      <Effect className="left-8 top-[-34px] opacity-20" />
+      <Effect className="top-[-34px] left-8 opacity-20" />
     </div>
   )
 }
diff --git a/web/app/components/datasets/documents/create-from-pipeline/preview/chunk-preview.tsx b/web/app/components/datasets/documents/create-from-pipeline/preview/chunk-preview.tsx
index d57f06ed00..a56e5bd6dc 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/preview/chunk-preview.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/preview/chunk-preview.tsx
@@ -6,8 +6,8 @@ import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
-import Button from '@/app/components/base/button'
 import { SkeletonContainer, SkeletonPoint, SkeletonRectangle, SkeletonRow } from '@/app/components/base/skeleton'
+import { Button } from '@/app/components/base/ui/button'
 import SummaryLabel from '@/app/components/datasets/documents/detail/completed/common/summary-label'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { ChunkingMode } from '@/models/datasets'
diff --git a/web/app/components/datasets/documents/create-from-pipeline/process-documents/__tests__/header.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/process-documents/__tests__/header.spec.tsx
index 7ce3a6396e..7e9eabaeda 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/process-documents/__tests__/header.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/process-documents/__tests__/header.spec.tsx
@@ -2,8 +2,8 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import Header from '../header'
 
-vi.mock('@/app/components/base/button', () => ({
-  default: ({ children, onClick, disabled, variant }: { children: React.ReactNode, onClick: () => void, disabled?: boolean, variant: string }) => (
+vi.mock('@/app/components/base/ui/button', () => ({
+  Button: ({ children, onClick, disabled, variant }: { children: React.ReactNode, onClick: () => void, disabled?: boolean, variant: string }) => (
     <button data-testid={`btn-${variant}`} onClick={onClick} disabled={disabled}>
       {children}
     </button>
diff --git a/web/app/components/datasets/documents/create-from-pipeline/process-documents/actions.tsx b/web/app/components/datasets/documents/create-from-pipeline/process-documents/actions.tsx
index 7b378cb808..7526826cfc 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/process-documents/actions.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/process-documents/actions.tsx
@@ -1,7 +1,7 @@
 import { RiArrowLeftLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 
 type ActionsProps = {
   onBack: () => void
diff --git a/web/app/components/datasets/documents/create-from-pipeline/process-documents/header.tsx b/web/app/components/datasets/documents/create-from-pipeline/process-documents/header.tsx
index a0f8a63f8f..04d4304d21 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/process-documents/header.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/process-documents/header.tsx
@@ -1,7 +1,7 @@
 import { RiSearchEyeLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 
 type HeaderProps = {
   onReset: () => void
@@ -20,7 +20,7 @@ const Header = ({
 
   return (
     <div className="flex items-center gap-x-1 px-4 py-2">
-      <div className="system-sm-semibold-uppercase grow text-text-secondary">
+      <div className="grow system-sm-semibold-uppercase text-text-secondary">
         {t('addDocuments.stepTwo.chunkSettings', { ns: 'datasetPipeline' })}
       </div>
       <Button variant="ghost" disabled={resetDisabled} onClick={onReset}>
diff --git a/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/index.tsx
index b25146ff79..86de5ee45e 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/index.tsx
@@ -13,10 +13,10 @@ import {
 import * as React from 'react'
 import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import NotionIcon from '@/app/components/base/notion-icon'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import PriorityLabel from '@/app/components/billing/priority-label'
 import { Plan } from '@/app/components/billing/type'
 import UpgradeBtn from '@/app/components/billing/upgrade-btn'
@@ -134,7 +134,7 @@ const EmbeddingProcess = ({
   return (
     <>
       <div className="flex flex-col gap-y-3">
-        <div className="system-md-semibold-uppercase flex items-center gap-x-1 text-text-secondary">
+        <div className="flex items-center gap-x-1 system-md-semibold-uppercase text-text-secondary">
           {(isEmbeddingWaiting || isEmbedding) && (
             <>
               <RiLoader2Fill className="size-4 animate-spin" />
@@ -151,7 +151,7 @@ const EmbeddingProcess = ({
               <div className="flex shrink-0 items-center justify-center rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-brand-blue-brand-500 shadow-md shadow-shadow-shadow-5">
                 <RiAedFill className="size-4 text-text-primary-on-surface" />
               </div>
-              <div className="system-md-medium grow text-text-primary">
+              <div className="grow system-md-medium text-text-primary">
                 {t('plansCommon.documentProcessingPriorityUpgrade', { ns: 'billing' })}
               </div>
               <UpgradeBtn loc="knowledge-speed-up" />
@@ -169,11 +169,11 @@ const EmbeddingProcess = ({
             >
               {isSourceEmbedding(indexingStatusDetail) && (
                 <div
-                  className="absolute left-0 top-0 h-full min-w-0.5 border-r-2 border-r-components-progress-bar-progress-highlight bg-components-progress-bar-progress"
+                  className="absolute top-0 left-0 h-full min-w-0.5 border-r-2 border-r-components-progress-bar-progress-highlight bg-components-progress-bar-progress"
                   style={{ width: `${getSourcePercent(indexingStatusDetail)}%` }}
                 />
               )}
-              <div className="z-1 flex h-full items-center gap-1 pl-[6px] pr-2">
+              <div className="z-1 flex h-full items-center gap-1 pr-2 pl-[6px]">
                 {getSourceType(indexingStatusDetail.id) === DatasourceType.localFile && (
                   <DocumentFileIcon
                     size="sm"
@@ -190,7 +190,7 @@ const EmbeddingProcess = ({
                   />
                 )}
                 <div className="flex w-0 grow items-center gap-1" title={getSourceName(indexingStatusDetail.id)}>
-                  <div className="system-xs-medium truncate text-text-secondary">
+                  <div className="truncate system-xs-medium text-text-secondary">
                     {getSourceName(indexingStatusDetail.id)}
                   </div>
                   {
diff --git a/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx b/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
index 7382d1abd1..c6e1a63bd3 100644
--- a/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
+++ b/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
@@ -5,10 +5,10 @@ import { RiDeleteBinLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { getFileUploadErrorMessage } from '@/app/components/base/file-uploader/utils'
 import { Csv as CSVIcon } from '@/app/components/base/icons/src/public/files'
 import SimplePieChart from '@/app/components/base/simple-pie-chart'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import useTheme from '@/hooks/use-theme'
 import { upload } from '@/service/base'
@@ -178,7 +178,7 @@ const CSVUploader: FC<Props> = ({ file, updateFile }) => {
                 <span className="cursor-pointer text-text-accent" onClick={selectHandle}>{t('list.batchModal.browse', { ns: 'datasetDocuments' })}</span>
               </div>
             </div>
-            {dragging && <div ref={dragRef} className="absolute left-0 top-0 h-full w-full" />}
+            {dragging && <div ref={dragRef} className="absolute top-0 left-0 h-full w-full" />}
           </div>
         )}
         {file && (
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 ff43f5f67d..fe3c399355 100644
--- a/web/app/components/datasets/documents/detail/batch-modal/index.tsx
+++ b/web/app/components/datasets/documents/detail/batch-modal/index.tsx
@@ -6,8 +6,8 @@ import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import CSVDownloader from './csv-downloader'
 import CSVUploader from './csv-uploader'
 
@@ -42,8 +42,8 @@ const BatchModal: FC<IBatchModalProps> = ({
 
   return (
     <Modal isShow={isShow} onClose={noop} className="max-w-[520px]! rounded-xl! px-8 py-6">
-      <div className="relative pb-1 text-xl font-medium leading-[30px] text-text-primary">{t('list.batchModal.title', { ns: 'datasetDocuments' })}</div>
-      <div className="absolute right-4 top-4 cursor-pointer p-2" onClick={onCancel}>
+      <div className="relative pb-1 text-xl leading-[30px] font-medium text-text-primary">{t('list.batchModal.title', { ns: 'datasetDocuments' })}</div>
+      <div className="absolute top-4 right-4 cursor-pointer p-2" onClick={onCancel}>
         <RiCloseLine className="h-4 w-4 text-text-secondary" />
       </div>
       <CSVUploader
diff --git a/web/app/components/datasets/documents/detail/completed/common/action-buttons.tsx b/web/app/components/datasets/documents/detail/completed/common/action-buttons.tsx
index a0cbfea147..9bd2913cda 100644
--- a/web/app/components/datasets/documents/detail/completed/common/action-buttons.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/action-buttons.tsx
@@ -3,7 +3,7 @@ import { useKeyPress } from 'ahooks'
 import * as React from 'react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import ShortcutsName from '@/app/components/workflow/shortcuts-name'
 import { getKeyboardKeyCodeBySystem } from '@/app/components/workflow/utils'
 import { ChunkingMode } from '@/models/datasets'
diff --git a/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx b/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx
index cf4966c234..9a2798698c 100644
--- a/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx
@@ -3,10 +3,10 @@ import { RiArchive2Line, RiCheckboxCircleLine, RiCloseCircleLine, RiDeleteBinLin
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'
 import Divider from '@/app/components/base/divider'
 import { SearchLinesSparkle } from '@/app/components/base/icons/src/vender/knowledge'
+import { Button } from '@/app/components/base/ui/button'
 import { IS_CE_EDITION } from '@/config'
 import { cn } from '@/utils/classnames'
 
@@ -55,8 +55,8 @@ const BatchAction: FC<IBatchActionProps> = ({
   return (
     <div className={cn('pointer-events-none flex w-full justify-center gap-x-2', className)}>
       <div className="pointer-events-auto flex items-center gap-x-1 radius-lg border border-components-actionbar-border-accent bg-components-actionbar-bg-accent p-1 shadow-xl shadow-shadow-shadow-5">
-        <div className="inline-flex items-center gap-x-2 py-1 pl-2 pr-3">
-          <span className="system-xs-medium flex h-5 w-5 items-center justify-center rounded-md bg-text-accent text-text-primary-on-surface">
+        <div className="inline-flex items-center gap-x-2 py-1 pr-3 pl-2">
+          <span className="flex h-5 w-5 items-center justify-center rounded-md bg-text-accent system-xs-medium text-text-primary-on-surface">
             {selectedIds.length}
           </span>
           <span className="system-sm-semibold text-text-accent">{t(`${i18nPrefix}.selected`, { ns: 'dataset' })}</span>
diff --git a/web/app/components/datasets/documents/detail/completed/common/regeneration-modal.tsx b/web/app/components/datasets/documents/detail/completed/common/regeneration-modal.tsx
index cbc99c48d5..8aea0245de 100644
--- a/web/app/components/datasets/documents/detail/completed/common/regeneration-modal.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/regeneration-modal.tsx
@@ -5,8 +5,8 @@ import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 
 type IDefaultContentProps = {
@@ -30,7 +30,7 @@ const DefaultContent: FC<IDefaultContentProps> = React.memo(({
         <Button onClick={onCancel}>
           {t('operation.cancel', { ns: 'common' })}
         </Button>
-        <Button variant="warning" destructive onClick={onConfirm}>
+        <Button variant="primary" destructive onClick={onConfirm}>
           {t('operation.regenerate', { ns: 'common' })}
         </Button>
       </div>
@@ -50,7 +50,7 @@ const RegeneratingContent: FC = React.memo(() => {
         <p className="system-md-regular text-text-secondary">{t('segment.regeneratingMessage', { ns: 'datasetDocuments' })}</p>
       </div>
       <div className="flex justify-end pt-6">
-        <Button variant="warning" destructive disabled className="inline-flex items-center gap-x-0.5">
+        <Button variant="primary" destructive disabled className="inline-flex items-center gap-x-0.5">
           <RiLoader2Line className="h-4 w-4 animate-spin text-components-button-destructive-primary-text-disabled" />
           <span>{t('operation.regenerate', { ns: 'common' })}</span>
         </Button>
diff --git a/web/app/components/datasets/documents/detail/metadata/components/doc-type-selector.tsx b/web/app/components/datasets/documents/detail/metadata/components/doc-type-selector.tsx
index 033b7f631d..c65fbeb886 100644
--- a/web/app/components/datasets/documents/detail/metadata/components/doc-type-selector.tsx
+++ b/web/app/components/datasets/documents/detail/metadata/components/doc-type-selector.tsx
@@ -2,9 +2,9 @@
 import type { FC } from 'react'
 import type { DocType } from '@/models/datasets'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Radio from '@/app/components/base/radio'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import { useMetadataMap } from '@/hooks/use-metadata'
 import { CUSTOMIZABLE_DOC_TYPES } from '@/models/datasets'
 import { cn } from '@/utils/classnames'
diff --git a/web/app/components/datasets/documents/detail/metadata/index.tsx b/web/app/components/datasets/documents/detail/metadata/index.tsx
index 87110ddc1d..0d06b43118 100644
--- a/web/app/components/datasets/documents/detail/metadata/index.tsx
+++ b/web/app/components/datasets/documents/detail/metadata/index.tsx
@@ -3,9 +3,9 @@ import type { FC } from 'react'
 import type { FullDocumentDetail } from '@/models/datasets'
 import { PencilIcon } from '@heroicons/react/24/outline'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import Loading from '@/app/components/base/loading'
+import { Button } from '@/app/components/base/ui/button'
 import { useMetadataMap } from '@/hooks/use-metadata'
 import DocTypeSelector, { DocumentTypeDisplay } from './components/doc-type-selector'
 import MetadataFieldList from './components/metadata-field-list'
diff --git a/web/app/components/datasets/documents/detail/settings/pipeline-settings/left-header.tsx b/web/app/components/datasets/documents/detail/settings/pipeline-settings/left-header.tsx
index 15b06a5f10..28e8d4bb30 100644
--- a/web/app/components/datasets/documents/detail/settings/pipeline-settings/left-header.tsx
+++ b/web/app/components/datasets/documents/detail/settings/pipeline-settings/left-header.tsx
@@ -2,8 +2,8 @@ import { RiArrowLeftLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Effect from '@/app/components/base/effect'
+import { Button } from '@/app/components/base/ui/button'
 import { useRouter } from '@/next/navigation'
 
 type LeftHeaderProps = {
@@ -21,8 +21,8 @@ const LeftHeader = ({
   }, [back])
 
   return (
-    <div className="relative flex flex-col gap-y-0.5 pb-2 pt-4">
-      <div className="system-2xs-semibold-uppercase bg-pipeline-add-documents-title-bg bg-clip-text text-transparent">
+    <div className="relative flex flex-col gap-y-0.5 pt-4 pb-2">
+      <div className="bg-pipeline-add-documents-title-bg bg-clip-text system-2xs-semibold-uppercase text-transparent">
         {title}
       </div>
       <div className="system-md-semibold text-text-primary">
@@ -30,13 +30,13 @@ const LeftHeader = ({
       </div>
       <Button
         variant="secondary-accent"
-        className="absolute -left-11 top-3.5 size-9 rounded-full p-0"
+        className="absolute top-3.5 -left-11 size-9 rounded-full p-0"
         onClick={navigateBack}
         aria-label={t('operation.back', { ns: 'common' })}
       >
-        <RiArrowLeftLine className="size-5 " />
+        <RiArrowLeftLine className="size-5" />
       </Button>
-      <Effect className="left-8 top-[-34px] opacity-20" />
+      <Effect className="top-[-34px] left-8 opacity-20" />
     </div>
   )
 }
diff --git a/web/app/components/datasets/documents/detail/settings/pipeline-settings/process-documents/actions.tsx b/web/app/components/datasets/documents/detail/settings/pipeline-settings/process-documents/actions.tsx
index 4a47f28152..a3ba424309 100644
--- a/web/app/components/datasets/documents/detail/settings/pipeline-settings/process-documents/actions.tsx
+++ b/web/app/components/datasets/documents/detail/settings/pipeline-settings/process-documents/actions.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 
 type ActionsProps = {
   runDisabled?: boolean
diff --git a/web/app/components/datasets/external-api/external-api-modal/index.tsx b/web/app/components/datasets/external-api/external-api-modal/index.tsx
index b84b9925c3..1d60e67634 100644
--- a/web/app/components/datasets/external-api/external-api-modal/index.tsx
+++ b/web/app/components/datasets/external-api/external-api-modal/index.tsx
@@ -4,10 +4,10 @@ import { RiBook2Line, RiCloseLine, RiInformation2Line, RiLock2Fill } from '@remi
 import { memo, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'
 import { PortalToFollowElem, PortalToFollowElemContent } from '@/app/components/base/portal-to-follow-elem'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { createExternalAPI } from '@/service/datasets'
 import Form from './Form'
@@ -104,12 +104,12 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
       <PortalToFollowElemContent className="z-60 h-full w-full">
         <div className="fixed inset-0 flex items-center justify-center bg-black/25">
           <div className="shadows-shadow-xl relative flex w-[480px] flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg">
-            <div className="flex flex-col items-start gap-2 self-stretch pb-3 pl-6 pr-14 pt-6">
-              <div className="grow self-stretch text-text-primary title-2xl-semi-bold">
+            <div className="flex flex-col items-start gap-2 self-stretch pt-6 pr-14 pb-3 pl-6">
+              <div className="grow self-stretch title-2xl-semi-bold text-text-primary">
                 {isEditMode ? t('editExternalAPIFormTitle', { ns: 'dataset' }) : t('createExternalAPI', { ns: 'dataset' })}
               </div>
               {isEditMode && (datasetBindings?.length ?? 0) > 0 && (
-                <div className="flex items-center text-text-tertiary system-xs-regular">
+                <div className="flex items-center system-xs-regular text-text-tertiary">
                   {t('editExternalAPIFormWarning.front', { ns: 'dataset' })}
                   <span className="flex cursor-pointer items-center text-text-accent">
                     &nbsp;
@@ -121,13 +121,13 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
                       popupClassName="flex items-center self-stretch w-[320px]"
                       popupContent={(
                         <div className="p-1">
-                          <div className="flex items-start self-stretch pb-0.5 pl-2 pr-3 pt-1">
-                            <div className="text-text-tertiary system-xs-medium-uppercase">{`${datasetBindings?.length} ${t('editExternalAPITooltipTitle', { ns: 'dataset' })}`}</div>
+                          <div className="flex items-start self-stretch pt-1 pr-3 pb-0.5 pl-2">
+                            <div className="system-xs-medium-uppercase text-text-tertiary">{`${datasetBindings?.length} ${t('editExternalAPITooltipTitle', { ns: 'dataset' })}`}</div>
                           </div>
                           {datasetBindings?.map(binding => (
                             <div key={binding.id} className="flex items-center gap-1 self-stretch px-2 py-1">
                               <RiBook2Line className="h-4 w-4 text-text-secondary" />
-                              <div className="text-text-secondary system-sm-medium">{binding.name}</div>
+                              <div className="system-sm-medium text-text-secondary">{binding.name}</div>
                             </div>
                           ))}
                         </div>
@@ -141,7 +141,7 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
                 </div>
               )}
             </div>
-            <ActionButton className="absolute right-5 top-5" onClick={onCancel}>
+            <ActionButton className="absolute top-5 right-5" onClick={onCancel}>
               <RiCloseLine className="h-[18px] w-[18px] shrink-0 text-text-tertiary" />
             </ActionButton>
             <Form value={formData} onChange={handleDataChange} formSchemas={formSchemas} className="flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3" />
@@ -166,7 +166,7 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
               </Button>
             </div>
             <div className="flex items-center justify-center gap-1 self-stretch rounded-b-2xl border-t-[0.5px] border-divider-subtle
-              bg-background-soft px-2 py-3 text-text-tertiary system-xs-regular"
+              bg-background-soft px-2 py-3 system-xs-regular text-text-tertiary"
             >
               <RiLock2Fill className="h-3 w-3 text-text-quaternary" />
               {t('externalAPIForm.encrypted.front', { ns: 'dataset' })}
diff --git a/web/app/components/datasets/external-api/external-api-panel/index.tsx b/web/app/components/datasets/external-api/external-api-panel/index.tsx
index 063b8683c6..7d240d0820 100644
--- a/web/app/components/datasets/external-api/external-api-panel/index.tsx
+++ b/web/app/components/datasets/external-api/external-api-panel/index.tsx
@@ -6,8 +6,8 @@ import {
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
+import { Button } from '@/app/components/base/ui/button'
 import { useExternalKnowledgeApi } from '@/context/external-knowledge-api-context'
 import { useDocLink } from '@/context/i18n'
 import { useModalContext } from '@/context/modal-context'
@@ -41,7 +41,7 @@ const ExternalAPIPanel: React.FC<ExternalAPIPanelProps> = ({ onClose }) => {
   return (
     <div
       tabIndex={-1}
-      className={cn('absolute bottom-2 right-0 top-14 z-10 flex outline-hidden')}
+      className={cn('absolute top-14 right-0 bottom-2 z-10 flex outline-hidden')}
     >
       <div
         className={cn(
@@ -50,15 +50,15 @@ const ExternalAPIPanel: React.FC<ExternalAPIPanelProps> = ({ onClose }) => {
       >
         <div className="flex items-start self-stretch p-4 pb-0">
           <div className="flex grow flex-col items-start gap-1">
-            <div className="system-xl-semibold self-stretch text-text-primary">{t('externalAPIPanelTitle', { ns: 'dataset' })}</div>
-            <div className="body-xs-regular self-stretch text-text-tertiary">{t('externalAPIPanelDescription', { ns: 'dataset' })}</div>
+            <div className="self-stretch system-xl-semibold text-text-primary">{t('externalAPIPanelTitle', { ns: 'dataset' })}</div>
+            <div className="self-stretch body-xs-regular text-text-tertiary">{t('externalAPIPanelDescription', { ns: 'dataset' })}</div>
             <a
               className="flex cursor-pointer items-center justify-center gap-1 self-stretch"
               href={docLink('/use-dify/knowledge/external-knowledge-api')}
               target="_blank"
             >
               <RiBookOpenLine className="h-3 w-3 text-text-accent" />
-              <div className="body-xs-regular grow text-text-accent">{t('externalAPIPanelDocumentation', { ns: 'dataset' })}</div>
+              <div className="grow body-xs-regular text-text-accent">{t('externalAPIPanelDocumentation', { ns: 'dataset' })}</div>
             </a>
           </div>
           <div className="flex items-center">
diff --git a/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx b/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx
index 4652a8a5f1..387bf9843c 100644
--- a/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx
+++ b/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx
@@ -4,8 +4,8 @@ import { RiAddLine } from '@remixicon/react'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { useExternalKnowledgeApi } from '@/context/external-knowledge-api-context'
 import { useModalContext } from '@/context/modal-context'
 import { useRouter } from '@/next/navigation'
diff --git a/web/app/components/datasets/external-knowledge-base/create/index.tsx b/web/app/components/datasets/external-knowledge-base/create/index.tsx
index 0e855259ba..9024d8e162 100644
--- a/web/app/components/datasets/external-knowledge-base/create/index.tsx
+++ b/web/app/components/datasets/external-knowledge-base/create/index.tsx
@@ -4,8 +4,8 @@ import type { CreateKnowledgeBaseReq } from './declarations'
 import { RiArrowLeftLine, RiArrowRightLine } from '@remixicon/react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
+import { Button } from '@/app/components/base/ui/button'
 import { useDocLink } from '@/context/i18n'
 import { useRouter } from '@/next/navigation'
 import ExternalApiSelection from './ExternalApiSelection'
@@ -54,14 +54,14 @@ const ExternalKnowledgeBaseCreate: React.FC<ExternalKnowledgeBaseCreateProps> =
     <div className="flex grow flex-col self-stretch rounded-t-2xl border-t border-effects-highlight bg-components-panel-bg">
       <div className="flex grow justify-center self-stretch">
         <div className="flex w-full max-w-[960px] flex-col items-center px-14 py-0">
-          <div className="flex w-full max-w-[640px] grow flex-col items-center gap-4 pb-8 pt-6">
+          <div className="flex w-full max-w-[640px] grow flex-col items-center gap-4 pt-6 pb-8">
             <div className="relative flex flex-col items-center gap-[2px] self-stretch py-2">
-              <div className="system-xl-semibold grow self-stretch text-text-primary">{t('connectDataset', { ns: 'dataset' })}</div>
+              <div className="grow self-stretch system-xl-semibold text-text-primary">{t('connectDataset', { ns: 'dataset' })}</div>
               <p className="system-sm-regular text-text-tertiary">
                 <span>{t('connectHelper.helper1', { ns: 'dataset' })}</span>
                 <span className="system-sm-medium text-text-secondary">{t('connectHelper.helper2', { ns: 'dataset' })}</span>
                 <span>{t('connectHelper.helper3', { ns: 'dataset' })}</span>
-                <a className="system-sm-regular self-stretch text-text-accent" href={docLink('/use-dify/knowledge/connect-external-knowledge-base')} target="_blank" rel="noopener noreferrer">
+                <a className="self-stretch system-sm-regular text-text-accent" href={docLink('/use-dify/knowledge/connect-external-knowledge-base')} target="_blank" rel="noopener noreferrer">
                   {t('connectHelper.helper4', { ns: 'dataset' })}
                 </a>
                 <span>
@@ -70,7 +70,7 @@ const ExternalKnowledgeBaseCreate: React.FC<ExternalKnowledgeBaseCreateProps> =
                 </span>
               </p>
               <Button
-                className="absolute left-[-44px] top-1 flex h-8 w-8 items-center justify-center rounded-full p-2"
+                className="absolute top-1 left-[-44px] flex h-8 w-8 items-center justify-center rounded-full p-2"
                 variant="tertiary"
                 onClick={navBackHandle}
               >
diff --git a/web/app/components/datasets/extra-info/service-api/card.tsx b/web/app/components/datasets/extra-info/service-api/card.tsx
index bf84204ea4..36808a781b 100644
--- a/web/app/components/datasets/extra-info/service-api/card.tsx
+++ b/web/app/components/datasets/extra-info/service-api/card.tsx
@@ -2,9 +2,9 @@ import { RiBookOpenLine, RiKey2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import CopyFeedback from '@/app/components/base/copy-feedback'
 import { ApiAggregate } from '@/app/components/base/icons/src/vender/knowledge'
+import { Button } from '@/app/components/base/ui/button'
 import SecretKeyModal from '@/app/components/develop/secret-key/secret-key-modal'
 import Indicator from '@/app/components/header/indicator'
 import { useDatasetApiAccessUrl } from '@/hooks/use-api-access-url'
@@ -38,7 +38,7 @@ const Card = ({
             <div className="flex size-6 shrink-0 items-center justify-center rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-brand-blue-brand-500 shadow-md shadow-shadow-shadow-5">
               <ApiAggregate className="size-4 text-text-primary-on-surface" />
             </div>
-            <div className="system-sm-semibold grow truncate text-text-secondary">
+            <div className="grow truncate system-sm-semibold text-text-secondary">
               {t('serviceApi.card.title', { ns: 'dataset' })}
             </div>
           </div>
@@ -62,7 +62,7 @@ const Card = ({
           </div>
           <div className="flex h-8 items-center gap-0.5 rounded-lg bg-components-input-bg-normal p-1 pl-2">
             <div className="flex h-4 min-w-0 flex-1 items-start justify-start gap-2 px-1">
-              <div className="system-xs-medium truncate text-text-secondary">
+              <div className="truncate system-xs-medium text-text-secondary">
                 {apiBaseUrl}
               </div>
             </div>
@@ -81,7 +81,7 @@ const Card = ({
           onClick={handleOpenSecretKeyModal}
         >
           <RiKey2Line className="size-3.5 shrink-0" />
-          <span className="system-xs-medium px-[3px]">
+          <span className="px-[3px] system-xs-medium">
             {t('serviceApi.card.apiKey', { ns: 'dataset' })}
           </span>
         </Button>
@@ -96,7 +96,7 @@ const Card = ({
             className="gap-x-px text-text-tertiary"
           >
             <RiBookOpenLine className="size-3.5 shrink-0" />
-            <span className="system-xs-medium px-[3px]">
+            <span className="px-[3px] system-xs-medium">
               {t('serviceApi.card.apiReference', { ns: 'dataset' })}
             </span>
           </Button>
diff --git a/web/app/components/datasets/hit-testing/__tests__/modify-external-retrieval-modal.spec.tsx b/web/app/components/datasets/hit-testing/__tests__/modify-external-retrieval-modal.spec.tsx
index 6fe1f14983..77e02f8582 100644
--- a/web/app/components/datasets/hit-testing/__tests__/modify-external-retrieval-modal.spec.tsx
+++ b/web/app/components/datasets/hit-testing/__tests__/modify-external-retrieval-modal.spec.tsx
@@ -8,8 +8,8 @@ vi.mock('@/app/components/base/action-button', () => ({
   ),
 }))
 
-vi.mock('@/app/components/base/button', () => ({
-  default: ({ children, onClick, variant }: { children: React.ReactNode, onClick: () => void, variant?: string }) => (
+vi.mock('@/app/components/base/ui/button', () => ({
+  Button: ({ children, onClick, variant }: { children: React.ReactNode, onClick: () => void, variant?: string }) => (
     <button data-testid={variant === 'primary' ? 'save-button' : 'cancel-button'} onClick={onClick}>
       {children}
     </button>
diff --git a/web/app/components/datasets/hit-testing/__tests__/modify-retrieval-modal.spec.tsx b/web/app/components/datasets/hit-testing/__tests__/modify-retrieval-modal.spec.tsx
index 4640e42a7e..9e9adf74ad 100644
--- a/web/app/components/datasets/hit-testing/__tests__/modify-retrieval-modal.spec.tsx
+++ b/web/app/components/datasets/hit-testing/__tests__/modify-retrieval-modal.spec.tsx
@@ -21,8 +21,8 @@ vi.mock('@/app/components/base/ui/toast', () => ({
   toast: mockToast,
 }))
 
-vi.mock('@/app/components/base/button', () => ({
-  default: ({ children, onClick, variant }: { children: React.ReactNode, onClick: () => void, variant?: string }) => (
+vi.mock('@/app/components/base/ui/button', () => ({
+  Button: ({ children, onClick, variant }: { children: React.ReactNode, onClick: () => void, variant?: string }) => (
     <button data-testid={variant === 'primary' ? 'save-button' : 'cancel-button'} onClick={onClick}>
       {children}
     </button>
diff --git a/web/app/components/datasets/hit-testing/components/query-input/__tests__/index.spec.tsx b/web/app/components/datasets/hit-testing/components/query-input/__tests__/index.spec.tsx
index 4ed09de462..25b7abe7ea 100644
--- a/web/app/components/datasets/hit-testing/components/query-input/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/hit-testing/components/query-input/__tests__/index.spec.tsx
@@ -123,9 +123,9 @@ describe('QueryInput', () => {
   it('should show loading state on submit button when loading', () => {
     render(<QueryInput {...defaultProps} loading={true} />)
     const submitButton = screen.getByRole('button', { name: /input\.testing/ })
-    // The real Button component does not disable on loading; it shows a spinner
-    expect(submitButton).toBeInTheDocument()
-    expect(submitButton.querySelector('[role="status"]')).toBeInTheDocument()
+    expect(submitButton).toBeDisabled()
+    expect(submitButton).toHaveAttribute('aria-busy', 'true')
+    expect(submitButton.querySelector('.animate-spin')).toBeInTheDocument()
   })
 
   // Cover line 83: images useMemo with image_query data
diff --git a/web/app/components/datasets/hit-testing/components/query-input/index.tsx b/web/app/components/datasets/hit-testing/components/query-input/index.tsx
index 305b507a71..b2b07c9f04 100644
--- a/web/app/components/datasets/hit-testing/components/query-input/index.tsx
+++ b/web/app/components/datasets/hit-testing/components/query-input/index.tsx
@@ -18,7 +18,7 @@ import * as React from 'react'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { v4 as uuid4 } from 'uuid'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import ImageUploaderInRetrievalTesting from '@/app/components/datasets/common/image-uploader/image-uploader-in-retrieval-testing'
 import { getIcon } from '@/app/components/datasets/common/retrieval-method-info'
 import ModifyExternalRetrievalModal from '@/app/components/datasets/hit-testing/modify-external-retrieval-modal'
@@ -205,7 +205,7 @@ const QueryInput = ({
     <div className={cn('relative flex h-80 shrink-0 flex-col overflow-hidden rounded-xl bg-linear-to-r from-components-input-border-active-prompt-1 to-components-input-border-active-prompt-2 p-0.5 shadow-xs')}>
       <div className="flex h-full flex-col overflow-hidden radius-lg bg-background-section-burn">
         <div className="relative flex shrink-0 items-center justify-between p-1.5 pb-1 pl-3">
-          <span className="text-text-secondary system-sm-semibold-uppercase">
+          <span className="system-sm-semibold-uppercase text-text-secondary">
             {t('input.title', { ns: 'datasetHitTesting' })}
           </span>
           {isExternal
@@ -217,7 +217,7 @@ const QueryInput = ({
                 >
                   <RiEqualizer2Line className="h-3.5 w-3.5 text-components-button-secondary-text" />
                   <div className="flex items-center justify-center gap-1 px-[3px]">
-                    <span className="text-components-button-secondary-text system-xs-medium">{t('settingTitle', { ns: 'datasetHitTesting' })}</span>
+                    <span className="system-xs-medium text-components-button-secondary-text">{t('settingTitle', { ns: 'datasetHitTesting' })}</span>
                   </div>
                 </Button>
               )
@@ -227,7 +227,7 @@ const QueryInput = ({
                   className="flex h-7 cursor-pointer items-center space-x-0.5 rounded-lg border-[0.5px] border-components-button-secondary-bg bg-components-button-secondary-bg px-1.5 shadow-xs backdrop-blur-[5px] hover:bg-components-button-secondary-bg-hover"
                 >
                   {icon}
-                  <div className="text-xs font-medium uppercase text-text-secondary">{t(`retrieval.${retrievalMethod}.title`, { ns: 'dataset' })}</div>
+                  <div className="text-xs font-medium text-text-secondary uppercase">{t(`retrieval.${retrievalMethod}.title`, { ns: 'dataset' })}</div>
                   <RiEqualizer2Line className="size-4 text-components-menu-item-text"></RiEqualizer2Line>
                 </div>
               )}
diff --git a/web/app/components/datasets/hit-testing/modify-external-retrieval-modal.tsx b/web/app/components/datasets/hit-testing/modify-external-retrieval-modal.tsx
index 21b2f6b56d..097155f68f 100644
--- a/web/app/components/datasets/hit-testing/modify-external-retrieval-modal.tsx
+++ b/web/app/components/datasets/hit-testing/modify-external-retrieval-modal.tsx
@@ -4,7 +4,7 @@ import {
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import RetrievalSettings from '../external-knowledge-base/create/RetrievalSettings'
 
 type ModifyExternalRetrievalModalProps = {
@@ -42,11 +42,11 @@ const ModifyExternalRetrievalModal: React.FC<ModifyExternalRetrievalModalProps>
   }
 
   return (
-    <div className="shadows-shadow-2xl absolute right-[14px] top-[36px] z-10 flex w-[320px] flex-col items-start rounded-2xl
+    <div className="shadows-shadow-2xl absolute top-[36px] right-[14px] z-10 flex w-[320px] flex-col items-start rounded-2xl
       border-[0.5px] border-components-panel-border bg-components-panel-bg"
     >
       <div className="flex items-center justify-between self-stretch p-4 pb-2">
-        <div className="system-xl-semibold grow text-text-primary">{t('settingTitle', { ns: 'datasetHitTesting' })}</div>
+        <div className="grow system-xl-semibold text-text-primary">{t('settingTitle', { ns: 'datasetHitTesting' })}</div>
         <ActionButton className="ml-auto" onClick={onClose}>
           <RiCloseLine className="h-4 w-4 shrink-0" />
         </ActionButton>
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 da0ee7761f..b85a040073 100644
--- a/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx
+++ b/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx
@@ -6,7 +6,7 @@ import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { isReRankModelSelected } from '@/app/components/datasets/common/check-rerank-model'
 import EconomicalRetrievalMethodConfig from '@/app/components/datasets/common/economical-retrieval-method-config'
@@ -74,10 +74,10 @@ const ModifyRetrievalModal: FC<Props> = ({ indexMethod, value, isShow, onHide, o
       }}
       ref={ref}
     >
-      <div className="h-15 flex shrink-0 justify-between px-3 pb-1 pt-3.5">
+      <div className="flex h-15 shrink-0 justify-between px-3 pt-3.5 pb-1">
         <div className="text-base font-semibold text-text-primary">
           <div>{t('form.retrievalSetting.title', { ns: 'datasetSettings' })}</div>
-          <div className="text-xs font-normal leading-[18px] text-text-tertiary">
+          <div className="text-xs leading-[18px] font-normal text-text-tertiary">
             <a target="_blank" rel="noopener noreferrer" href={docLink('/use-dify/knowledge/create-knowledge/setting-indexing-methods')} className="text-text-accent">
               {t('form.retrievalSetting.learnMore', { ns: 'datasetSettings' })}
             </a>
@@ -92,7 +92,7 @@ const ModifyRetrievalModal: FC<Props> = ({ indexMethod, value, isShow, onHide, o
       </div>
 
       <div className="px-4 py-2">
-        <div className="mb-1 text-[13px] font-semibold leading-6 text-text-secondary">
+        <div className="mb-1 text-[13px] leading-6 font-semibold text-text-secondary">
           {t('form.retrievalSetting.method', { ns: 'datasetSettings' })}
         </div>
         {indexMethod === 'high_quality'
diff --git a/web/app/components/datasets/list/index.tsx b/web/app/components/datasets/list/index.tsx
index 071e5cc855..fae469dc9e 100644
--- a/web/app/components/datasets/list/index.tsx
+++ b/web/app/components/datasets/list/index.tsx
@@ -5,13 +5,13 @@ import { useBoolean, useDebounceFn } from 'ahooks'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import Button from '@/app/components/base/button'
 import { ApiConnectionMod } from '@/app/components/base/icons/src/vender/solid/development'
 import Input from '@/app/components/base/input'
 import TagManagementModal from '@/app/components/base/tag-management'
 import TagFilter from '@/app/components/base/tag-management/filter'
 // Hooks
 import { useStore as useTagStore } from '@/app/components/base/tag-management/store'
+import { Button } from '@/app/components/base/ui/button'
 import CheckboxWithLabel from '@/app/components/datasets/create/website/base/checkbox-with-label'
 import { useAppContext, useSelector as useAppContextSelector } from '@/context/app-context'
 import { useExternalApiPanel } from '@/context/external-api-panel-context'
@@ -57,7 +57,7 @@ const List = () => {
 
   return (
     <div className="scroll-container relative flex grow flex-col overflow-y-auto bg-background-body">
-      <div className="sticky top-0 z-10 flex items-center justify-end gap-x-1 bg-background-body px-12 pb-2 pt-4">
+      <div className="sticky top-0 z-10 flex items-center justify-end gap-x-1 bg-background-body px-12 pt-4 pb-2">
         <div className="flex items-center justify-center gap-2">
           {isCurrentWorkspaceOwner && (
             <CheckboxWithLabel
@@ -89,7 +89,7 @@ const List = () => {
             onClick={() => setShowExternalApiPanel(true)}
           >
             <ApiConnectionMod className="h-4 w-4 text-components-button-secondary-text" />
-            <div className="flex items-center justify-center gap-1 px-0.5 text-components-button-secondary-text system-sm-medium">{t('externalAPIPanelTitle', { ns: 'dataset' })}</div>
+            <div className="flex items-center justify-center gap-1 px-0.5 system-sm-medium text-components-button-secondary-text">{t('externalAPIPanelTitle', { ns: 'dataset' })}</div>
           </Button>
         </div>
       </div>
diff --git a/web/app/components/datasets/metadata/add-metadata-button.tsx b/web/app/components/datasets/metadata/add-metadata-button.tsx
index 6c920f5b49..47f50cdecc 100644
--- a/web/app/components/datasets/metadata/add-metadata-button.tsx
+++ b/web/app/components/datasets/metadata/add-metadata-button.tsx
@@ -3,8 +3,8 @@ import type { FC } from 'react'
 import { RiAddLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
-import Button from '../../base/button'
 
 type Props = {
   className?: string
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx
index e50a45e7c5..2dfff611ed 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx
@@ -7,9 +7,9 @@ import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useCreateMetaData } from '@/service/knowledge/use-metadata'
-import Button from '../../../base/button'
 import Checkbox from '../../../base/checkbox'
 import Modal from '../../../base/modal'
 import Tooltip from '../../../base/tooltip'
@@ -92,14 +92,14 @@ const EditMetadataBatchModal: FC<Props> = ({ datasetId, documentNum, list, onSav
   }, [templeList, addedList, isApplyToAllSelectDocument, onSave])
   return (
     <Modal title={t(`${i18nPrefix}.editMetadata`, { ns: 'dataset' })} isShow closable onClose={onHide} className="!max-w-[640px]">
-      <div className="mt-1 text-text-accent system-xs-medium">{t(`${i18nPrefix}.editDocumentsNum`, { ns: 'dataset', num: documentNum })}</div>
-      <div className="max-h-[305px] overflow-y-auto overflow-x-hidden">
+      <div className="mt-1 system-xs-medium text-text-accent">{t(`${i18nPrefix}.editDocumentsNum`, { ns: 'dataset', num: documentNum })}</div>
+      <div className="max-h-[305px] overflow-x-hidden overflow-y-auto">
         <div className="mt-4 space-y-2">
           {templeList.map(item => (<EditMetadataBatchItem key={item.id} payload={item} onChange={handleTemplesChange} onRemove={handleTempleItemRemove} onReset={handleItemReset} />))}
         </div>
         <div className="mt-4 pl-[18px]">
           <div className="flex items-center">
-            <div className="mr-2 shrink-0 text-text-tertiary system-xs-medium-uppercase">{t('metadata.createMetadata.title', { ns: 'dataset' })}</div>
+            <div className="mr-2 shrink-0 system-xs-medium-uppercase text-text-tertiary">{t('metadata.createMetadata.title', { ns: 'dataset' })}</div>
             <Divider bgStyle="gradient" />
           </div>
           <div className="mt-2 space-y-2">
@@ -112,9 +112,9 @@ const EditMetadataBatchModal: FC<Props> = ({ datasetId, documentNum, list, onSav
       </div>
 
       <div className="mt-4 flex items-center justify-between">
-        <div className="flex select-none items-center">
+        <div className="flex items-center select-none">
           <Checkbox checked={isApplyToAllSelectDocument} onCheck={() => setIsApplyToAllSelectDocument(!isApplyToAllSelectDocument)} id="apply-to-all" />
-          <div className="ml-2 mr-1 text-text-secondary system-xs-medium">{t(`${i18nPrefix}.applyToAllSelectDocument`, { ns: 'dataset' })}</div>
+          <div className="mr-1 ml-2 system-xs-medium text-text-secondary">{t(`${i18nPrefix}.applyToAllSelectDocument`, { ns: 'dataset' })}</div>
           <Tooltip popupContent={<div className="max-w-[240px]">{t(`${i18nPrefix}.applyToAllSelectDocumentTip`, { ns: 'dataset' })}</div>}>
             <div className="cursor-pointer p-px">
               <RiQuestionLine className="size-3.5 text-text-tertiary" />
diff --git a/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx b/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx
index 74ceae4be3..24b2fdc363 100644
--- a/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx
+++ b/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx
@@ -6,13 +6,13 @@ import { useBoolean, useHover } from 'ahooks'
 import * as React from 'react'
 import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'
 import Drawer from '@/app/components/base/drawer'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
 import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import CreateModal from '@/app/components/datasets/metadata/metadata-dataset/create-metadata-modal'
 import { cn } from '@/utils/classnames'
@@ -75,17 +75,17 @@ const Item: FC<ItemProps> = ({
     >
       <div
         className={cn(
-          'flex h-8 items-center justify-between  px-2',
+          'flex h-8 items-center justify-between px-2',
           disabled && 'opacity-30', // not include border and bg
         )}
       >
         <div className="flex h-full items-center space-x-1 text-text-tertiary">
           <Icon className="size-4 shrink-0" />
-          <div className="system-sm-medium max-w-[250px] truncate text-text-primary">{payload.name}</div>
-          <div className="system-xs-regular shrink-0">{payload.type}</div>
+          <div className="max-w-[250px] truncate system-sm-medium text-text-primary">{payload.name}</div>
+          <div className="shrink-0 system-xs-regular">{payload.type}</div>
         </div>
         {(!readonly || disabled) && (
-          <div className="system-xs-regular ml-2 shrink-0 text-text-tertiary group-hover/item:hidden">
+          <div className="ml-2 shrink-0 system-xs-regular text-text-tertiary group-hover/item:hidden">
             {disabled ? t(`${i18nPrefix}.disabled`, { ns: 'dataset' }) : t(`${i18nPrefix}.values`, { ns: 'dataset', num: payload.count || 0 })}
           </div>
         )}
@@ -198,7 +198,7 @@ const DatasetMetadataDrawer: FC<Props> = ({
             value={isBuiltInEnabled}
             onChange={onIsBuiltInEnabledChange}
           />
-          <div className="system-sm-semibold ml-2 mr-0.5 text-text-secondary">{t(`${i18nPrefix}.builtIn`, { ns: 'dataset' })}</div>
+          <div className="mr-0.5 ml-2 system-sm-semibold text-text-secondary">{t(`${i18nPrefix}.builtIn`, { ns: 'dataset' })}</div>
           <Tooltip popupContent={<div className="max-w-[100px]">{t(`${i18nPrefix}.builtInDescription`, { ns: 'dataset' })}</div>} />
         </div>
 
diff --git a/web/app/components/datasets/metadata/metadata-document/index.tsx b/web/app/components/datasets/metadata/metadata-document/index.tsx
index 68d9d7bf75..28c4f9a2ed 100644
--- a/web/app/components/datasets/metadata/metadata-document/index.tsx
+++ b/web/app/components/datasets/metadata/metadata-document/index.tsx
@@ -4,8 +4,8 @@ import type { FullDocumentDetail } from '@/models/datasets'
 import { RiEditLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import useMetadataDocument from '../hooks/use-metadata-document'
 import InfoGroup from './info-group'
diff --git a/web/app/components/datasets/metadata/metadata-document/no-data.tsx b/web/app/components/datasets/metadata/metadata-document/no-data.tsx
index b64b5ca126..e444827f1d 100644
--- a/web/app/components/datasets/metadata/metadata-document/no-data.tsx
+++ b/web/app/components/datasets/metadata/metadata-document/no-data.tsx
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import { RiArrowRightLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 
 type Props = {
   onStart: () => void
@@ -15,8 +15,8 @@ const NoData: FC<Props> = ({
   const { t } = useTranslation()
   return (
     <div className="rounded-xl bg-linear-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 p-4 pt-3">
-      <div className="text-xs font-semibold leading-5 text-text-secondary">{t('metadata.metadata', { ns: 'dataset' })}</div>
-      <div className="system-xs-regular mt-1 text-text-tertiary">{t('metadata.documentMetadata.metadataToolTip', { ns: 'dataset' })}</div>
+      <div className="text-xs leading-5 font-semibold text-text-secondary">{t('metadata.metadata', { ns: 'dataset' })}</div>
+      <div className="mt-1 system-xs-regular text-text-tertiary">{t('metadata.documentMetadata.metadataToolTip', { ns: 'dataset' })}</div>
       <Button variant="primary" className="mt-2" onClick={onStart}>
         <div>{t('metadata.documentMetadata.startLabeling', { ns: 'dataset' })}</div>
         <RiArrowRightLine className="ml-1 size-4" />
diff --git a/web/app/components/datasets/rename-modal/index.tsx b/web/app/components/datasets/rename-modal/index.tsx
index ca3d09b00b..422851be24 100644
--- a/web/app/components/datasets/rename-modal/index.tsx
+++ b/web/app/components/datasets/rename-modal/index.tsx
@@ -6,10 +6,10 @@ import { RiCloseLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
 import Textarea from '@/app/components/base/textarea'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { updateDatasetSetting } from '@/service/datasets'
 import { cn } from '@/utils/classnames'
@@ -91,14 +91,14 @@ const RenameDatasetModal = ({ show, dataset, onSuccess, onClose }: RenameDataset
   return (
     <Modal className="w-[520px] max-w-[520px] rounded-xl px-8 py-6" isShow={show} onClose={noop}>
       <div className="flex items-center justify-between pb-2">
-        <div className="text-xl font-medium leading-[30px] text-text-primary">{t('title', { ns: 'datasetSettings' })}</div>
+        <div className="text-xl leading-[30px] font-medium text-text-primary">{t('title', { ns: 'datasetSettings' })}</div>
         <div className="cursor-pointer p-2" onClick={onClose}>
           <RiCloseLine className="h-4 w-4 text-text-tertiary" />
         </div>
       </div>
       <div>
         <div className={cn('flex flex-col py-4')}>
-          <div className="shrink-0 py-2 text-sm font-medium leading-[20px] text-text-primary">
+          <div className="shrink-0 py-2 text-sm leading-[20px] font-medium text-text-primary">
             {t('form.name', { ns: 'datasetSettings' })}
           </div>
           <div className="flex items-center gap-x-2">
@@ -107,7 +107,7 @@ const RenameDatasetModal = ({ show, dataset, onSuccess, onClose }: RenameDataset
           </div>
         </div>
         <div className={cn('flex flex-col py-4')}>
-          <div className="shrink-0 py-2 text-sm font-medium leading-[20px] text-text-primary">
+          <div className="shrink-0 py-2 text-sm leading-[20px] font-medium text-text-primary">
             {t('form.desc', { ns: 'datasetSettings' })}
           </div>
           <div className="w-full">
diff --git a/web/app/components/datasets/settings/form/index.tsx b/web/app/components/datasets/settings/form/index.tsx
index f060701f1c..99ebf84307 100644
--- a/web/app/components/datasets/settings/form/index.tsx
+++ b/web/app/components/datasets/settings/form/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
+import { Button } from '@/app/components/base/ui/button'
 import BasicInfoSection from './components/basic-info-section'
 import ExternalKnowledgeSection from './components/external-knowledge-section'
 import IndexingSection from './components/indexing-section'
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 16bdc15ce2..575ad93e88 100644
--- a/web/app/components/develop/secret-key/secret-key-button.tsx
+++ b/web/app/components/develop/secret-key/secret-key-button.tsx
@@ -2,7 +2,7 @@
 import { RiKey2Line } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import SecretKeyModal from '@/app/components/develop/secret-key/secret-key-modal'
 
 type ISecretKeyButtonProps = {
@@ -25,7 +25,7 @@ const SecretKeyButton = ({ className, appId, textCls }: ISecretKeyButtonProps) =
         <div className="flex h-3.5 w-3.5 items-center justify-center">
           <RiKey2Line className="h-3.5 w-3.5 text-text-tertiary" />
         </div>
-        <div className={`system-xs-medium px-[3px] text-text-tertiary ${textCls}`}>{t('apiKey', { ns: 'appApi' })}</div>
+        <div className={`px-[3px] system-xs-medium text-text-tertiary ${textCls}`}>{t('apiKey', { ns: 'appApi' })}</div>
       </Button>
       <SecretKeyModal isShow={isVisible} onClose={() => setVisible(false)} appId={appId} />
     </>
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 6280a3220c..85bcd0db1c 100644
--- a/web/app/components/develop/secret-key/secret-key-generate.tsx
+++ b/web/app/components/develop/secret-key/secret-key-generate.tsx
@@ -2,8 +2,8 @@
 import type { CreateApiKeyResponse } from '@/models/app'
 import { XMarkIcon } from '@heroicons/react/20/solid'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import InputCopy from './input-copy'
 import s from './style.module.css'
 
@@ -23,10 +23,10 @@ const SecretKeyGenerateModal = ({
   const { t } = useTranslation()
   return (
     <Modal isShow={isShow} onClose={onClose} title={`${t('apiKeyModal.apiSecretKey', { ns: 'appApi' })}`} className={`px-8 ${className}`}>
-      <div className="-mr-2 -mt-6 mb-4 flex justify-end">
+      <div className="-mt-6 -mr-2 mb-4 flex justify-end">
         <XMarkIcon className="h-6 w-6 cursor-pointer text-text-tertiary" onClick={onClose} />
       </div>
-      <p className="mt-1 text-[13px] font-normal leading-5 text-text-tertiary">{t('apiKeyModal.generateTips', { ns: 'appApi' })}</p>
+      <p className="mt-1 text-[13px] leading-5 font-normal text-text-tertiary">{t('apiKeyModal.generateTips', { ns: 'appApi' })}</p>
       <div className="my-4">
         <InputCopy className="w-full" value={newKey?.token} />
       </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 238d949500..ec83251ec6 100644
--- a/web/app/components/develop/secret-key/secret-key-modal.tsx
+++ b/web/app/components/develop/secret-key/secret-key-modal.tsx
@@ -7,11 +7,11 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'
 import CopyFeedback from '@/app/components/base/copy-feedback'
 import Loading from '@/app/components/base/loading'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { useAppContext } from '@/context/app-context'
 import useTimestamp from '@/hooks/use-timestamp'
 import {
@@ -89,10 +89,10 @@ const SecretKeyModal = ({
 
   return (
     <Modal isShow={isShow} onClose={onClose} title={`${t('apiKeyModal.apiSecretKey', { ns: 'appApi' })}`} className={`${s.customModal} flex flex-col px-8`}>
-      <div className="-mr-2 -mt-6 mb-4 flex justify-end">
+      <div className="-mt-6 -mr-2 mb-4 flex justify-end">
         <XMarkIcon className="h-6 w-6 cursor-pointer text-text-tertiary" onClick={onClose} />
       </div>
-      <p className="mt-1 shrink-0 text-[13px] font-normal leading-5 text-text-tertiary">{t('apiKeyModal.apiSecretKeyTips', { ns: 'appApi' })}</p>
+      <p className="mt-1 shrink-0 text-[13px] leading-5 font-normal text-text-tertiary">{t('apiKeyModal.apiSecretKeyTips', { ns: 'appApi' })}</p>
       {isApiKeysLoading && <div className="mt-4"><Loading /></div>}
       {
         !!apiKeysList?.data?.length && (
diff --git a/web/app/components/explore/app-card/index.tsx b/web/app/components/explore/app-card/index.tsx
index 56bbc4f450..ac2397f6ab 100644
--- a/web/app/components/explore/app-card/index.tsx
+++ b/web/app/components/explore/app-card/index.tsx
@@ -5,11 +5,11 @@ import { PlusIcon } from '@heroicons/react/20/solid'
 import { RiInformation2Line } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
+import { Button } from '@/app/components/base/ui/button'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { AppModeEnum } from '@/types/app'
 import { cn } from '@/utils/classnames'
 import { AppTypeIcon } from '../../app/type-selector'
-import Button from '../../base/button'
 
 export type AppCardProps = {
   app: App
@@ -36,7 +36,7 @@ const AppCard = ({
 
   return (
     <div className={cn('group relative col-span-1 flex cursor-pointer flex-col overflow-hidden rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg pb-2 shadow-sm transition-all duration-200 ease-in-out hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-lg')}>
-      <div className="flex h-[66px] shrink-0 grow-0 items-center gap-3 px-[14px] pb-3 pt-[14px]">
+      <div className="flex h-[66px] shrink-0 grow-0 items-center gap-3 px-[14px] pt-[14px] pb-3">
         <div className="relative shrink-0">
           <AppIcon
             size="large"
@@ -52,10 +52,10 @@ const AppCard = ({
           />
         </div>
         <div className="w-0 grow py-px">
-          <div className="flex items-center text-sm font-semibold leading-5 text-text-secondary">
+          <div className="flex items-center text-sm leading-5 font-semibold text-text-secondary">
             <div className="truncate" title={appBasicInfo.name}>{appBasicInfo.name}</div>
           </div>
-          <div className="flex items-center text-[10px] font-medium leading-[18px] text-text-tertiary">
+          <div className="flex items-center text-[10px] leading-[18px] font-medium text-text-tertiary">
             {appBasicInfo.mode === AppModeEnum.ADVANCED_CHAT && <div className="truncate">{t('types.advanced', { ns: 'app' }).toUpperCase()}</div>}
             {appBasicInfo.mode === AppModeEnum.CHAT && <div className="truncate">{t('types.chatbot', { ns: 'app' }).toUpperCase()}</div>}
             {appBasicInfo.mode === AppModeEnum.AGENT_CHAT && <div className="truncate">{t('types.agent', { ns: 'app' }).toUpperCase()}</div>}
@@ -64,13 +64,13 @@ const AppCard = ({
           </div>
         </div>
       </div>
-      <div className="description-wrapper h-[90px] px-[14px] text-text-tertiary system-xs-regular">
+      <div className="description-wrapper h-[90px] px-[14px] system-xs-regular text-text-tertiary">
         <div className="line-clamp-4 group-hover:line-clamp-2">
           {app.description}
         </div>
       </div>
       {isExplore && (canCreate || isTrialApp) && (
-        <div className={cn('absolute bottom-0 left-0 right-0 hidden bg-linear-to-t from-components-panel-gradient-2 from-[60.27%] to-transparent p-4 pt-8 group-hover:flex')}>
+        <div className={cn('absolute right-0 bottom-0 left-0 hidden bg-linear-to-t from-components-panel-gradient-2 from-[60.27%] to-transparent p-4 pt-8 group-hover:flex')}>
           <div className={cn('grid h-8 w-full grid-cols-1 space-x-2', canCreate && 'grid-cols-2')}>
             {
               canCreate && (
diff --git a/web/app/components/explore/app-list/index.tsx b/web/app/components/explore/app-list/index.tsx
index d508f141b4..1261c0949c 100644
--- a/web/app/components/explore/app-list/index.tsx
+++ b/web/app/components/explore/app-list/index.tsx
@@ -9,9 +9,9 @@ import * as React from 'react'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import DSLConfirmModal from '@/app/components/app/create-from-dsl-modal/dsl-confirm-modal'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Loading from '@/app/components/base/loading'
+import { Button } from '@/app/components/base/ui/button'
 import AppCard from '@/app/components/explore/app-card'
 import Banner from '@/app/components/explore/banner/banner'
 import Category from '@/app/components/explore/category'
@@ -181,7 +181,7 @@ const Apps = ({
           )}
           >
             <div className="flex items-center">
-              <div className="grow truncate text-text-primary system-xl-semibold">{!hasFilterCondition ? t('apps.title', { ns: 'explore' }) : t('apps.resultNum', { num: searchFilteredList.length, ns: 'explore' })}</div>
+              <div className="grow truncate system-xl-semibold text-text-primary">{!hasFilterCondition ? t('apps.title', { ns: 'explore' }) : t('apps.resultNum', { num: searchFilteredList.length, ns: 'explore' })}</div>
               {hasFilterCondition && (
                 <>
                   <div className="mx-3 h-4 w-px bg-divider-regular"></div>
@@ -199,7 +199,7 @@ const Apps = ({
             />
           </div>
 
-          <div className="px-12 pb-4 pt-2">
+          <div className="px-12 pt-2 pb-4">
             <Category
               list={categories}
               value={currCategory}
diff --git a/web/app/components/explore/create-app-modal/index.tsx b/web/app/components/explore/create-app-modal/index.tsx
index 931d41ff86..8f12409442 100644
--- a/web/app/components/explore/create-app-modal/index.tsx
+++ b/web/app/components/explore/create-app-modal/index.tsx
@@ -7,11 +7,11 @@ import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
 import Switch from '@/app/components/base/switch'
 import Textarea from '@/app/components/base/textarea'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import { useProviderContext } from '@/context/provider-context'
@@ -119,19 +119,19 @@ const CreateAppModal = ({
         onClose={noop}
         className="relative max-w-[480px]! px-8"
       >
-        <div className="absolute right-4 top-4 cursor-pointer p-2" onClick={onHide}>
+        <div className="absolute top-4 right-4 cursor-pointer p-2" onClick={onHide}>
           <RiCloseLine className="h-4 w-4 text-text-tertiary" />
         </div>
         {isEditModal && (
-          <div className="mb-9 text-xl font-semibold leading-[30px] text-text-primary">{t('editAppTitle', { ns: 'app' })}</div>
+          <div className="mb-9 text-xl leading-[30px] font-semibold text-text-primary">{t('editAppTitle', { ns: 'app' })}</div>
         )}
         {!isEditModal && (
-          <div className="mb-9 text-xl font-semibold leading-[30px] text-text-primary">{t('appCustomize.title', { ns: 'explore', name: appName })}</div>
+          <div className="mb-9 text-xl leading-[30px] font-semibold text-text-primary">{t('appCustomize.title', { ns: 'explore', name: appName })}</div>
         )}
         <div className="mb-9">
           {/* icon & name */}
           <div className="pt-2">
-            <div className="py-2 text-sm font-medium leading-[20px] text-text-primary">{t('newApp.captionName', { ns: 'app' })}</div>
+            <div className="py-2 text-sm leading-[20px] font-medium text-text-primary">{t('newApp.captionName', { ns: 'app' })}</div>
             <div className="flex items-center justify-between space-x-2">
               <AppIcon
                 size="large"
@@ -152,7 +152,7 @@ const CreateAppModal = ({
           </div>
           {/* description */}
           <div className="pt-2">
-            <div className="py-2 text-sm font-medium leading-[20px] text-text-primary">{t('newApp.captionDescription', { ns: 'app' })}</div>
+            <div className="py-2 text-sm leading-[20px] font-medium text-text-primary">{t('newApp.captionDescription', { ns: 'app' })}</div>
             <Textarea
               className="resize-none"
               placeholder={t('newApp.appDescriptionPlaceholder', { ns: 'app' }) || ''}
@@ -164,7 +164,7 @@ const CreateAppModal = ({
           {isEditModal && (appMode === AppModeEnum.CHAT || appMode === AppModeEnum.ADVANCED_CHAT || appMode === AppModeEnum.AGENT_CHAT) && (
             <div className="pt-2">
               <div className="flex items-center justify-between">
-                <div className="py-2 text-sm font-medium leading-[20px] text-text-primary">{t('answerIcon.title', { ns: 'app' })}</div>
+                <div className="py-2 text-sm leading-[20px] font-medium text-text-primary">{t('answerIcon.title', { ns: 'app' })}</div>
                 <Switch
                   value={useIconAsAnswerIcon}
                   onChange={v => setUseIconAsAnswerIcon(v)}
@@ -175,7 +175,7 @@ const CreateAppModal = ({
           )}
           {isEditModal && (
             <div className="pt-2">
-              <div className="mb-2 mt-2 text-sm font-medium leading-[20px] text-text-primary">{t('maxActiveRequests', { ns: 'app' })}</div>
+              <div className="mt-2 mb-2 text-sm leading-[20px] font-medium text-text-primary">{t('maxActiveRequests', { ns: 'app' })}</div>
               <Input
                 type="number"
                 min={1}
@@ -186,7 +186,7 @@ const CreateAppModal = ({
                 }}
                 className="h-10 w-full"
               />
-              <p className="body-xs-regular mb-0 mt-2 text-text-tertiary">{t('maxActiveRequestsTip', { ns: 'app' })}</p>
+              <p className="mt-2 mb-0 body-xs-regular text-text-tertiary">{t('maxActiveRequestsTip', { ns: 'app' })}</p>
             </div>
           )}
           {!isEditModal && isAppsFull && <AppsFull className="mt-4" loc="app-explore-create" />}
diff --git a/web/app/components/explore/try-app/app-info/index.tsx b/web/app/components/explore/try-app/app-info/index.tsx
index c6e9f9547b..de8e317a6b 100644
--- a/web/app/components/explore/try-app/app-info/index.tsx
+++ b/web/app/components/explore/try-app/app-info/index.tsx
@@ -5,7 +5,7 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { AppTypeIcon } from '@/app/components/app/type-selector'
 import AppIcon from '@/app/components/base/app-icon'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import useGetRequirements from './use-get-requirements'
 
@@ -78,10 +78,10 @@ const AppInfo: FC<Props> = ({
           />
         </div>
         <div className="w-0 grow py-px">
-          <div className="flex items-center text-sm font-semibold leading-5 text-text-secondary">
+          <div className="flex items-center text-sm leading-5 font-semibold text-text-secondary">
             <div className="truncate" title={appDetail.name}>{appDetail.name}</div>
           </div>
-          <div className="flex items-center text-[10px] font-medium leading-[18px] text-text-tertiary">
+          <div className="flex items-center text-[10px] leading-[18px] font-medium text-text-tertiary">
             {mode === 'advanced-chat' && <div className="truncate">{t('types.advanced', { ns: 'app' }).toUpperCase()}</div>}
             {mode === 'chat' && <div className="truncate">{t('types.chatbot', { ns: 'app' }).toUpperCase()}</div>}
             {mode === 'agent-chat' && <div className="truncate">{t('types.agent', { ns: 'app' }).toUpperCase()}</div>}
@@ -91,17 +91,17 @@ const AppInfo: FC<Props> = ({
         </div>
       </div>
       {appDetail.description && (
-        <div className="mt-[14px] shrink-0 text-text-secondary system-sm-regular">{appDetail.description}</div>
+        <div className="mt-[14px] shrink-0 system-sm-regular text-text-secondary">{appDetail.description}</div>
       )}
       <Button variant="primary" className="mt-3 flex w-full max-w-full" onClick={onCreate}>
-        <span className="i-ri-add-line mr-1 size-4 shrink-0" />
+        <span className="mr-1 i-ri-add-line size-4 shrink-0" />
         <span className="truncate">{t('tryApp.createFromSampleApp', { ns: 'explore' })}</span>
       </Button>
 
       {category && (
         <div className="mt-6 shrink-0">
           <div className={headerClassName}>{t('tryApp.category', { ns: 'explore' })}</div>
-          <div className="text-text-secondary system-md-regular">{category}</div>
+          <div className="system-md-regular text-text-secondary">{category}</div>
         </div>
       )}
       {requirements.length > 0 && (
@@ -111,7 +111,7 @@ const AppInfo: FC<Props> = ({
             {requirements.map(item => (
               <div className="flex items-center space-x-2 py-1" key={item.name}>
                 <RequirementIcon iconUrl={item.iconUrl} />
-                <div className="w-0 grow truncate text-text-secondary system-md-regular">{item.name}</div>
+                <div className="w-0 grow truncate system-md-regular text-text-secondary">{item.name}</div>
               </div>
             ))}
           </div>
diff --git a/web/app/components/explore/try-app/index.tsx b/web/app/components/explore/try-app/index.tsx
index 9165695e33..19fccc72ab 100644
--- a/web/app/components/explore/try-app/index.tsx
+++ b/web/app/components/explore/try-app/index.tsx
@@ -7,10 +7,10 @@ import { useState } from 'react'
 import AppUnavailable from '@/app/components/base/app-unavailable'
 import Loading from '@/app/components/base/loading'
 import Modal from '@/app/components/base/modal/index'
+import { Button } from '@/app/components/base/ui/button'
 import { IS_CLOUD_EDITION } from '@/config'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useGetTryAppInfo } from '@/service/use-try-app'
-import Button from '../../base/button'
 import App from './app'
 import AppInfo from './app-info'
 import Preview from './preview'
@@ -42,7 +42,7 @@ const TryApp: FC<Props> = ({
     <Modal
       isShow
       onClose={onClose}
-      className="h-[calc(100vh-32px)] min-w-[1280px] max-w-[calc(100vw-32px)] overflow-x-auto p-2"
+      className="h-[calc(100vh-32px)] max-w-[calc(100vw-32px)] min-w-[1280px] overflow-x-auto p-2"
     >
       {isLoading ? (
         <div className="flex h-full items-center justify-center">
diff --git a/web/app/components/header/account-about/index.tsx b/web/app/components/header/account-about/index.tsx
index 4cf7d745b6..cdab2815dc 100644
--- a/web/app/components/header/account-about/index.tsx
+++ b/web/app/components/header/account-about/index.tsx
@@ -3,9 +3,9 @@ import type { LangGeniusVersionResponse } from '@/models/common'
 import { RiCloseLine } from '@remixicon/react'
 import dayjs from 'dayjs'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { IS_CE_EDITION } from '@/config'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 
@@ -31,7 +31,7 @@ export default function AccountAbout({
       className="w-[480px]! max-w-[480px]! px-6! py-4!"
     >
       <div className="relative">
-        <div className="absolute right-0 top-0 flex h-8 w-8 cursor-pointer items-center justify-center" onClick={onCancel}>
+        <div className="absolute top-0 right-0 flex h-8 w-8 cursor-pointer items-center justify-center" onClick={onCancel}>
           <RiCloseLine className="h-4 w-4 text-text-tertiary" />
         </div>
         <div className="flex flex-col items-center gap-4 py-8">
diff --git a/web/app/components/header/account-dropdown/__tests__/compliance.spec.tsx b/web/app/components/header/account-dropdown/__tests__/compliance.spec.tsx
index 01f3460e7d..8165434b3a 100644
--- a/web/app/components/header/account-dropdown/__tests__/compliance.spec.tsx
+++ b/web/app/components/header/account-dropdown/__tests__/compliance.spec.tsx
@@ -89,6 +89,10 @@ describe('Compliance', () => {
     fireEvent.click(screen.getByText('common.userProfile.compliance'))
   }
 
+  const getComplianceMenuItem = (label: string) => {
+    return screen.getByText(label).closest('[role="menuitem"]')
+  }
+
   describe('Rendering', () => {
     it('should render compliance menu trigger', () => {
       // Act
@@ -239,15 +243,16 @@ describe('Compliance', () => {
 
       // Act
       openMenuAndRender()
-      const downloadButtons = screen.getAllByText('common.operation.download')
-      fireEvent.click(downloadButtons[0])
+      const menuItem = getComplianceMenuItem('common.compliance.soc2Type1')
+      expect(menuItem).not.toBeNull()
+      fireEvent.click(menuItem!)
 
-      // Assert - btn-disabled class and spinner should appear while mutation is pending
+      // Assert - button should become busy while mutation is pending
       await waitFor(() => {
-        const menuItem = screen.getByText('common.compliance.soc2Type1').closest('[role="menuitem"]')
-        expect(menuItem).not.toBeNull()
-        const disabledBtn = menuItem!.querySelector('.cursor-not-allowed')
-        expect(disabledBtn).not.toBeNull()
+        const busyButton = menuItem!.querySelector('button[aria-busy="true"]')
+        expect(busyButton).not.toBeNull()
+        expect(busyButton).toBeDisabled()
+        expect(busyButton!.querySelector('.animate-spin')).not.toBeNull()
       }, { timeout: 10000 })
 
       // Cleanup: resolve the pending promise
@@ -271,21 +276,22 @@ describe('Compliance', () => {
       })
 
       openMenuAndRender()
-      const downloadButtons = screen.getAllByText('common.operation.download')
+      const menuItem = getComplianceMenuItem('common.compliance.soc2Type1')
+      expect(menuItem).not.toBeNull()
 
       // First click starts download
-      fireEvent.click(downloadButtons[0])
+      fireEvent.click(menuItem!)
 
       // Wait for mutation to start and React to re-render (isPending=true)
       await waitFor(() => {
-        const menuItem = screen.getByText('common.compliance.soc2Type1').closest('[role="menuitem"]')
-        const el = menuItem!.querySelector('.cursor-not-allowed')
-        expect(el).not.toBeNull()
+        const busyButton = menuItem!.querySelector('button[aria-busy="true"]')
+        expect(busyButton).not.toBeNull()
+        expect(busyButton).toBeDisabled()
         expect(getDocDownloadUrl).toHaveBeenCalledTimes(1)
       }, { timeout: 10000 })
 
       // Second click while pending - should be guarded by isPending check
-      fireEvent.click(downloadButtons[0])
+      fireEvent.click(menuItem!)
 
       resolveDownload!({ url: 'http://example.com/doc.pdf' })
       await waitFor(() => {
diff --git a/web/app/components/header/account-dropdown/compliance.tsx b/web/app/components/header/account-dropdown/compliance.tsx
index 41c1e81910..2f79c631fb 100644
--- a/web/app/components/header/account-dropdown/compliance.tsx
+++ b/web/app/components/header/account-dropdown/compliance.tsx
@@ -2,6 +2,7 @@ import type { ReactNode } from 'react'
 import { useMutation } from '@tanstack/react-query'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
+import { Button } from '@/app/components/base/ui/button'
 import { DropdownMenuGroup, DropdownMenuItem, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger } from '@/app/components/base/ui/dropdown-menu'
 import { toast } from '@/app/components/base/ui/toast'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
@@ -10,14 +11,12 @@ import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/con
 import { useModalContext } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
 import { getDocDownloadUrl } from '@/service/common'
-import { cn } from '@/utils/classnames'
 import { downloadUrl } from '@/utils/download'
 import Gdpr from '../../base/icons/src/public/common/Gdpr'
 import Iso from '../../base/icons/src/public/common/Iso'
 import Soc2 from '../../base/icons/src/public/common/Soc2'
 import SparklesSoft from '../../base/icons/src/public/common/SparklesSoft'
 import PremiumBadge from '../../base/premium-badge'
-import Spinner from '../../base/spinner'
 import { MenuItemContent } from './menu-item-content'
 
 enum DocName {
@@ -44,18 +43,16 @@ function ComplianceDocActionVisual({
 }: ComplianceDocActionVisualProps) {
   if (isCurrentPlanCanDownload) {
     return (
-      <div
+      <Button
+        size="small"
+        disabled={isPending}
+        loading={isPending}
         aria-hidden
-        data-disabled={isPending || undefined}
-        className={cn(
-          'btn btn-small btn-secondary pointer-events-none flex items-center gap-px',
-          isPending && 'cursor-not-allowed',
-        )}
+        className="pointer-events-none flex items-center gap-px"
       >
         <span className="i-ri-arrow-down-circle-line size-[14px] text-components-button-secondary-text-disabled" />
-        <span className="px-[3px] text-components-button-secondary-text system-xs-medium">{downloadText}</span>
-        {isPending && <Spinner loading={true} className="ml-1! h-3! w-3! border-2! text-text-tertiary!" />}
-      </div>
+        <span className="px-[3px] system-xs-medium text-components-button-secondary-text">{downloadText}</span>
+      </Button>
     )
   }
 
@@ -146,12 +143,12 @@ function ComplianceDocRowItem({
 
   return (
     <DropdownMenuItem
-      className="h-10 justify-between py-1 pl-1 pr-2"
+      className="h-10 justify-between py-1 pr-2 pl-1"
       closeOnClick={!isCurrentPlanCanDownload}
       onClick={handleSelect}
     >
       {icon}
-      <div className="grow truncate px-1 text-text-secondary system-md-regular">{label}</div>
+      <div className="grow truncate px-1 system-md-regular text-text-secondary">{label}</div>
       <ComplianceDocActionVisual
         isCurrentPlanCanDownload={isCurrentPlanCanDownload}
         isPending={isPending}
diff --git a/web/app/components/header/account-setting/api-based-extension-page/index.tsx b/web/app/components/header/account-setting/api-based-extension-page/index.tsx
index dce2a61de6..b5d07dcfe1 100644
--- a/web/app/components/header/account-setting/api-based-extension-page/index.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/index.tsx
@@ -2,7 +2,7 @@ import {
   RiAddLine,
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { useModalContext } from '@/context/modal-context'
 import { useApiBasedExtensions } from '@/service/use-common'
 import Empty from './empty'
diff --git a/web/app/components/header/account-setting/api-based-extension-page/item.tsx b/web/app/components/header/account-setting/api-based-extension-page/item.tsx
index d1e3e8f368..0624224a45 100644
--- a/web/app/components/header/account-setting/api-based-extension-page/item.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/item.tsx
@@ -6,8 +6,8 @@ import {
 } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'
+import { Button } from '@/app/components/base/ui/button'
 import { useModalContext } from '@/context/modal-context'
 import { deleteApiBasedExtension } from '@/service/common'
 
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 9e41d4603d..bffd6da230 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
@@ -3,9 +3,9 @@ import type { ApiBasedExtension } from '@/models/common'
 import { noop } from 'es-toolkit/function'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { BookOpen01 } from '@/app/components/base/icons/src/vender/line/education'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useDocLink } from '@/context/i18n'
 import { addApiBasedExtension, updateApiBasedExtension } from '@/service/common'
@@ -68,7 +68,7 @@ const ApiBasedExtensionModal: FC<ApiBasedExtensionModalProps> = ({ data, onCance
           : t('apiBasedExtension.modal.title', { ns: 'common' })}
       </div>
       <div className="py-2">
-        <div className="text-sm font-medium leading-9 text-text-primary">
+        <div className="text-sm leading-9 font-medium text-text-primary">
           {t('apiBasedExtension.modal.name.title', { ns: 'common' })}
         </div>
         <input value={localeData.name || ''} onChange={e => handleDataChange('name', e.target.value)} className="block h-9 w-full appearance-none rounded-lg bg-components-input-bg-normal px-3 text-sm text-text-primary outline-hidden" placeholder={t('apiBasedExtension.modal.name.placeholder', { ns: 'common' }) || ''} />
@@ -84,7 +84,7 @@ const ApiBasedExtensionModal: FC<ApiBasedExtensionModalProps> = ({ data, onCance
         <input value={localeData.api_endpoint || ''} onChange={e => handleDataChange('api_endpoint', e.target.value)} className="block h-9 w-full appearance-none rounded-lg bg-components-input-bg-normal px-3 text-sm text-text-primary outline-hidden" placeholder={t('apiBasedExtension.modal.apiEndpoint.placeholder', { ns: 'common' }) || ''} />
       </div>
       <div className="py-2">
-        <div className="text-sm font-medium leading-9 text-text-primary">
+        <div className="text-sm leading-9 font-medium text-text-primary">
           {t('apiBasedExtension.modal.apiKey.title', { ns: 'common' })}
         </div>
         <div className="flex items-center">
diff --git a/web/app/components/header/account-setting/data-source-page-new/configure.tsx b/web/app/components/header/account-setting/data-source-page-new/configure.tsx
index bb9a5bb3e8..1cf2c9d382 100644
--- a/web/app/components/header/account-setting/data-source-page-new/configure.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/configure.tsx
@@ -14,12 +14,12 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import {
   AddApiKeyButton,
   AddOAuthButton,
@@ -104,7 +104,7 @@ const Configure = ({
             }
             {
               !!canApiKey && !!canOAuth && (
-                <div className="flex h-4 items-center p-2 text-text-quaternary system-2xs-medium-uppercase">
+                <div className="flex h-4 items-center p-2 system-2xs-medium-uppercase text-text-quaternary">
                   <div className="mr-2 h-px grow bg-linear-to-l from-[rgba(16,24,40,0.08)]" />
                   OR
                   <div className="ml-2 h-px grow bg-linear-to-r from-[rgba(16,24,40,0.08)]" />
diff --git a/web/app/components/header/account-setting/data-source-page-new/item.tsx b/web/app/components/header/account-setting/data-source-page-new/item.tsx
index 0cf724277d..9983a22b2c 100644
--- a/web/app/components/header/account-setting/data-source-page-new/item.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/item.tsx
@@ -6,8 +6,8 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 import Operator from './operator'
 
@@ -24,7 +24,7 @@ const Item = ({
   const [renameValue, setRenameValue] = useState(credentialItem.name)
 
   return (
-    <div className="flex h-10 items-center rounded-lg bg-components-panel-on-panel-item-bg pl-3 pr-1">
+    <div className="flex h-10 items-center rounded-lg bg-components-panel-on-panel-item-bg pr-1 pl-3">
       {/* <div className='mr-2 h-5 w-5 shrink-0'></div> */}
       {
         renaming && (
@@ -69,7 +69,7 @@ const Item = ({
       }
       {
         !renaming && (
-          <div className="system-sm-medium grow text-text-secondary">
+          <div className="grow system-sm-medium text-text-secondary">
             {credentialItem.name}
           </div>
         )
@@ -82,7 +82,7 @@ const Item = ({
           connected
         </div>
       </div>
-      <div className="ml-3 mr-2 h-3 w-px bg-divider-regular"></div>
+      <div className="mr-2 ml-3 h-3 w-px bg-divider-regular"></div>
       <Operator
         credentialItem={credentialItem}
         onAction={onAction}
diff --git a/web/app/components/header/account-setting/index.tsx b/web/app/components/header/account-setting/index.tsx
index 7ae1da8de3..d061efb9c6 100644
--- a/web/app/components/header/account-setting/index.tsx
+++ b/web/app/components/header/account-setting/index.tsx
@@ -3,6 +3,7 @@ import type { AccountSettingTab } from '@/app/components/header/account-setting/
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import SearchInput from '@/app/components/base/search-input'
+import { Button } from '@/app/components/base/ui/button'
 import { ScrollArea } from '@/app/components/base/ui/scroll-area'
 import BillingPage from '@/app/components/billing/billing-page'
 import CustomPage from '@/app/components/custom/custom-page'
@@ -15,7 +16,6 @@ import { useAppContext } from '@/context/app-context'
 import { useProviderContext } from '@/context/provider-context'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { cn } from '@/utils/classnames'
-import Button from '../../base/button'
 import ApiBasedExtensionPage from './api-based-extension-page'
 import DataSourcePage from './data-source-page-new'
 import LanguagePage from './language-page'
@@ -152,14 +152,14 @@ export default function AccountSetting({
       onClose={handleClose}
     >
       <div className="mx-auto flex h-screen max-w-[1048px]">
-        <div className="flex w-[44px] flex-col border-r border-divider-burn pl-4 pr-6 sm:w-[224px]">
-          <div className="mb-8 mt-6 px-3 py-2 text-text-primary title-2xl-semi-bold">{t('userProfile.settings', { ns: 'common' })}</div>
+        <div className="flex w-[44px] flex-col border-r border-divider-burn pr-6 pl-4 sm:w-[224px]">
+          <div className="mt-6 mb-8 px-3 py-2 title-2xl-semi-bold text-text-primary">{t('userProfile.settings', { ns: 'common' })}</div>
           <div className="w-full">
             {
               menuItems.map(menuItem => (
                 <div key={menuItem.key} className="mb-2">
                   {!isCurrentWorkspaceDatasetOperator && (
-                    <div className="mb-0.5 py-2 pb-1 pl-3 text-text-tertiary system-xs-medium-uppercase">{menuItem.name}</div>
+                    <div className="mb-0.5 py-2 pb-1 pl-3 system-xs-medium-uppercase text-text-tertiary">{menuItem.name}</div>
                   )}
                   <div>
                     {
@@ -169,7 +169,7 @@ export default function AccountSetting({
                           key={item.key}
                           className={cn(
                             'mb-0.5 flex h-[37px] w-full items-center rounded-lg p-1 pl-3 text-left text-sm',
-                            activeMenu === item.key ? 'bg-state-base-active text-components-menu-item-text-active system-sm-semibold' : 'text-components-menu-item-text system-sm-medium',
+                            activeMenu === item.key ? 'bg-state-base-active system-sm-semibold text-components-menu-item-text-active' : 'system-sm-medium text-components-menu-item-text',
                           )}
                           aria-label={item.name}
                           title={item.name}
@@ -189,7 +189,7 @@ export default function AccountSetting({
           </div>
         </div>
         <div className="relative flex min-h-0 w-[824px]">
-          <div className="fixed right-6 top-6 z-9999 flex flex-col items-center">
+          <div className="fixed top-6 right-6 z-9999 flex flex-col items-center">
             <Button
               variant="tertiary"
               size="large"
@@ -199,7 +199,7 @@ export default function AccountSetting({
             >
               <span className="i-ri-close-line h-5 w-5" />
             </Button>
-            <div className="mt-1 text-text-tertiary system-2xs-medium-uppercase">ESC</div>
+            <div className="mt-1 system-2xs-medium-uppercase text-text-tertiary">ESC</div>
           </div>
           <ScrollArea
             className="h-full min-h-0 flex-1 bg-components-panel-bg"
@@ -208,11 +208,11 @@ export default function AccountSetting({
               content: 'min-h-full pb-4',
             }}
           >
-            <div className="sticky top-0 z-20 mx-8 mb-[18px] flex items-center bg-components-panel-bg pb-2 pt-[27px]">
-              <div className="shrink-0 text-text-primary title-2xl-semi-bold">
+            <div className="sticky top-0 z-20 mx-8 mb-[18px] flex items-center bg-components-panel-bg pt-[27px] pb-2">
+              <div className="shrink-0 title-2xl-semi-bold text-text-primary">
                 {activeItem?.name}
                 {activeItem?.description && (
-                  <div className="mt-1 text-text-tertiary system-sm-regular">{activeItem?.description}</div>
+                  <div className="mt-1 system-sm-regular text-text-tertiary">{activeItem?.description}</div>
                 )}
               </div>
               {activeItem?.key === ACCOUNT_SETTING_TAB.PROVIDER && (
diff --git a/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx b/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx
index 348a1ac3d6..93acf76d00 100644
--- a/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx
+++ b/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 import { useId, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { Dialog, DialogCloseButton, DialogContent, DialogTitle } from '@/app/components/base/ui/dialog'
 import { toast } from '@/app/components/base/ui/toast'
 import { useAppContext } from '@/context/app-context'
@@ -94,7 +94,7 @@ const EditWorkspaceModal = ({ onCancel }: IEditWorkspaceModalProps) => {
             />
             <div className="min-h-6">
               {hasError && (
-                <p id={errorId} data-testid="edit-workspace-error" className="text-text-destructive system-xs-regular" role="alert">
+                <p id={errorId} data-testid="edit-workspace-error" className="system-xs-regular text-text-destructive" role="alert">
                   {nameErrorMessage}
                 </p>
               )}
diff --git a/web/app/components/header/account-setting/members-page/invite-button.tsx b/web/app/components/header/account-setting/members-page/invite-button.tsx
index fb5b5cdc5e..c4e73b8feb 100644
--- a/web/app/components/header/account-setting/members-page/invite-button.tsx
+++ b/web/app/components/header/account-setting/members-page/invite-button.tsx
@@ -1,7 +1,7 @@
 import { RiUserAddLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
+import { Button } from '@/app/components/base/ui/button'
 import { useAppContext } from '@/context/app-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useWorkspacePermissions } from '@/service/use-workspace'
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 6af07b107e..4d22c97259 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
@@ -5,7 +5,7 @@ import { useBoolean } from 'ahooks'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ReactMultiEmail } from 'react-multi-email'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { Dialog, DialogCloseButton, DialogContent, DialogTitle } from '@/app/components/base/ui/dialog'
 import { toast } from '@/app/components/base/ui/toast'
 import { emailRegex } from '@/config'
@@ -87,7 +87,7 @@ const InviteModal = ({
         backdropProps={{ forceRender: true }}
         className="w-[400px] overflow-visible px-8 py-6"
       >
-        <DialogCloseButton data-testid="invite-modal-close" className="right-8 top-6" />
+        <DialogCloseButton data-testid="invite-modal-close" className="top-6 right-8" />
         <div className="mb-2 pr-8">
           <DialogTitle className="text-xl font-semibold text-text-primary">
             {t('members.inviteTeamMember', { ns: 'common' })}
@@ -97,12 +97,12 @@ const InviteModal = ({
         {!isEmailSetup && (
           <div className="grow basis-0 overflow-y-auto pb-4">
             <div className="relative mb-1 rounded-xl border border-components-panel-border p-2 shadow-xs">
-              <div className="absolute left-0 top-0 h-full w-full rounded-xl opacity-40" style={{ background: 'linear-gradient(92deg, rgba(255, 171, 0, 0.25) 18.12%, rgba(255, 255, 255, 0.00) 167.31%)' }}></div>
+              <div className="absolute top-0 left-0 h-full w-full rounded-xl opacity-40" style={{ background: 'linear-gradient(92deg, rgba(255, 171, 0, 0.25) 18.12%, rgba(255, 255, 255, 0.00) 167.31%)' }}></div>
               <div className="relative flex h-full w-full items-start">
                 <div className="mr-0.5 shrink-0 p-0.5">
                   <div className="i-ri-error-warning-fill h-5 w-5 text-text-warning" />
                 </div>
-                <div className="text-text-primary system-xs-medium">
+                <div className="system-xs-medium text-text-primary">
                   <span>{t('members.emailNotSetup', { ns: 'common' })}</span>
                 </div>
               </div>
@@ -134,7 +134,7 @@ const InviteModal = ({
               placeholder={t('members.emailPlaceholder', { ns: 'common' }) || ''}
             />
             <div className={
-              cn('flex items-center justify-end text-text-tertiary system-xs-regular', (isLimited && usedSize > licenseLimit.workspace_members.limit) ? 'text-text-destructive' : '')
+              cn('flex items-center justify-end system-xs-regular text-text-tertiary', (isLimited && usedSize > licenseLimit.workspace_members.limit) ? 'text-text-destructive' : '')
             }
             >
               <span>{usedSize}</span>
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 5a62346d40..d7d48759c0 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
@@ -1,7 +1,7 @@
 import type { InvitationResult } from '@/models/common'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { Dialog, DialogCloseButton, DialogContent, DialogTitle } from '@/app/components/base/ui/dialog'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { IS_CE_EDITION } from '@/config'
@@ -35,7 +35,7 @@ const InvitedModal = ({
         backdropProps={{ forceRender: true }}
         className="w-[480px] p-8"
       >
-        <DialogCloseButton className="right-8 top-8" />
+        <DialogCloseButton className="top-8 right-8" />
         <div className="mb-3 flex justify-between">
           <div className="
             flex h-12 w-12 items-center justify-center rounded-xl
diff --git a/web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.tsx b/web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.tsx
index 5a82144212..4500509d00 100644
--- a/web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.tsx
+++ b/web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.tsx
@@ -2,9 +2,9 @@ import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useAppContext } from '@/context/app-context'
 import { ownershipTransfer, sendOwnerEmail, verifyOwnerEmail } from '@/service/common'
@@ -105,17 +105,17 @@ const TransferOwnershipModal = ({ onClose, show }: Props) => {
   }
   return (
     <Modal isShow={show} onClose={noop} wrapperClassName="z-1002" className="w-[420px]! p-6!">
-      <div data-testid="transfer-modal-close" className="absolute right-5 top-5 cursor-pointer p-1.5" onClick={onClose}>
+      <div data-testid="transfer-modal-close" className="absolute top-5 right-5 cursor-pointer p-1.5" onClick={onClose}>
         <div className="i-ri-close-line h-5 w-5 text-text-tertiary" />
       </div>
       {step === STEP.start && (
         <>
-          <div className="pb-3 text-text-primary title-2xl-semi-bold">{t('members.transferModal.title', { ns: 'common' })}</div>
-          <div className="space-y-1 pb-2 pt-1">
-            <div className="text-text-destructive body-md-medium">{t('members.transferModal.warning', { ns: 'common', workspace: currentWorkspace.name.replace(/'/g, '’') })}</div>
-            <div className="text-text-secondary body-md-regular">{t('members.transferModal.warningTip', { ns: 'common' })}</div>
-            <div className="text-text-secondary body-md-regular">
-              <Trans i18nKey="members.transferModal.sendTip" ns="common" components={{ email: <span className="text-text-primary body-md-medium"></span> }} values={{ email: userProfile.email }} />
+          <div className="pb-3 title-2xl-semi-bold text-text-primary">{t('members.transferModal.title', { ns: 'common' })}</div>
+          <div className="space-y-1 pt-1 pb-2">
+            <div className="body-md-medium text-text-destructive">{t('members.transferModal.warning', { ns: 'common', workspace: currentWorkspace.name.replace(/'/g, '’') })}</div>
+            <div className="body-md-regular text-text-secondary">{t('members.transferModal.warningTip', { ns: 'common' })}</div>
+            <div className="body-md-regular text-text-secondary">
+              <Trans i18nKey="members.transferModal.sendTip" ns="common" components={{ email: <span className="body-md-medium text-text-primary"></span> }} values={{ email: userProfile.email }} />
             </div>
           </div>
           <div className="pt-3"></div>
@@ -131,15 +131,15 @@ const TransferOwnershipModal = ({ onClose, show }: Props) => {
       )}
       {step === STEP.verify && (
         <>
-          <div className="pb-3 text-text-primary title-2xl-semi-bold">{t('members.transferModal.verifyEmail', { ns: 'common' })}</div>
-          <div className="pb-2 pt-1">
-            <div className="text-text-secondary body-md-regular">
-              <Trans i18nKey="members.transferModal.verifyContent" ns="common" components={{ email: <span className="text-text-primary body-md-medium"></span> }} values={{ email: userProfile.email }} />
+          <div className="pb-3 title-2xl-semi-bold text-text-primary">{t('members.transferModal.verifyEmail', { ns: 'common' })}</div>
+          <div className="pt-1 pb-2">
+            <div className="body-md-regular text-text-secondary">
+              <Trans i18nKey="members.transferModal.verifyContent" ns="common" components={{ email: <span className="body-md-medium text-text-primary"></span> }} values={{ email: userProfile.email }} />
             </div>
-            <div className="text-text-secondary body-md-regular">{t('members.transferModal.verifyContent2', { ns: 'common' })}</div>
+            <div className="body-md-regular text-text-secondary">{t('members.transferModal.verifyContent2', { ns: 'common' })}</div>
           </div>
           <div className="pt-3">
-            <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-medium">{t('members.transferModal.codeLabel', { ns: 'common' })}</div>
+            <div className="mb-1 flex h-6 items-center system-sm-medium text-text-secondary">{t('members.transferModal.codeLabel', { ns: 'common' })}</div>
             <Input data-testid="transfer-modal-code-input" className="w-full!" placeholder={t('members.transferModal.codePlaceholder', { ns: 'common' })} value={code} onChange={e => setCode(e.target.value)} maxLength={6} />
           </div>
           <div className="mt-3 space-y-2">
@@ -150,11 +150,11 @@ const TransferOwnershipModal = ({ onClose, show }: Props) => {
               {t('operation.cancel', { ns: 'common' })}
             </Button>
           </div>
-          <div className="mt-3 flex items-center gap-1 text-text-tertiary system-xs-regular">
+          <div className="mt-3 flex items-center gap-1 system-xs-regular text-text-tertiary">
             <span>{t('members.transferModal.resendTip', { ns: 'common' })}</span>
             {time > 0 && (<span>{t('members.transferModal.resendCount', { ns: 'common', count: time })}</span>)}
             {!time && (
-              <span data-testid="transfer-modal-resend" onClick={sendCodeToOriginEmail} className="cursor-pointer text-text-accent-secondary system-xs-medium">
+              <span data-testid="transfer-modal-resend" onClick={sendCodeToOriginEmail} className="cursor-pointer system-xs-medium text-text-accent-secondary">
                 {t('members.transferModal.resend', { ns: 'common' })}
               </span>
             )}
@@ -163,17 +163,17 @@ const TransferOwnershipModal = ({ onClose, show }: Props) => {
       )}
       {step === STEP.transfer && (
         <>
-          <div className="pb-3 text-text-primary title-2xl-semi-bold">{t('members.transferModal.title', { ns: 'common' })}</div>
-          <div className="space-y-1 pb-2 pt-1">
-            <div className="text-text-destructive body-md-medium">{t('members.transferModal.warning', { ns: 'common', workspace: currentWorkspace.name.replace(/'/g, '’') })}</div>
-            <div className="text-text-secondary body-md-regular">{t('members.transferModal.warningTip', { ns: 'common' })}</div>
+          <div className="pb-3 title-2xl-semi-bold text-text-primary">{t('members.transferModal.title', { ns: 'common' })}</div>
+          <div className="space-y-1 pt-1 pb-2">
+            <div className="body-md-medium text-text-destructive">{t('members.transferModal.warning', { ns: 'common', workspace: currentWorkspace.name.replace(/'/g, '’') })}</div>
+            <div className="body-md-regular text-text-secondary">{t('members.transferModal.warningTip', { ns: 'common' })}</div>
           </div>
           <div className="pt-3">
-            <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-medium">{t('members.transferModal.transferLabel', { ns: 'common' })}</div>
+            <div className="mb-1 flex h-6 items-center system-sm-medium text-text-secondary">{t('members.transferModal.transferLabel', { ns: 'common' })}</div>
             <MemberSelector exclude={[userProfile.id]} value={newOwner} onSelect={setNewOwner} />
           </div>
           <div className="mt-4 space-y-2">
-            <Button data-testid="transfer-modal-submit" disabled={!newOwner || isTransfer} className="w-full!" variant="warning" onClick={handleTransfer}>
+            <Button data-testid="transfer-modal-submit" disabled={!newOwner || isTransfer} className="w-full!" variant="primary" destructive onClick={handleTransfer}>
               {t('members.transferModal.transfer', { ns: 'common' })}
             </Button>
             <Button data-testid="transfer-modal-cancel" className="w-full!" onClick={onClose}>
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx
index a6e2fb5dc3..08ca3acee9 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx
@@ -13,15 +13,15 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  Button,
-} from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import Tooltip from '@/app/components/base/tooltip'
+import {
+  Button,
+} from '@/app/components/base/ui/button'
 import { ModelModalModeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { cn } from '@/utils/classnames'
 import ModelIcon from '../model-icon'
@@ -136,7 +136,7 @@ const AddCustomModel = ({
                     modelName={model.model}
                   />
                   <div
-                    className="grow truncate text-text-primary system-md-regular"
+                    className="grow truncate system-md-regular text-text-primary"
                     title={model.model}
                   >
                     {model.model}
@@ -148,7 +148,7 @@ const AddCustomModel = ({
           {
             !notAllowCustomCredential && (
               <div
-                className="flex cursor-pointer items-center border-t border-t-divider-subtle p-3 text-text-accent-light-mode-only system-xs-medium"
+                className="flex cursor-pointer items-center border-t border-t-divider-subtle p-3 system-xs-medium text-text-accent-light-mode-only"
                 onClick={() => {
                   handleOpenModalForAddNewCustomModel()
                   setOpen(false)
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx
index 8008f09e6d..09e64c654f 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx
@@ -19,13 +19,13 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import { useAuth } from '../hooks'
 import AuthorizedItem from './authorized-item'
@@ -172,7 +172,7 @@ const Authorized = ({
           >
             {
               popupTitle && (
-                <div className="px-3 pb-0.5 pt-[10px] text-text-tertiary system-xs-medium">
+                <div className="px-3 pt-[10px] pb-0.5 system-xs-medium text-text-tertiary">
                   {popupTitle}
                 </div>
               )
@@ -218,7 +218,7 @@ const Authorized = ({
                         }
                       : undefined,
                   )}
-                  className="flex h-[40px] cursor-pointer items-center px-3 text-text-accent-light-mode-only system-xs-medium"
+                  className="flex h-[40px] cursor-pointer items-center px-3 system-xs-medium text-text-accent-light-mode-only"
                 >
                   <RiAddLine className="mr-1 h-4 w-4" />
                   {t('modelProvider.auth.addModelCredential', { ns: 'common' })}
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/config-model.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/config-model.tsx
index d6a07b4598..e4e7fae3f5 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/config-model.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/config-model.tsx
@@ -4,7 +4,7 @@ import {
 } from '@remixicon/react'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 import { cn } from '@/utils/classnames'
 
@@ -25,12 +25,12 @@ const ConfigModel = ({
   if (loadBalancingInvalid) {
     return (
       <div
-        className="system-2xs-medium-uppercase relative flex h-[18px] cursor-pointer items-center rounded-[5px] border border-text-warning bg-components-badge-bg-dimm px-1.5 text-text-warning"
+        className="relative flex h-[18px] cursor-pointer items-center rounded-[5px] border border-text-warning bg-components-badge-bg-dimm px-1.5 system-2xs-medium-uppercase text-text-warning"
         onClick={onClick}
       >
         <RiScales3Line className="mr-0.5 h-3 w-3" />
         {t('modelProvider.auth.authorizationError', { ns: 'common' })}
-        <Indicator color="orange" className="absolute -right-px -top-px h-1.5 w-1.5" />
+        <Indicator color="orange" className="absolute -top-px -right-px h-1.5 w-1.5" />
       </div>
     )
   }
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/config-provider.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/config-provider.tsx
index de9ad0a396..e64c5aedc0 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/config-provider.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/config-provider.tsx
@@ -10,10 +10,10 @@ import {
   useCallback,
 } from 'react'
 import { useTranslation } from 'react-i18next'
+import Tooltip from '@/app/components/base/tooltip'
 import {
   Button,
-} from '@/app/components/base/button'
-import Tooltip from '@/app/components/base/tooltip'
+} from '@/app/components/base/ui/button'
 import { ConfigurationMethodEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import Authorized from './authorized'
 import { useCredentialStatus } from './hooks'
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/manage-custom-model-credentials.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/manage-custom-model-credentials.tsx
index e996974fd2..cb238f87be 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/manage-custom-model-credentials.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/manage-custom-model-credentials.tsx
@@ -9,7 +9,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import {
   Button,
-} from '@/app/components/base/button'
+} from '@/app/components/base/ui/button'
 import {
   ConfigurationMethodEnum,
   ModelModalModeEnum,
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/switch-credential-in-load-balancing.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/switch-credential-in-load-balancing.tsx
index b32deacab4..e6ce8f80bb 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/switch-credential-in-load-balancing.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/switch-credential-in-load-balancing.tsx
@@ -11,8 +11,8 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
-import Button from '@/app/components/base/button'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import { ConfigurationMethodEnum, ModelModalModeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import Indicator from '@/app/components/header/indicator'
 import { cn } from '@/utils/classnames'
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 b39d051992..6a251ee302 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
@@ -18,7 +18,6 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
-import Button from '@/app/components/base/button'
 import AuthForm from '@/app/components/base/form/form-scenarios/auth'
 import { LinkExternal02 } from '@/app/components/base/icons/src/vender/line/general'
 import { Lock01 } from '@/app/components/base/icons/src/vender/solid/security'
@@ -31,6 +30,7 @@ import {
   AlertDialogContent,
   AlertDialogTitle,
 } from '@/app/components/base/ui/alert-dialog'
+import { Button } from '@/app/components/base/ui/button'
 import {
   Dialog,
   DialogCloseButton,
@@ -203,7 +203,7 @@ const ModelModal: FC<ModelModalProps> = ({
     }
 
     return (
-      <div className="text-text-primary title-2xl-semi-bold">
+      <div className="title-2xl-semi-bold text-text-primary">
         {label}
       </div>
     )
@@ -212,7 +212,7 @@ const ModelModal: FC<ModelModalProps> = ({
   const modalDesc = useMemo(() => {
     if (providerFormSchemaPredefined) {
       return (
-        <div className="mt-1 text-text-tertiary system-xs-regular">
+        <div className="mt-1 system-xs-regular text-text-tertiary">
           {t('modelProvider.auth.apiKeyModal.desc', { ns: 'common' })}
         </div>
       )
@@ -229,7 +229,7 @@ const ModelModal: FC<ModelModalProps> = ({
             className="mr-2 h-4 w-4 shrink-0"
             provider={provider}
           />
-          <div className="mr-1 text-text-secondary system-md-regular">{renderI18nObject(provider.label)}</div>
+          <div className="mr-1 system-md-regular text-text-secondary">{renderI18nObject(provider.label)}</div>
         </div>
       )
     }
@@ -241,7 +241,7 @@ const ModelModal: FC<ModelModalProps> = ({
             provider={provider}
             modelName={model.model}
           />
-          <div className="mr-1 text-text-secondary system-md-regular">{model.model}</div>
+          <div className="mr-1 system-md-regular text-text-secondary">{model.model}</div>
           <Badge>{model.model_type}</Badge>
         </div>
       )
@@ -297,7 +297,7 @@ const ModelModal: FC<ModelModalProps> = ({
         backdropProps={{ forceRender: true }}
         className="w-[640px] max-w-[640px] overflow-hidden p-0"
       >
-        <DialogCloseButton className="right-5 top-5 h-8 w-8" />
+        <DialogCloseButton className="top-5 right-5 h-8 w-8" />
         <div className="p-6 pb-3">
           {modalTitle}
           {modalDesc}
@@ -333,7 +333,7 @@ const ModelModal: FC<ModelModalProps> = ({
           }
           {
             showCredentialLabel && (
-              <div className="mb-3 mt-6 flex items-center text-text-tertiary system-xs-medium-uppercase">
+              <div className="mt-6 mb-3 flex items-center system-xs-medium-uppercase text-text-tertiary">
                 {t('modelProvider.auth.modelCredential', { ns: 'common' })}
                 <div className="ml-2 h-px grow bg-linear-to-r from-divider-regular to-background-gradient-mask-transparent" />
               </div>
@@ -373,11 +373,11 @@ const ModelModal: FC<ModelModalProps> = ({
                     href={provider.help?.url[language] || provider.help?.url.en_US}
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="mt-2 inline-block align-middle text-text-accent system-xs-regular"
+                    className="mt-2 inline-block align-middle system-xs-regular text-text-accent"
                     onClick={e => !provider.help.url && e.preventDefault()}
                   >
                     {provider.help.title?.[language] || provider.help.url[language] || provider.help.title?.en_US || provider.help.url.en_US}
-                    <LinkExternal02 className="ml-1 mt-[-2px] inline-block h-3 w-3" />
+                    <LinkExternal02 className="mt-[-2px] ml-1 inline-block h-3 w-3" />
                   </a>
                 )
               : <div />
@@ -386,7 +386,8 @@ const ModelModal: FC<ModelModalProps> = ({
             {
               isEditMode && (
                 <Button
-                  variant="warning"
+                  variant="primary"
+                  destructive
                   onClick={() => openConfirmDelete(credential, model)}
                 >
                   {t('operation.remove', { ns: 'common' })}
@@ -430,7 +431,7 @@ const ModelModal: FC<ModelModalProps> = ({
       <AlertDialog open={!!deleteCredentialId} onOpenChange={handleConfirmOpenChange}>
         <AlertDialogContent backdropProps={{ forceRender: true }}>
           <div className="flex flex-col gap-2 p-6 pb-4">
-            <AlertDialogTitle className="text-text-primary title-2xl-semi-bold">
+            <AlertDialogTitle className="title-2xl-semi-bold text-text-primary">
               {t('modelProvider.confirmDelete', { ns: 'common' })}
             </AlertDialogTitle>
           </div>
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/configuration-button.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/configuration-button.tsx
index ab379400b5..7545cf6a22 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/configuration-button.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/configuration-button.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { ConfigurationMethodEnum } from '../declarations'
 
 type ConfigurationButtonProps = {
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.tsx
index f96e7d02a5..c2138c1c6f 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.tsx
@@ -1,9 +1,9 @@
 import type { ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { Brush01 } from '@/app/components/base/icons/src/vender/solid/editor'
 import { Scales02 } from '@/app/components/base/icons/src/vender/solid/FinanceAndECommerce'
 import { Target04 } from '@/app/components/base/icons/src/vender/solid/general'
+import { Button } from '@/app/components/base/ui/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -44,7 +44,7 @@ function PresetsParameter({ onSelect }: PresetsParameterProps) {
         )}
       >
         {t('modelProvider.loadPresets', { ns: 'common' })}
-        <span className="i-ri-arrow-down-s-line ml-0.5 h-3.5 w-3.5" />
+        <span className="ml-0.5 i-ri-arrow-down-s-line h-3.5 w-3.5" />
       </DropdownMenuTrigger>
       <DropdownMenuContent>
         {TONE_LIST.slice(0, 3).map(tone => (
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx
index 36d977f5c3..6aaa71059e 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx
@@ -8,7 +8,7 @@ import type { ModelProviderQuotaGetPaid } from '@/types/model-provider'
 import { useTheme } from 'next-themes'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import checkTaskStatus from '@/app/components/plugins/install-plugin/base/check-task-status'
 import useRefreshPluginList from '@/app/components/plugins/install-plugin/hooks/use-refresh-plugin-list'
@@ -181,16 +181,16 @@ const Popup: FC<PopupProps> = ({
   }, [modelProviders])
 
   return (
-    <div className="max-h-[480px] overflow-y-auto no-scrollbar">
-      <div className="sticky top-0 z-10 bg-components-panel-bg pb-1 pl-3 pr-2 pt-3">
+    <div className="no-scrollbar max-h-[480px] overflow-y-auto">
+      <div className="sticky top-0 z-10 bg-components-panel-bg pt-3 pr-2 pb-1 pl-3">
         <div className={`
-          flex h-8 items-center rounded-lg border pl-[9px] pr-[10px]
+          flex h-8 items-center rounded-lg border pr-[10px] pl-[9px]
           ${searchText ? 'border-components-input-border-active bg-components-input-bg-active shadow-xs' : 'border-transparent bg-components-input-bg-normal'}
         `}
         >
           <span
             className={`
-              i-ri-search-line mr-[7px] h-[14px] w-[14px] shrink-0
+              mr-[7px] i-ri-search-line h-[14px] w-[14px] shrink-0
               ${searchText ? 'text-text-tertiary' : 'text-text-quaternary'}
             `}
           />
@@ -203,7 +203,7 @@ const Popup: FC<PopupProps> = ({
           {
             searchText && (
               <span
-                className="i-custom-vender-solid-general-x-circle ml-1.5 h-[14px] w-[14px] shrink-0 cursor-pointer text-text-quaternary"
+                className="ml-1.5 i-custom-vender-solid-general-x-circle h-[14px] w-[14px] shrink-0 cursor-pointer text-text-quaternary"
                 onClick={() => setSearchText('')}
               />
             )
@@ -215,7 +215,7 @@ const Popup: FC<PopupProps> = ({
             className="mt-2 flex items-center gap-1 rounded-lg bg-background-section-burn px-2.5 py-2"
           >
             <span className="i-ri-information-2-fill h-4 w-4 shrink-0 text-text-accent" />
-            <p className="text-text-secondary system-xs-medium">
+            <p className="system-xs-medium text-text-secondary">
               {t('modelProvider.selector.onlyCompatibleModelsShown', { ns: 'common' })}
             </p>
           </div>
@@ -242,10 +242,10 @@ const Popup: FC<PopupProps> = ({
               <span className="i-ri-brain-2-line h-5 w-5 text-text-tertiary" />
             </div>
             <div className="flex flex-col gap-1">
-              <p className="text-text-secondary system-sm-medium">
+              <p className="system-sm-medium text-text-secondary">
                 {t('modelProvider.selector.noProviderConfigured', { ns: 'common' })}
               </p>
-              <p className="text-text-tertiary system-xs-regular">
+              <p className="system-xs-regular text-text-tertiary">
                 {t('modelProvider.selector.noProviderConfiguredDesc', { ns: 'common' })}
               </p>
             </div>
@@ -263,7 +263,7 @@ const Popup: FC<PopupProps> = ({
           </div>
         )}
         {!filteredModelList.length && installedModelList.length > 0 && (
-          <div className="break-all px-3 py-1.5 text-center text-xs leading-[18px] text-text-tertiary">
+          <div className="px-3 py-1.5 text-center text-xs leading-[18px] break-all text-text-tertiary">
             {`No model found for \u201C${searchText}\u201D`}
           </div>
         )}
@@ -273,7 +273,7 @@ const Popup: FC<PopupProps> = ({
             <div className="mb-1">
               <div className="flex h-[22px] items-center px-3">
                 <div
-                  className="flex flex-1 cursor-pointer items-center text-text-primary system-sm-medium"
+                  className="flex flex-1 cursor-pointer items-center system-sm-medium text-text-primary"
                   onClick={() => setMarketplaceCollapsed(prev => !prev)}
                 >
                   {t('modelProvider.selector.fromMarketplace', { ns: 'common' })}
@@ -288,11 +288,11 @@ const Popup: FC<PopupProps> = ({
                     return (
                       <div
                         key={key}
-                        className="group flex cursor-pointer items-center gap-1 rounded-lg py-0.5 pl-3 pr-0.5 hover:bg-state-base-hover"
+                        className="group flex cursor-pointer items-center gap-1 rounded-lg py-0.5 pr-0.5 pl-3 hover:bg-state-base-hover"
                       >
                         <div className="flex flex-1 items-center gap-2 py-0.5">
                           <Icon className="h-5 w-5 shrink-0 rounded-md" />
-                          <span className="text-text-secondary system-sm-regular">{modelNameMap[key]}</span>
+                          <span className="system-sm-regular text-text-secondary">{modelNameMap[key]}</span>
                         </div>
                         <Button
                           variant="secondary"
@@ -318,7 +318,7 @@ const Popup: FC<PopupProps> = ({
                     target="_blank"
                     rel="noopener noreferrer"
                   >
-                    <span className="flex-1 text-text-accent system-xs-regular">
+                    <span className="flex-1 system-xs-regular text-text-accent">
                       {t('modelProvider.selector.discoverMoreInMarketplace', { ns: 'common' })}
                     </span>
                     <span className="i-ri-arrow-right-up-line h-3! w-3! text-text-accent" />
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/api-key-section.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/api-key-section.tsx
index e5de8344f9..9dde65fd44 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/api-key-section.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/api-key-section.tsx
@@ -1,7 +1,7 @@
 import type { Credential, CustomModel, ModelProvider } from '../../declarations'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import CredentialItem from '../../model-auth/authorized/credential-item'
 
 type ApiKeySectionProps = {
@@ -33,10 +33,10 @@ function ApiKeySection({
       <div className="flex flex-col gap-2 p-2">
         <div className="radius-lg bg-linear-to-r from-state-base-hover to-transparent p-4">
           <div className="flex flex-col gap-1">
-            <div className="text-text-secondary system-sm-medium">
+            <div className="system-sm-medium text-text-secondary">
               {t('modelProvider.card.noApiKeysTitle', { ns: 'common' })}
             </div>
-            <div className="text-text-tertiary system-xs-regular">
+            <div className="system-xs-regular text-text-tertiary">
               {t('modelProvider.card.noApiKeysDescription', { ns: 'common' })}
             </div>
           </div>
@@ -56,7 +56,7 @@ function ApiKeySection({
   return (
     <div className="border-t border-t-divider-subtle">
       <div className="px-1">
-        <div className="pb-1 pl-7 pr-2 pt-3 text-text-tertiary system-xs-medium-uppercase">
+        <div className="pt-3 pr-2 pb-1 pl-7 system-xs-medium-uppercase text-text-tertiary">
           {t('modelProvider.auth.apiKeys', { ns: 'common' })}
         </div>
         <div className="max-h-[200px] overflow-y-auto">
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/index.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/index.tsx
index da7394a407..fc710ef73f 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/index.tsx
@@ -2,7 +2,7 @@ import type { ModelProvider, PreferredProviderTypeEnum } from '../../declaration
 import type { CardVariant, CredentialPanelState } from '../use-credential-panel-state'
 import { memo, useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import {
   Popover,
   PopoverContent,
@@ -62,7 +62,7 @@ function ModelAuthDropdown({
             variant={buttonConfig.variant}
             title={buttonConfig.text}
           >
-            <span className="i-ri-equalizer-2-line mr-1 h-3.5 w-3.5 shrink-0" />
+            <span className="mr-1 i-ri-equalizer-2-line h-3.5 w-3.5 shrink-0" />
             <span className="w-0 grow truncate text-left">
               {buttonConfig.text}
             </span>
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 e7215eecf5..cb4ffd0392 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
@@ -1,10 +1,10 @@
 import type { Credential, CustomConfigurationModelFixedFields, ModelItem, ModelLoadBalancingConfig, ModelLoadBalancingConfigEntry, ModelProvider } from '../declarations'
 import { memo, useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'
 import Loading from '@/app/components/base/loading'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { SwitchCredentialInLoadBalancing } from '@/app/components/header/account-setting/model-provider-page/model-auth'
 import { useGetModelCredential, useUpdateModelLoadBalancingConfig } from '@/service/use-models'
@@ -188,7 +188,7 @@ const ModelLoadBalancingModal = ({ provider, configurateMethod, currentCustomCon
             {Boolean(model) && (
               <div className="flex h-5 items-center">
                 <ModelIcon className="mr-2 shrink-0" provider={provider} modelName={model!.model} />
-                <ModelName className="grow text-text-secondary system-md-regular" modelItem={model!} showModelType showMode showContextSize />
+                <ModelName className="grow system-md-regular text-text-secondary" modelItem={model!} showModelType showMode showContextSize />
               </div>
             )}
           </div>
@@ -200,7 +200,7 @@ const ModelLoadBalancingModal = ({ provider, configurateMethod, currentCustomCon
               <>
                 <div className="py-2">
                   <div className={cn('min-h-16 rounded-xl border bg-components-panel-bg transition-colors', draftConfig.enabled ? 'cursor-pointer border-components-panel-border' : 'cursor-default border-util-colors-blue-blue-600')} onClick={draftConfig.enabled ? () => toggleModalBalancing(false) : undefined}>
-                    <div className="flex select-none items-center gap-2 px-[15px] py-3">
+                    <div className="flex items-center gap-2 px-[15px] py-3 select-none">
                       <div className="flex h-8 w-8 shrink-0 grow-0 items-center justify-center rounded-lg border border-components-card-border bg-components-card-bg">
                         {Boolean(model) && (<ModelIcon className="shrink-0" provider={provider} modelName={model!.model} />)}
                       </div>
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx
index a751553fb0..052fc5c3d3 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx
@@ -6,7 +6,7 @@ import {
 } from '@remixicon/react'
 import { Fragment } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import { PreferredProviderTypeEnum } from '../declarations'
 
@@ -51,9 +51,9 @@ const Selector: FC<SelectorProps> = ({
         leaveFrom="opacity-100"
         leaveTo="opacity-0"
       >
-        <PopoverPanel className="absolute right-0 top-7 z-10 w-[144px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg">
+        <PopoverPanel className="absolute top-7 right-0 z-10 w-[144px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg">
           <div className="p-1">
-            <div className="px-3 pb-1 pt-2 text-sm font-medium text-text-secondary">{t('modelProvider.card.priorityUse', { ns: 'common' })}</div>
+            <div className="px-3 pt-2 pb-1 text-sm font-medium text-text-secondary">{t('modelProvider.card.priorityUse', { ns: 'common' })}</div>
             {
               options.map(option => (
                 <PopoverButton as={Fragment} key={option.key}>
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/provider-card-actions.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/provider-card-actions.tsx
index 8155a451a6..2d9e2a52aa 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/provider-card-actions.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/provider-card-actions.tsx
@@ -3,7 +3,7 @@ import type { PluginDetail } from '@/app/components/plugins/types'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { HeaderModals } from '@/app/components/plugins/plugin-detail-panel/detail-header/components'
 import { useDetailHeaderState, usePluginOperations } from '@/app/components/plugins/plugin-detail-panel/detail-header/hooks'
@@ -94,7 +94,7 @@ const ProviderCardActions: FC<Props> = ({ detail, onUpdate }) => {
               text={(
                 <>
                   <span>{version}</span>
-                  {isFromMarketplace && <span className="i-ri-arrow-left-right-line ml-1 h-3 w-3" />}
+                  {isFromMarketplace && <span className="ml-1 i-ri-arrow-left-right-line h-3 w-3" />}
                 </>
               )}
               hasRedCornerMark={hasNewVersion}
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 117bc6c9b3..8b86923391 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
@@ -5,7 +5,7 @@ import type {
 } from '../declarations'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import {
   Dialog,
   DialogCloseButton,
@@ -168,8 +168,8 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
         onClick={() => setOpen(true)}
       >
         {isLoading
-          ? <span className="i-ri-loader-2-line mr-1 h-3.5 w-3.5 animate-spin" />
-          : <span className="i-ri-equalizer-2-line mr-1 h-3.5 w-3.5" />}
+          ? <span className="mr-1 i-ri-loader-2-line h-3.5 w-3.5 animate-spin" />
+          : <span className="mr-1 i-ri-equalizer-2-line h-3.5 w-3.5" />}
         {t('modelProvider.systemModelSettings', { ns: 'common' })}
       </Button>
       <Dialog open={open} onOpenChange={setOpen}>
@@ -177,9 +177,9 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
           backdropProps={{ forceRender: true }}
           className="w-[480px] max-w-[480px] overflow-hidden p-0"
         >
-          <DialogCloseButton className="right-5 top-5" />
-          <div className="px-6 pb-3 pr-14 pt-6">
-            <DialogTitle className="text-text-primary title-2xl-semi-bold">
+          <DialogCloseButton className="top-5 right-5" />
+          <div className="px-6 pt-6 pr-14 pb-3">
+            <DialogTitle className="title-2xl-semi-bold text-text-primary">
               {t('modelProvider.systemModelSettings', { ns: 'common' })}
             </DialogTitle>
           </div>
@@ -235,7 +235,7 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
               </div>
             </div>
           </div>
-          <div className="flex items-center justify-end gap-2 px-6 pb-6 pt-5">
+          <div className="flex items-center justify-end gap-2 px-6 pt-5 pb-6">
             <Button
               className="min-w-[72px]"
               onClick={() => setOpen(false)}
diff --git a/web/app/components/plugins/install-plugin/base/installed.tsx b/web/app/components/plugins/install-plugin/base/installed.tsx
index 890294b9cc..088d587378 100644
--- a/web/app/components/plugins/install-plugin/base/installed.tsx
+++ b/web/app/components/plugins/install-plugin/base/installed.tsx
@@ -4,7 +4,7 @@ import type { Plugin, PluginDeclaration, PluginManifestInMarket } from '../../ty
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge, { BadgeState } from '@/app/components/base/badge/index'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import Card from '../../card'
 import { pluginManifestInMarketToPluginProps, pluginManifestToCardPluginProps } from '../utils'
 
diff --git a/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx b/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
index 4394c5f92e..9eb4db7a27 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
@@ -6,8 +6,8 @@ import { RiLoader2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Checkbox from '@/app/components/base/checkbox'
+import { Button } from '@/app/components/base/ui/button'
 import { useCanInstallPluginFromMarketplace } from '@/app/components/plugins/plugin-page/use-reference-setting'
 import { useMittContextSelector } from '@/context/mitt-context'
 import { useInstallOrUpdate, usePluginTaskList } from '@/service/use-plugins'
@@ -195,7 +195,7 @@ const Install: FC<Props> = ({
             {canInstall && (
               <div className="flex items-center gap-x-2" onClick={handleClickSelectAll}>
                 <Checkbox checked={isSelectAll} indeterminate={isIndeterminate} />
-                <p className="system-sm-medium cursor-pointer text-text-secondary">{isSelectAll ? t('operation.deSelectAll', { ns: 'common' }) : t('operation.selectAll', { ns: 'common' })}</p>
+                <p className="cursor-pointer system-sm-medium text-text-secondary">{isSelectAll ? t('operation.deSelectAll', { ns: 'common' }) : t('operation.selectAll', { ns: 'common' })}</p>
               </div>
             )}
           </div>
diff --git a/web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx b/web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx
index b3683d3e1d..a7808736e9 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx
@@ -4,7 +4,7 @@ import type { InstallStatus, Plugin } from '../../../types'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge, { BadgeState } from '@/app/components/base/badge/index'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import Card from '@/app/components/plugins/card'
 import { MARKETPLACE_API_PREFIX } from '@/config'
 import useGetIcon from '../../base/use-get-icon'
diff --git a/web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx b/web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx
index fe2f868256..c044445f19 100644
--- a/web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx
@@ -5,7 +5,7 @@ import { RiLoader2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import useCheckInstalled from '@/app/components/plugins/install-plugin/hooks/use-check-installed'
 import { updateFromGitHub } from '@/service/plugins'
 import { useInstallPackageFromGitHub, usePluginTaskList } from '@/service/use-plugins'
diff --git a/web/app/components/plugins/install-plugin/install-from-github/steps/selectPackage.tsx b/web/app/components/plugins/install-plugin/install-from-github/steps/selectPackage.tsx
index 635bb4e091..a8236b4b93 100644
--- a/web/app/components/plugins/install-plugin/install-from-github/steps/selectPackage.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-github/steps/selectPackage.tsx
@@ -4,8 +4,8 @@ import type { PluginDeclaration, UpdateFromGitHubPayload } from '../../../types'
 import type { Item } from '@/app/components/base/select'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { PortalSelect } from '@/app/components/base/select'
+import { Button } from '@/app/components/base/ui/button'
 import { handleUpload } from '../../hooks'
 
 const i18nPrefix = 'installFromGitHub'
diff --git a/web/app/components/plugins/install-plugin/install-from-github/steps/setURL.tsx b/web/app/components/plugins/install-plugin/install-from-github/steps/setURL.tsx
index 75e546baff..2a7012d40c 100644
--- a/web/app/components/plugins/install-plugin/install-from-github/steps/setURL.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-github/steps/setURL.tsx
@@ -2,7 +2,7 @@
 
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 
 type SetURLProps = {
   repoUrl: string
@@ -27,9 +27,9 @@ const SetURL: React.FC<SetURLProps> = ({ repoUrl, onChange, onNext, onCancel })
         name="repoUrl"
         value={repoUrl}
         onChange={e => onChange(e.target.value)}
-        className="shadows-shadow-xs system-sm-regular flex grow items-center gap-[2px]
-          self-stretch overflow-hidden text-ellipsis rounded-lg border border-components-input-border-active
-          bg-components-input-bg-active p-2 text-components-input-text-filled"
+        className="shadows-shadow-xs flex grow items-center gap-[2px] self-stretch
+          overflow-hidden rounded-lg border border-components-input-border-active bg-components-input-bg-active p-2
+          system-sm-regular text-ellipsis text-components-input-text-filled"
         placeholder="Please enter GitHub repo URL"
       />
       <div className="mt-4 flex items-center justify-end gap-2 self-stretch">
diff --git a/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx b/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx
index d37151a253..9ef52d7a5d 100644
--- a/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx
@@ -5,7 +5,7 @@ import { RiLoader2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useEffect, useMemo } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import useCheckInstalled from '@/app/components/plugins/install-plugin/hooks/use-check-installed'
 import { useAppContext } from '@/context/app-context'
 import { uninstallPlugin } from '@/service/plugins'
@@ -117,7 +117,7 @@ const Installed: FC<Props> = ({
   return (
     <>
       <div className="flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3">
-        <div className="text-text-secondary system-md-regular">
+        <div className="system-md-regular text-text-secondary">
           <p>{t(`${i18nPrefix}.readyToInstall`, { ns: 'plugin' })}</p>
           <p>
             <Trans
@@ -127,7 +127,7 @@ const Installed: FC<Props> = ({
             />
           </p>
           {!isDifyVersionCompatible && (
-            <p className="flex items-center gap-1 text-text-warning system-md-regular">
+            <p className="flex items-center gap-1 system-md-regular text-text-warning">
               {t('difyVersionNotCompatible', { ns: 'plugin', minimalDifyVersion: payload.meta.minimum_dify_version })}
             </p>
           )}
diff --git a/web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx b/web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx
index 21dbcea887..f9f9969817 100644
--- a/web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx
@@ -4,7 +4,7 @@ import type { Dependency, PluginDeclaration } from '../../../types'
 import { RiLoader2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { uploadFile } from '@/service/plugins'
 import Card from '../../../card'
 
diff --git a/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx b/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx
index 8a4e0bd82a..ac8b458406 100644
--- a/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx
@@ -5,7 +5,7 @@ import { RiLoader2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useEffect, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import useCheckInstalled from '@/app/components/plugins/install-plugin/hooks/use-check-installed'
 import { useAppContext } from '@/context/app-context'
 import { useInstallPackageFromMarketPlace, usePluginDeclarationFromMarketPlace, usePluginTaskList, useUpdatePackageFromMarketPlace } from '@/service/use-plugins'
@@ -133,10 +133,10 @@ const Installed: FC<Props> = ({
   return (
     <>
       <div className="flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3">
-        <div className="text-text-secondary system-md-regular">
+        <div className="system-md-regular text-text-secondary">
           <p>{t(`${i18nPrefix}.readyToInstall`, { ns: 'plugin' })}</p>
           {!isDifyVersionCompatible && (
-            <p className="text-text-warning system-md-regular">
+            <p className="system-md-regular text-text-warning">
               {t('difyVersionNotCompatible', { ns: 'plugin', minimalDifyVersion: pluginDeclaration?.manifest.meta.minimum_dify_version })}
             </p>
           )}
diff --git a/web/app/components/plugins/marketplace/list/card-wrapper.tsx b/web/app/components/plugins/marketplace/list/card-wrapper.tsx
index 63f9a419d9..6cab636392 100644
--- a/web/app/components/plugins/marketplace/list/card-wrapper.tsx
+++ b/web/app/components/plugins/marketplace/list/card-wrapper.tsx
@@ -6,7 +6,7 @@ import { useBoolean } from 'ahooks'
 import { useTheme } from 'next-themes'
 import * as React from 'react'
 import { useMemo } from 'react'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import Card from '@/app/components/plugins/card'
 import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
 import { useTags } from '@/app/components/plugins/hooks'
@@ -43,7 +43,7 @@ const CardWrapperComponent = ({
   if (showInstallButton) {
     return (
       <div
-        className="group relative cursor-pointer rounded-xl  hover:bg-components-panel-on-panel-item-bg-hover"
+        className="group relative cursor-pointer rounded-xl hover:bg-components-panel-on-panel-item-bg-hover"
       >
         <Card
           key={plugin.name}
@@ -55,7 +55,7 @@ const CardWrapperComponent = ({
             />
           )}
         />
-        <div className="absolute bottom-0 hidden w-full items-center space-x-2 rounded-b-xl bg-linear-to-tr from-components-panel-on-panel-item-bg to-background-gradient-mask-transparent px-4 pb-4 pt-4 group-hover:flex">
+        <div className="absolute bottom-0 hidden w-full items-center space-x-2 rounded-b-xl bg-linear-to-tr from-components-panel-on-panel-item-bg to-background-gradient-mask-transparent px-4 pt-4 pb-4 group-hover:flex">
           <Button
             variant="primary"
             className="w-[calc(50%-4px)]"
diff --git a/web/app/components/plugins/plugin-auth/authorize/add-api-key-button.tsx b/web/app/components/plugins/plugin-auth/authorize/add-api-key-button.tsx
index 0f9ac84bf9..2db1751bdc 100644
--- a/web/app/components/plugins/plugin-auth/authorize/add-api-key-button.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/add-api-key-button.tsx
@@ -1,11 +1,11 @@
 import type { PluginPayload } from '../types'
-import type { ButtonProps } from '@/app/components/base/button'
 import type { FormSchema } from '@/app/components/base/form/types'
+import type { ButtonProps } from '@/app/components/base/ui/button'
 import {
   memo,
   useState,
 } from 'react'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import ApiKeyModal from './api-key-modal'
 
 export type AddApiKeyButtonProps = {
diff --git a/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx b/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx
index 08a19a1b17..fa094e467d 100644
--- a/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx
@@ -1,6 +1,6 @@
 import type { PluginPayload } from '../types'
-import type { ButtonProps } from '@/app/components/base/button'
 import type { FormSchema } from '@/app/components/base/form/types'
+import type { ButtonProps } from '@/app/components/base/ui/button'
 import {
   RiClipboardLine,
   RiEqualizer2Line,
@@ -15,8 +15,8 @@ import {
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import Badge from '@/app/components/base/badge'
-import Button from '@/app/components/base/button'
 import { FormTypeEnum } from '@/app/components/base/form/types'
+import { Button } from '@/app/components/base/ui/button'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
 import { openOAuthPopup } from '@/hooks/use-oauth'
 import { cn } from '@/utils/classnames'
@@ -94,12 +94,12 @@ const AddOAuthButton = ({
             <RiInformation2Fill className="h-5 w-5 text-text-accent" />
           </div>
           <div className="w-0 grow">
-            <div className="system-sm-regular mb-1.5">
+            <div className="mb-1.5 system-sm-regular">
               {t('auth.clientInfo', { ns: 'plugin' })}
             </div>
             {
               redirect_uri && (
-                <div className="system-sm-medium flex w-full py-0.5">
+                <div className="flex w-full py-0.5 system-sm-medium">
                   <div className="w-0 grow wrap-break-word break-all">{redirect_uri}</div>
                   <ActionButton
                     className="shrink-0"
@@ -114,7 +114,7 @@ const AddOAuthButton = ({
             }
           </div>
         </div>
-        <div className="system-sm-medium flex h-6 items-center text-text-secondary">
+        <div className="flex h-6 items-center system-sm-medium text-text-secondary">
           {renderI18nObject(item.label as Record<string, string>)}
           {
             item.required && (
@@ -209,7 +209,7 @@ const AddOAuthButton = ({
                 is_oauth_custom_client_enabled && (
                   <Badge
                     className={cn(
-                      'ml-1 mr-0.5',
+                      'mr-0.5 ml-1',
                       buttonVariant === 'primary' && 'border-text-primary-on-surface bg-components-badge-bg-dimm text-text-primary-on-surface',
                     )}
                   >
diff --git a/web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx b/web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx
index 8ae5eb965b..625fcaa980 100644
--- a/web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx
@@ -14,9 +14,9 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import AuthForm from '@/app/components/base/form/form-scenarios/auth'
 import Modal from '@/app/components/base/modal/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { ReadmeEntrance } from '../../readme-panel/entrance'
 import { ReadmeShowType } from '../../readme-panel/store'
diff --git a/web/app/components/plugins/plugin-auth/authorized-in-data-source-node.tsx b/web/app/components/plugins/plugin-auth/authorized-in-data-source-node.tsx
index 57e7b8b43e..0e111d6237 100644
--- a/web/app/components/plugins/plugin-auth/authorized-in-data-source-node.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized-in-data-source-node.tsx
@@ -3,7 +3,7 @@ import {
   memo,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 import { cn } from '@/utils/classnames'
 
diff --git a/web/app/components/plugins/plugin-auth/authorized-in-node.tsx b/web/app/components/plugins/plugin-auth/authorized-in-node.tsx
index 4ed2bcd6d7..d7c52322e0 100644
--- a/web/app/components/plugins/plugin-auth/authorized-in-node.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized-in-node.tsx
@@ -9,7 +9,7 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 import { cn } from '@/utils/classnames'
 import {
diff --git a/web/app/components/plugins/plugin-auth/authorized/index.tsx b/web/app/components/plugins/plugin-auth/authorized/index.tsx
index 3888be2d8a..cb2e8aaca1 100644
--- a/web/app/components/plugins/plugin-auth/authorized/index.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized/index.tsx
@@ -12,13 +12,13 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import Indicator from '@/app/components/header/indicator'
 import { cn } from '@/utils/classnames'
@@ -239,7 +239,7 @@ const Authorized = ({
                 !!oAuthCredentials.length && (
                   <div className="p-1">
                     <div className={cn(
-                      'px-3 pb-0.5 pt-1 text-text-tertiary system-xs-medium',
+                      'px-3 pt-1 pb-0.5 system-xs-medium text-text-tertiary',
                       showItemSelectedIcon && 'pl-7',
                     )}
                     >
@@ -269,7 +269,7 @@ const Authorized = ({
                 !!apiKeyCredentials.length && (
                   <div className="p-1">
                     <div className={cn(
-                      'px-3 pb-0.5 pt-1 text-text-tertiary system-xs-medium',
+                      'px-3 pt-1 pb-0.5 system-xs-medium text-text-tertiary',
                       showItemSelectedIcon && 'pl-7',
                     )}
                     >
diff --git a/web/app/components/plugins/plugin-auth/authorized/item.tsx b/web/app/components/plugins/plugin-auth/authorized/item.tsx
index 652d606de8..3efad1ae48 100644
--- a/web/app/components/plugins/plugin-auth/authorized/item.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized/item.tsx
@@ -13,9 +13,9 @@ import {
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import Badge from '@/app/components/base/badge'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 import { cn } from '@/utils/classnames'
 import { CredentialTypeEnum } from '../types'
@@ -127,11 +127,11 @@ const Item = ({
               )
             }
             <Indicator
-              className="ml-2 mr-1.5 shrink-0"
+              className="mr-1.5 ml-2 shrink-0"
               color={credential.not_allowed_to_use ? 'gray' : 'green'}
             />
             <div
-              className="system-md-regular truncate text-text-secondary"
+              className="truncate system-md-regular text-text-secondary"
               title={credential.name}
             >
               {credential.name}
diff --git a/web/app/components/plugins/plugin-auth/plugin-auth-in-agent.tsx b/web/app/components/plugins/plugin-auth/plugin-auth-in-agent.tsx
index f2ed8bf57e..fb7b81195e 100644
--- a/web/app/components/plugins/plugin-auth/plugin-auth-in-agent.tsx
+++ b/web/app/components/plugins/plugin-auth/plugin-auth-in-agent.tsx
@@ -9,7 +9,7 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 import { cn } from '@/utils/classnames'
 import Authorize from './authorize'
diff --git a/web/app/components/plugins/plugin-auth/plugin-auth-in-datasource-node.tsx b/web/app/components/plugins/plugin-auth/plugin-auth-in-datasource-node.tsx
index e67027aafa..e3df399a1c 100644
--- a/web/app/components/plugins/plugin-auth/plugin-auth-in-datasource-node.tsx
+++ b/web/app/components/plugins/plugin-auth/plugin-auth-in-datasource-node.tsx
@@ -2,7 +2,7 @@ import type { ReactNode } from 'react'
 import { RiAddLine } from '@remixicon/react'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 
 type PluginAuthInDataSourceNodeProps = {
   children?: ReactNode
diff --git a/web/app/components/plugins/plugin-detail-panel/datasource-action-list.tsx b/web/app/components/plugins/plugin-detail-panel/datasource-action-list.tsx
index f5b11d6ecb..cafdb7b4b9 100644
--- a/web/app/components/plugins/plugin-detail-panel/datasource-action-list.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/datasource-action-list.tsx
@@ -1,5 +1,5 @@
 // import { useAppContext } from '@/context/app-context'
-// import Button from '@/app/components/base/button'
+// import { Button } from '@/app/components/base/ui/button'
 // import Indicator from '@/app/components/header/indicator'
 // import ToolItem from '@/app/components/tools/provider/tool-item'
 // import ConfigCredential from '@/app/components/tools/setting/build-in/config-credentials'
@@ -49,9 +49,9 @@ const ActionList = ({
     return null
 
   return (
-    <div className="px-4 pb-4 pt-2">
+    <div className="px-4 pt-2 pb-4">
       <div className="mb-1 py-1">
-        <div className="system-sm-semibold-uppercase mb-1 flex h-6 items-center justify-between text-text-secondary">
+        <div className="mb-1 flex h-6 items-center justify-between system-sm-semibold-uppercase text-text-secondary">
           {t('detailPanel.actionNum', { ns: 'plugin', num: data.length, action: data.length > 1 ? 'actions' : 'action' })}
           {/* {provider.is_team_authorization && provider.allow_delete && (
             <Button
diff --git a/web/app/components/plugins/plugin-detail-panel/detail-header/__tests__/index.spec.tsx b/web/app/components/plugins/plugin-detail-panel/detail-header/__tests__/index.spec.tsx
index 27ef4e7eb3..84a61cd643 100644
--- a/web/app/components/plugins/plugin-detail-panel/detail-header/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/detail-header/__tests__/index.spec.tsx
@@ -45,8 +45,8 @@ vi.mock('@/app/components/base/action-button', () => ({
   ),
 }))
 
-vi.mock('@/app/components/base/button', () => ({
-  default: ({ children, onClick }: { children: React.ReactNode, onClick?: () => void }) => (
+vi.mock('@/app/components/base/ui/button', () => ({
+  Button: ({ children, onClick }: { children: React.ReactNode, onClick?: () => void }) => (
     <button onClick={onClick}>{children}</button>
   ),
 }))
diff --git a/web/app/components/plugins/plugin-detail-panel/detail-header/index.tsx b/web/app/components/plugins/plugin-detail-panel/detail-header/index.tsx
index e3e80ef566..63716a4dc2 100644
--- a/web/app/components/plugins/plugin-detail-panel/detail-header/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/detail-header/index.tsx
@@ -5,7 +5,7 @@ import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import Badge from '@/app/components/base/badge'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { AuthCategory, PluginAuth } from '@/app/components/plugins/plugin-auth'
 import OperationDropdown from '@/app/components/plugins/plugin-detail-panel/operation-dropdown'
@@ -176,7 +176,7 @@ const DetailHeader = ({
                     text={(
                       <>
                         <div>{isFromGitHub ? (meta?.version ?? version ?? '') : version}</div>
-                        {isFromMarketplace && !isReadmeView && <span aria-hidden className="i-ri-arrow-left-right-line ml-1 h-3 w-3 text-text-tertiary" />}
+                        {isFromMarketplace && !isReadmeView && <span aria-hidden className="ml-1 i-ri-arrow-left-right-line h-3 w-3 text-text-tertiary" />}
                       </>
                     )}
                     hasRedCornerMark={hasNewVersion}
@@ -269,7 +269,7 @@ const DetailHeader = ({
       )}
 
       {/* Description */}
-      {!isReadmeView && <Description className="mb-2 mt-3 h-auto" text={description[locale]} descriptionLineRows={2} />}
+      {!isReadmeView && <Description className="mt-3 mb-2 h-auto" text={description[locale]} descriptionLineRows={2} />}
 
       {/* Plugin Auth for Tools */}
       {category === PluginCategoryEnum.tool && !isReadmeView && (
diff --git a/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx b/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
index 28d32f32cb..467ff43f57 100644
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
@@ -6,8 +6,8 @@ import { RiArrowRightUpLine, RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-import Button from '@/app/components/base/button'
 import Drawer from '@/app/components/base/drawer'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
@@ -81,17 +81,17 @@ const EndpointModal: FC<Props> = ({
       footer={null}
       mask
       positionCenter={false}
-      panelClassName={cn('mb-2 mr-2 mt-[64px] w-[420px]! max-w-[420px]! justify-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg! p-0! shadow-xl')}
+      panelClassName={cn('mt-[64px] mr-2 mb-2 w-[420px]! max-w-[420px]! justify-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg! p-0! shadow-xl')}
     >
       <>
         <div className="p-4 pb-2">
           <div className="flex items-center justify-between">
-            <div className="text-text-primary system-xl-semibold">{t('detailPanel.endpointModalTitle', { ns: 'plugin' })}</div>
+            <div className="system-xl-semibold text-text-primary">{t('detailPanel.endpointModalTitle', { ns: 'plugin' })}</div>
             <ActionButton onClick={onCancel}>
               <RiCloseLine className="h-4 w-4" />
             </ActionButton>
           </div>
-          <div className="mt-0.5 text-text-tertiary system-xs-regular">{t('detailPanel.endpointModalDesc', { ns: 'plugin' })}</div>
+          <div className="mt-0.5 system-xs-regular text-text-tertiary">{t('detailPanel.endpointModalDesc', { ns: 'plugin' })}</div>
           <ReadmeEntrance pluginDetail={pluginDetail} className="px-0 pt-3" />
         </div>
         <div className="grow overflow-y-auto">
@@ -112,7 +112,7 @@ const EndpointModal: FC<Props> = ({
                       href={item.url}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="inline-flex items-center text-text-accent-secondary body-xs-regular"
+                      className="inline-flex items-center body-xs-regular text-text-accent-secondary"
                     >
                       {t('howToGet', { ns: 'tools' })}
                       <RiArrowRightUpLine className="ml-1 h-3 w-3" />
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx
index da9ca3e7da..db4ce41d40 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx
@@ -6,9 +6,9 @@ import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ActionButton, ActionButtonState } from '@/app/components/base/action-button'
 import Badge from '@/app/components/base/badge'
-import { Button } from '@/app/components/base/button'
 import CustomSelect from '@/app/components/base/select/custom'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { openOAuthPopup } from '@/hooks/use-oauth'
 import { useInitiateTriggerOAuth, useTriggerOAuthConfig, useTriggerProviderInfo } from '@/service/use-triggers'
@@ -73,7 +73,7 @@ export const CreateSubscriptionButton = ({ buttonType = CreateButtonType.FULL_BU
         tag: !showCustomBadge
           ? null
           : (
-              <Badge className="ml-1 mr-0.5">
+              <Badge className="mr-0.5 ml-1">
                 {t('auth.custom', { ns: 'plugin' })}
               </Badge>
             ),
@@ -175,7 +175,7 @@ export const CreateSubscriptionButton = ({ buttonType = CreateButtonType.FULL_BU
                     {buttonTextMap[methodType]}
                     {methodType === SupportedCreationMethods.OAUTH && oauthConfig?.custom_enabled && oauthConfig?.custom_configured && (
                       <Badge
-                        className="ml-1 mr-0.5 border-text-primary-on-surface bg-components-badge-bg-dimm text-text-primary-on-surface"
+                        className="mr-0.5 ml-1 border-text-primary-on-surface bg-components-badge-bg-dimm text-text-primary-on-surface"
                       >
                         {t('auth.custom', { ns: 'plugin' })}
                       </Badge>
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/oauth-client.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/oauth-client.tsx
index d4bc92169c..c4ae63ab66 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/oauth-client.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/oauth-client.tsx
@@ -5,9 +5,9 @@ import {
   RiInformation2Fill,
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { BaseForm } from '@/app/components/base/form/components/base'
 import Modal from '@/app/components/base/modal/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import OptionCard from '@/app/components/workflow/nodes/_base/components/option-card'
 import { usePluginStore } from '../../store'
@@ -76,7 +76,7 @@ export const OAuthClientSettingsModal = ({ oauthConfig, onClose, showOAuthCreate
         </div>
       )}
     >
-      <div className="system-sm-medium mb-2 text-text-secondary">
+      <div className="mb-2 system-sm-medium text-text-secondary">
         {t('subscription.addType.options.oauth.clientTitle', { ns: 'pluginTrigger' })}
       </div>
 
@@ -100,10 +100,10 @@ export const OAuthClientSettingsModal = ({ oauthConfig, onClose, showOAuthCreate
             <RiInformation2Fill className="h-5 w-5 shrink-0 text-text-accent" />
           </div>
           <div className="flex-1 text-text-secondary">
-            <div className="system-sm-regular whitespace-pre-wrap leading-4">
+            <div className="system-sm-regular leading-4 whitespace-pre-wrap">
               {t('modal.oauthRedirectInfo', { ns: 'pluginTrigger' })}
             </div>
-            <div className="system-sm-medium my-1.5 break-all leading-4">
+            <div className="my-1.5 system-sm-medium leading-4 break-all">
               {oauthConfig?.redirect_uri}
             </div>
             <Button
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-credentials-form.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-credentials-form.tsx
index f4d39c9ec1..997d2ac131 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-credentials-form.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-credentials-form.tsx
@@ -8,8 +8,8 @@ import {
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
 import { addDefaultValue, toolCredentialToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-item.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-item.tsx
index b35770f23d..440a27bc21 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-item.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-item.tsx
@@ -9,11 +9,11 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import AppIcon from '@/app/components/base/app-icon'
-import Button from '@/app/components/base/button'
 import { Group } from '@/app/components/base/icons/src/vender/other'
 import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
 import { ToolTipContent } from '@/app/components/base/tooltip/content'
+import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 import { InstallPluginButton } from '@/app/components/workflow/nodes/_base/components/install-plugin-button'
 import { useMCPToolAvailability } from '@/app/components/workflow/nodes/_base/components/mcp-tool-availability'
@@ -95,8 +95,8 @@ const ToolItem = ({
         </div>
       )}
       <div className={cn('grow truncate pl-0.5', isTransparent && 'opacity-50', isShowCanNotChooseMCPTip && 'opacity-30')}>
-        <div className="text-text-tertiary system-2xs-medium-uppercase">{providerNameText}</div>
-        <div className="text-text-secondary system-xs-medium">{toolLabel}</div>
+        <div className="system-2xs-medium-uppercase text-text-tertiary">{providerNameText}</div>
+        <div className="system-xs-medium text-text-secondary">{toolLabel}</div>
       </div>
       <div className="hidden items-center gap-1 group-hover:flex">
         {!noAuth && !isError && !uninstalled && !versionMismatch && !isShowCanNotChooseMCPTip && (
diff --git a/web/app/components/plugins/plugin-mutation-model/index.tsx b/web/app/components/plugins/plugin-mutation-model/index.tsx
index 2ac5368346..4e8478f8ad 100644
--- a/web/app/components/plugins/plugin-mutation-model/index.tsx
+++ b/web/app/components/plugins/plugin-mutation-model/index.tsx
@@ -3,8 +3,8 @@ import type { FC, ReactNode } from 'react'
 import type { Plugin } from '../types'
 import * as React from 'react'
 import { memo } from 'react'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import Card from '@/app/components/plugins/card'
 
 type Props = {
@@ -40,7 +40,7 @@ const PluginMutationModal: FC<Props> = ({
       closable
       title={modelTitle}
     >
-      <div className="system-md-regular mb-2 mt-3 text-text-secondary">
+      <div className="mt-3 mb-2 system-md-regular text-text-secondary">
         {description}
       </div>
       <div className="flex flex-wrap content-start items-start gap-1 self-stretch rounded-2xl bg-background-section-burn p-2">
diff --git a/web/app/components/plugins/plugin-page/__tests__/debug-info.spec.tsx b/web/app/components/plugins/plugin-page/__tests__/debug-info.spec.tsx
index ceec84a286..2af44ecf97 100644
--- a/web/app/components/plugins/plugin-page/__tests__/debug-info.spec.tsx
+++ b/web/app/components/plugins/plugin-page/__tests__/debug-info.spec.tsx
@@ -15,8 +15,8 @@ vi.mock('@/service/use-plugins', () => ({
   useDebugKey: () => mockDebugKey,
 }))
 
-vi.mock('@/app/components/base/button', () => ({
-  default: ({ children }: { children: React.ReactNode }) => <button data-testid="debug-button">{children}</button>,
+vi.mock('@/app/components/base/ui/button', () => ({
+  Button: ({ children }: { children: React.ReactNode }) => <button data-testid="debug-button">{children}</button>,
 }))
 
 vi.mock('@/app/components/base/tooltip', () => ({
diff --git a/web/app/components/plugins/plugin-page/__tests__/install-plugin-dropdown.spec.tsx b/web/app/components/plugins/plugin-page/__tests__/install-plugin-dropdown.spec.tsx
index d3b72ebe5b..28aec206f1 100644
--- a/web/app/components/plugins/plugin-page/__tests__/install-plugin-dropdown.spec.tsx
+++ b/web/app/components/plugins/plugin-page/__tests__/install-plugin-dropdown.spec.tsx
@@ -35,8 +35,8 @@ vi.mock('@/app/components/base/icons/src/vender/solid/mediaAndDevices', () => ({
   MagicBox: () => <span data-testid="magic-box-icon">magic</span>,
 }))
 
-vi.mock('@/app/components/base/button', () => ({
-  default: ({ children }: { children: React.ReactNode }) => <span data-testid="button-content">{children}</span>,
+vi.mock('@/app/components/base/ui/button', () => ({
+  Button: ({ children }: { children: React.ReactNode }) => <span data-testid="button-content">{children}</span>,
 }))
 
 vi.mock('@/app/components/base/portal-to-follow-elem', async () => {
diff --git a/web/app/components/plugins/plugin-page/debug-info.tsx b/web/app/components/plugins/plugin-page/debug-info.tsx
index f3eed424f4..4b3590f15c 100644
--- a/web/app/components/plugins/plugin-page/debug-info.tsx
+++ b/web/app/components/plugins/plugin-page/debug-info.tsx
@@ -6,8 +6,8 @@ import {
 } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import { useDocLink } from '@/context/i18n'
 import { useDebugKey } from '@/service/use-plugins'
 import KeyValueItem from '../base/key-value-item'
@@ -32,7 +32,7 @@ const DebugInfo: FC = () => {
       popupContent={(
         <>
           <div className="flex items-center gap-1 self-stretch">
-            <span className="system-sm-semibold flex shrink-0 grow basis-0 flex-col items-start justify-center text-text-secondary">{t(`${i18nPrefix}.title`, { ns: 'plugin' })}</span>
+            <span className="flex shrink-0 grow basis-0 flex-col items-start justify-center system-sm-semibold text-text-secondary">{t(`${i18nPrefix}.title`, { ns: 'plugin' })}</span>
             <a href={docLink('/develop-plugin/features-and-specs/plugin-types/remote-debug-a-plugin')} target="_blank" className="flex cursor-pointer items-center gap-0.5 text-text-accent-light-mode-only">
               <span className="system-xs-medium">{t(`${i18nPrefix}.viewDocs`, { ns: 'plugin' })}</span>
               <RiArrowRightUpLine className="h-3 w-3" />
diff --git a/web/app/components/plugins/plugin-page/empty/index.tsx b/web/app/components/plugins/plugin-page/empty/index.tsx
index 4141f00a46..5141519e35 100644
--- a/web/app/components/plugins/plugin-page/empty/index.tsx
+++ b/web/app/components/plugins/plugin-page/empty/index.tsx
@@ -3,11 +3,11 @@ import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { Group } from '@/app/components/base/icons/src/vender/other'
 import { FileZip } from '@/app/components/base/icons/src/vender/solid/files'
 import { Github } from '@/app/components/base/icons/src/vender/solid/general'
 import { MagicBox } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
+import { Button } from '@/app/components/base/ui/button'
 import InstallFromGitHub from '@/app/components/plugins/install-plugin/install-from-github'
 import InstallFromLocalPackage from '@/app/components/plugins/install-plugin/install-from-local-package'
 import { SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS } from '@/config'
@@ -79,10 +79,10 @@ const Empty = () => {
           border border-dashed border-divider-deep bg-components-card-bg shadow-xl shadow-shadow-shadow-5"
           >
             <Group className="h-5 w-5 text-text-tertiary" />
-            <Line className="absolute -right-px top-1/2 -translate-y-1/2" />
-            <Line className="absolute -left-px top-1/2 -translate-y-1/2" />
-            <Line className="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 rotate-90" />
-            <Line className="absolute left-1/2 top-full -translate-x-1/2 -translate-y-1/2 rotate-90" />
+            <Line className="absolute top-1/2 -right-px -translate-y-1/2" />
+            <Line className="absolute top-1/2 -left-px -translate-y-1/2" />
+            <Line className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-90" />
+            <Line className="absolute top-full left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-90" />
           </div>
           <div className="system-md-regular text-text-tertiary">
             {text}
diff --git a/web/app/components/plugins/plugin-page/index.tsx b/web/app/components/plugins/plugin-page/index.tsx
index 0bc953f4a3..2de6b9228a 100644
--- a/web/app/components/plugins/plugin-page/index.tsx
+++ b/web/app/components/plugins/plugin-page/index.tsx
@@ -11,9 +11,9 @@ import { useBoolean } from 'ahooks'
 import { noop } from 'es-toolkit/function'
 import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import TabSlider from '@/app/components/base/tab-slider'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import ReferenceSettingModal from '@/app/components/plugins/reference-setting-modal'
 import { MARKETPLACE_API_PREFIX, SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS } from '@/config'
 import { useGlobalPublicStore } from '@/context/global-public-context'
@@ -155,7 +155,7 @@ const PluginPage = ({
     >
       <div
         className={cn(
-          'sticky top-0 z-10 flex min-h-[60px] items-center gap-1 self-stretch bg-components-panel-bg px-12 pb-2 pt-4',
+          'sticky top-0 z-10 flex min-h-[60px] items-center gap-1 self-stretch bg-components-panel-bg px-12 pt-4 pb-2',
           isExploringMarketplace && 'bg-background-body',
         )}
       >
diff --git a/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx b/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
index 57a5cb25d9..6ba782783c 100644
--- a/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
+++ b/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
@@ -4,7 +4,6 @@ import { RiAddLine, RiArrowDownSLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { FileZip } from '@/app/components/base/icons/src/vender/solid/files'
 import { Github } from '@/app/components/base/icons/src/vender/solid/general'
 import { MagicBox } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
@@ -13,6 +12,7 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import InstallFromGitHub from '@/app/components/plugins/install-plugin/install-from-github'
 import InstallFromLocalPackage from '@/app/components/plugins/install-plugin/install-from-local-package'
 import { SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS } from '@/config'
@@ -96,7 +96,7 @@ const InstallPluginDropdown = ({
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className="z-1002">
           <div className="shadows-shadow-lg flex w-[200px] flex-col items-start rounded-xl border border-components-panel-border bg-components-panel-bg-blur p-1 pb-2">
-            <span className="system-xs-medium-uppercase flex items-start self-stretch pb-0.5 pl-2 pr-3 pt-1 text-text-tertiary">
+            <span className="flex items-start self-stretch pt-1 pr-3 pb-0.5 pl-2 system-xs-medium-uppercase text-text-tertiary">
               {t('installFrom', { ns: 'plugin' })}
             </span>
             <input
@@ -126,7 +126,7 @@ const InstallPluginDropdown = ({
                   }}
                 >
                   <Icon className="h-4 w-4 text-text-tertiary" />
-                  <span className="system-md-regular px-1 text-text-secondary">{text}</span>
+                  <span className="px-1 system-md-regular text-text-secondary">{text}</span>
                 </div>
               ))}
             </div>
diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/components/error-plugin-item.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/components/error-plugin-item.tsx
index a4f59be20c..81f559c9aa 100644
--- a/web/app/components/plugins/plugin-page/plugin-tasks/components/error-plugin-item.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-tasks/components/error-plugin-item.tsx
@@ -3,7 +3,7 @@ import type { Plugin, PluginStatus } from '@/app/components/plugins/types'
 import type { Locale } from '@/i18n-config'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import InstallFromMarketplace from '@/app/components/plugins/install-plugin/install-from-marketplace'
 import { PluginSource } from '@/app/components/plugins/types'
 import { fetchPluginInfoFromMarketPlace } from '@/service/plugins'
diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-task-list.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-task-list.tsx
index 728d3aceab..fa21a3222c 100644
--- a/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-task-list.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-task-list.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
 import type { PluginStatus } from '@/app/components/plugins/types'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { useGetLanguage } from '@/context/i18n'
 import ErrorPluginItem from './error-plugin-item'
 import PluginSection from './plugin-section'
@@ -75,7 +75,7 @@ const PluginTaskList: FC<PluginTaskListProps> = ({
       {/* Error Plugins Section */}
       {errorPlugins.length > 0 && (
         <>
-          <div className="sticky top-0 flex h-7 items-center justify-between px-2 pt-1 text-text-secondary system-sm-semibold-uppercase">
+          <div className="sticky top-0 flex h-7 items-center justify-between px-2 pt-1 system-sm-semibold-uppercase text-text-secondary">
             {t('task.installedError', { ns: 'plugin', errorLength: errorPlugins.length })}
             <Button
               className="shrink-0"
diff --git a/web/app/components/plugins/plugin-page/plugins-panel.tsx b/web/app/components/plugins/plugin-page/plugins-panel.tsx
index efa469f59d..142c9329cc 100644
--- a/web/app/components/plugins/plugin-page/plugins-panel.tsx
+++ b/web/app/components/plugins/plugin-page/plugins-panel.tsx
@@ -4,8 +4,8 @@ import type { FilterState } from './filter-management'
 import { useDebounceFn } from 'ahooks'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
+import { Button } from '@/app/components/base/ui/button'
 import PluginDetailPanel from '@/app/components/plugins/plugin-detail-panel'
 import { useGetLanguage } from '@/context/i18n'
 import { renderI18nObject } from '@/i18n-config'
@@ -77,7 +77,7 @@ const PluginsPanel = () => {
 
   return (
     <>
-      <div className="flex flex-col items-start justify-center gap-3 self-stretch px-12 pb-3 pt-1">
+      <div className="flex flex-col items-start justify-center gap-3 self-stretch px-12 pt-1 pb-3">
         <div className="h-px self-stretch bg-divider-subtle"></div>
         <FilterManagement
           onFilterChange={handleFilterChange}
diff --git a/web/app/components/plugins/provider-card.tsx b/web/app/components/plugins/provider-card.tsx
index 2748b34928..f87a742e1d 100644
--- a/web/app/components/plugins/provider-card.tsx
+++ b/web/app/components/plugins/provider-card.tsx
@@ -7,7 +7,7 @@ import { useTheme } from 'next-themes'
 import * as React from 'react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import InstallFromMarketplace from '@/app/components/plugins/install-plugin/install-from-marketplace'
 import { getPluginLinkInMarketplace } from '@/app/components/plugins/marketplace/utils'
 import { useLocale } from '@/context/i18n'
@@ -54,7 +54,7 @@ const ProviderCardComponent: FC<Props> = ({
           <div className="mb-1 flex h-4 items-center justify-between">
             <div className="flex items-center">
               <div className="system-xs-regular text-text-tertiary">{org}</div>
-              <div className="system-xs-regular mx-2 text-text-quaternary">·</div>
+              <div className="mx-2 system-xs-regular text-text-quaternary">·</div>
               <DownloadCount downloadCount={payload.install_count || 0} />
             </div>
           </div>
@@ -67,7 +67,7 @@ const ProviderCardComponent: FC<Props> = ({
         ))}
       </div>
       <div
-        className="absolute bottom-0 left-0 right-0 hidden items-center gap-2 rounded-xl bg-linear-to-tr from-components-panel-on-panel-item-bg to-background-gradient-mask-transparent p-4 pt-4 group-hover:flex"
+        className="absolute right-0 bottom-0 left-0 hidden items-center gap-2 rounded-xl bg-linear-to-tr from-components-panel-on-panel-item-bg to-background-gradient-mask-transparent p-4 pt-4 group-hover:flex"
       >
         <Button
           className="grow"
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/plugins-picker.spec.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/plugins-picker.spec.tsx
index 4330f35bb4..299eecce54 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/plugins-picker.spec.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/plugins-picker.spec.tsx
@@ -5,8 +5,8 @@ import { AUTO_UPDATE_MODE } from '../types'
 
 const mockToolPicker = vi.fn()
 
-vi.mock('@/app/components/base/button', () => ({
-  default: ({
+vi.mock('@/app/components/base/ui/button', () => ({
+  Button: ({
     children,
   }: {
     children: React.ReactNode
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/strategy-picker.spec.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/strategy-picker.spec.tsx
index aec57a2739..e1e72fbde2 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/strategy-picker.spec.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/strategy-picker.spec.tsx
@@ -5,8 +5,8 @@ import { AUTO_UPDATE_STRATEGY } from '../types'
 
 let portalOpen = false
 
-vi.mock('@/app/components/base/button', () => ({
-  default: ({
+vi.mock('@/app/components/base/ui/button', () => ({
+  Button: ({
     children,
   }: {
     children: React.ReactNode
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-picker.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-picker.tsx
index e05b5d17ac..f02e0c4d1d 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-picker.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-picker.tsx
@@ -4,7 +4,7 @@ import { RiAddLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import NoPluginSelected from './no-plugin-selected'
 import PluginsSelected from './plugins-selected'
 import ToolPicker from './tool-picker'
@@ -39,7 +39,7 @@ const PluginsPicker: FC<Props> = ({
         ? (
             <div className="flex justify-between text-text-tertiary">
               <div className="system-xs-medium">{t(`${i18nPrefix}.${isExcludeMode ? 'excludeUpdate' : 'partialUPdate'}`, { ns: 'plugin', num: value.length })}</div>
-              <div className="system-xs-medium cursor-pointer" onClick={handleClear}>{t(`${i18nPrefix}.operation.clearAll`, { ns: 'plugin' })}</div>
+              <div className="cursor-pointer system-xs-medium" onClick={handleClear}>{t(`${i18nPrefix}.operation.clearAll`, { ns: 'plugin' })}</div>
             </div>
           )
         : (
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/strategy-picker.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/strategy-picker.tsx
index 7d58bfe004..0f85b95e3c 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/strategy-picker.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/strategy-picker.tsx
@@ -4,12 +4,12 @@ import {
 } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { AUTO_UPDATE_STRATEGY } from './types'
 
 const i18nPrefix = 'autoUpdate.strategy'
@@ -85,7 +85,7 @@ const StrategyPicker = ({
                   }
                 </div>
                 <div className="grow">
-                  <div className="system-sm-semibold mb-0.5 text-text-secondary">{option.label}</div>
+                  <div className="mb-0.5 system-sm-semibold text-text-secondary">{option.label}</div>
                   <div className="system-xs-regular text-text-tertiary">{option.description}</div>
                 </div>
               </div>
diff --git a/web/app/components/plugins/reference-setting-modal/index.tsx b/web/app/components/plugins/reference-setting-modal/index.tsx
index f6955555fa..bbf19d8c0a 100644
--- a/web/app/components/plugins/reference-setting-modal/index.tsx
+++ b/web/app/components/plugins/reference-setting-modal/index.tsx
@@ -5,8 +5,8 @@ import type { Permissions, ReferenceSetting } from '@/app/components/plugins/typ
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { PermissionType } from '@/app/components/plugins/types'
 import OptionCard from '@/app/components/workflow/nodes/_base/components/option-card'
 import { useGlobalPublicStore } from '@/context/global-public-context'
@@ -56,8 +56,8 @@ const PluginSettingModal: FC<Props> = ({
       className="w-[620px] max-w-[620px] p-0!"
     >
       <div className="shadows-shadow-xl flex w-full flex-col items-start rounded-2xl border border-components-panel-border bg-components-panel-bg">
-        <div className="flex items-start gap-2 self-stretch pb-3 pl-6 pr-14 pt-6">
-          <span className="title-2xl-semi-bold self-stretch text-text-primary">{t(`${i18nPrefix}.title`, { ns: 'plugin' })}</span>
+        <div className="flex items-start gap-2 self-stretch pt-6 pr-14 pb-3 pl-6">
+          <span className="self-stretch title-2xl-semi-bold text-text-primary">{t(`${i18nPrefix}.title`, { ns: 'plugin' })}</span>
         </div>
         <div className="flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3">
           {[
diff --git a/web/app/components/plugins/update-plugin/__tests__/from-market-place.spec.tsx b/web/app/components/plugins/update-plugin/__tests__/from-market-place.spec.tsx
index b66ab20a45..9d9ad77106 100644
--- a/web/app/components/plugins/update-plugin/__tests__/from-market-place.spec.tsx
+++ b/web/app/components/plugins/update-plugin/__tests__/from-market-place.spec.tsx
@@ -37,8 +37,8 @@ vi.mock('@/app/components/base/badge/index', () => ({
   default: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
 }))
 
-vi.mock('@/app/components/base/button', () => ({
-  default: ({
+vi.mock('@/app/components/base/ui/button', () => ({
+  Button: ({
     children,
     onClick,
     disabled,
diff --git a/web/app/components/plugins/update-plugin/downgrade-warning.tsx b/web/app/components/plugins/update-plugin/downgrade-warning.tsx
index 42348c929a..1f17dcd85f 100644
--- a/web/app/components/plugins/update-plugin/downgrade-warning.tsx
+++ b/web/app/components/plugins/update-plugin/downgrade-warning.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 
 const i18nPrefix = 'autoUpdate.pluginDowngradeWarning'
 
@@ -18,8 +18,8 @@ const DowngradeWarningModal = ({
   return (
     <>
       <div className="flex flex-col items-start gap-2 self-stretch">
-        <div className="text-text-primary title-2xl-semi-bold">{t(`${i18nPrefix}.title`, { ns: 'plugin' })}</div>
-        <div className="text-text-secondary system-md-regular">
+        <div className="title-2xl-semi-bold text-text-primary">{t(`${i18nPrefix}.title`, { ns: 'plugin' })}</div>
+        <div className="system-md-regular text-text-secondary">
           {t(`${i18nPrefix}.description`, { ns: 'plugin' })}
         </div>
       </div>
diff --git a/web/app/components/plugins/update-plugin/from-market-place.tsx b/web/app/components/plugins/update-plugin/from-market-place.tsx
index bbf56f7cfe..3d674cf9d4 100644
--- a/web/app/components/plugins/update-plugin/from-market-place.tsx
+++ b/web/app/components/plugins/update-plugin/from-market-place.tsx
@@ -5,7 +5,7 @@ import * as React from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge, { BadgeState } from '@/app/components/base/badge/index'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import {
   Dialog,
   DialogCloseButton,
@@ -166,10 +166,10 @@ const UpdatePluginModal: FC<Props> = ({
         )}
         {!doShowDowngradeWarningModal && (
           <>
-            <DialogTitle className="text-text-primary title-2xl-semi-bold">
+            <DialogTitle className="title-2xl-semi-bold text-text-primary">
               {t(`${i18nPrefix}.${uploadStep === UploadStep.installed ? 'successfulTitle' : 'title'}`, { ns: 'plugin' })}
             </DialogTitle>
-            <div className="mb-2 mt-3 text-text-secondary system-md-regular">
+            <div className="mt-3 mb-2 system-md-regular text-text-secondary">
               {t(`${i18nPrefix}.description`, { ns: 'plugin' })}
             </div>
             <div className="flex flex-wrap content-start items-start gap-1 self-stretch rounded-2xl bg-background-section-burn p-2">
diff --git a/web/app/components/rag-pipeline/components/__tests__/conversion.spec.tsx b/web/app/components/rag-pipeline/components/__tests__/conversion.spec.tsx
index dd6264daf5..71bade3235 100644
--- a/web/app/components/rag-pipeline/components/__tests__/conversion.spec.tsx
+++ b/web/app/components/rag-pipeline/components/__tests__/conversion.spec.tsx
@@ -41,8 +41,8 @@ vi.mock('@/app/components/base/ui/toast', () => ({
   toast: mockToast,
 }))
 
-vi.mock('@/app/components/base/button', () => ({
-  default: ({ children, onClick, ...props }: Record<string, unknown>) => (
+vi.mock('@/app/components/base/ui/button', () => ({
+  Button: ({ children, onClick, ...props }: Record<string, unknown>) => (
     <button onClick={onClick as () => void} {...props}>{children as string}</button>
   ),
 }))
diff --git a/web/app/components/rag-pipeline/components/__tests__/publish-as-knowledge-pipeline-modal.spec.tsx b/web/app/components/rag-pipeline/components/__tests__/publish-as-knowledge-pipeline-modal.spec.tsx
index 0d6687cbed..f9eb858b30 100644
--- a/web/app/components/rag-pipeline/components/__tests__/publish-as-knowledge-pipeline-modal.spec.tsx
+++ b/web/app/components/rag-pipeline/components/__tests__/publish-as-knowledge-pipeline-modal.spec.tsx
@@ -22,8 +22,8 @@ vi.mock('@/app/components/base/modal', () => ({
     isShow ? <div data-testid="modal">{children}</div> : null,
 }))
 
-vi.mock('@/app/components/base/button', () => ({
-  default: ({ children, onClick, disabled, ...props }: Record<string, unknown>) => (
+vi.mock('@/app/components/base/ui/button', () => ({
+  Button: ({ children, onClick, disabled, ...props }: Record<string, unknown>) => (
     <button onClick={onClick as () => void} disabled={disabled as boolean} {...props}>
       {children as string}
     </button>
diff --git a/web/app/components/rag-pipeline/components/__tests__/update-dsl-modal.spec.tsx b/web/app/components/rag-pipeline/components/__tests__/update-dsl-modal.spec.tsx
index 245a39cd0f..0fe856b8d9 100644
--- a/web/app/components/rag-pipeline/components/__tests__/update-dsl-modal.spec.tsx
+++ b/web/app/components/rag-pipeline/components/__tests__/update-dsl-modal.spec.tsx
@@ -100,8 +100,8 @@ vi.mock('@/app/components/app/create-from-dsl-modal/uploader', () => ({
   ),
 }))
 
-vi.mock('@/app/components/base/button', () => ({
-  default: ({ children, onClick, disabled, className, variant, loading }: {
+vi.mock('@/app/components/base/ui/button', () => ({
+  Button: ({ children, onClick, disabled, className, variant, loading }: {
     children: React.ReactNode
     onClick?: () => void
     disabled?: boolean
@@ -324,11 +324,11 @@ describe('UpdateDSLModal', () => {
       expect(screen.getByTestId('modal')).toBeInTheDocument()
     })
 
-    it('should render import button with warning variant', () => {
+    it('should render import button with primary destructive variant', () => {
       render(<UpdateDSLModal {...defaultProps} />)
 
       const importButton = screen.getByText('workflow.common.overwriteAndImport')
-      expect(importButton).toHaveAttribute('data-variant', 'warning')
+      expect(importButton).toHaveAttribute('data-variant', 'primary')
     })
 
     it('should render backup button with secondary variant', () => {
diff --git a/web/app/components/rag-pipeline/components/conversion.tsx b/web/app/components/rag-pipeline/components/conversion.tsx
index 2af9824120..a8f36d713d 100644
--- a/web/app/components/rag-pipeline/components/conversion.tsx
+++ b/web/app/components/rag-pipeline/components/conversion.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useParams } from '@/next/navigation'
 import { datasetDetailQueryKeyPrefix } from '@/service/knowledge/use-dataset'
@@ -61,7 +61,7 @@ const Conversion = () => {
             </span>
           </div>
         </div>
-        <div className="pb-8 pl-[25px] pr-0 pt-6">
+        <div className="pt-6 pr-0 pb-8 pl-[25px]">
           <div className="rounded-l-xl border border-effects-highlight bg-background-default p-1 shadow-md shadow-shadow-shadow-5 backdrop-blur-[5px]">
             <div className="overflow-hidden rounded-l-lg">
               <PipelineScreenShot />
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/editor/form/index.tsx b/web/app/components/rag-pipeline/components/panel/input-field/editor/form/index.tsx
index cf918117df..de003e78ba 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/editor/form/index.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/editor/form/index.tsx
@@ -2,10 +2,10 @@ import type { FormData, InputFieldFormProps } from './types'
 import type { MoreInfo } from '@/app/components/workflow/types'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import { useFileSizeLimit } from '@/app/components/base/file-uploader/hooks'
 import { useAppForm } from '@/app/components/base/form'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { ChangeType } from '@/app/components/workflow/types'
 import { useFileUploadConfig } from '@/service/use-common'
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/index.tsx b/web/app/components/rag-pipeline/components/panel/input-field/index.tsx
index 88d7789ef8..3ac7dbc342 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/index.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/index.tsx
@@ -10,9 +10,9 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useNodes } from 'reactflow'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
 import { useNodesSyncDraft } from '@/app/components/workflow/hooks'
 import { useStore } from '@/app/components/workflow/store'
@@ -102,7 +102,7 @@ const InputFieldPanel = () => {
   return (
     <div className="mr-1 flex h-full w-[400px] flex-col rounded-2xl border-y-[0.5px] border-l-[0.5px] border-components-panel-border bg-components-panel-bg-alt shadow-xl shadow-shadow-shadow-5">
       <div className="flex shrink-0 items-center p-4 pb-0">
-        <div className="system-xl-semibold grow text-text-primary">
+        <div className="grow system-xl-semibold text-text-primary">
           {t('inputFieldPanel.title', { ns: 'datasetPipeline' })}
         </div>
         <Button
@@ -127,7 +127,7 @@ const InputFieldPanel = () => {
           <RiCloseLine className="size-4 text-text-tertiary" />
         </button>
       </div>
-      <div className="system-sm-regular shrink-0 px-4 pb-2 pt-1 text-text-tertiary">
+      <div className="shrink-0 px-4 pt-1 pb-2 system-sm-regular text-text-tertiary">
         {t('inputFieldPanel.description', { ns: 'datasetPipeline' })}
       </div>
       <div className="flex grow flex-col overflow-y-auto">
diff --git a/web/app/components/rag-pipeline/components/panel/test-run/preparation/actions/index.tsx b/web/app/components/rag-pipeline/components/panel/test-run/preparation/actions/index.tsx
index d985aca795..17218f732b 100644
--- a/web/app/components/rag-pipeline/components/panel/test-run/preparation/actions/index.tsx
+++ b/web/app/components/rag-pipeline/components/panel/test-run/preparation/actions/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 
 type ActionsProps = {
   disabled?: boolean
diff --git a/web/app/components/rag-pipeline/components/panel/test-run/preparation/document-processing/actions.tsx b/web/app/components/rag-pipeline/components/panel/test-run/preparation/document-processing/actions.tsx
index cff7b6fdfe..40cdb7aa5c 100644
--- a/web/app/components/rag-pipeline/components/panel/test-run/preparation/document-processing/actions.tsx
+++ b/web/app/components/rag-pipeline/components/panel/test-run/preparation/document-processing/actions.tsx
@@ -1,7 +1,7 @@
 import type { CustomActionsProps } from '@/app/components/base/form/components/form/actions'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { useStore } from '@/app/components/workflow/store'
 import { WorkflowRunningStatus } from '@/app/components/workflow/types'
 
diff --git a/web/app/components/rag-pipeline/components/panel/test-run/result/result-preview/index.tsx b/web/app/components/rag-pipeline/components/panel/test-run/result/result-preview/index.tsx
index 5f23e2660d..b5688befbb 100644
--- a/web/app/components/rag-pipeline/components/panel/test-run/result/result-preview/index.tsx
+++ b/web/app/components/rag-pipeline/components/panel/test-run/result/result-preview/index.tsx
@@ -2,7 +2,7 @@ import { RiLoader2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { RAG_PIPELINE_PREVIEW_CHUNK_NUM } from '@/config'
 import { ChunkCardList } from '../../../../chunk-card-list'
 import { formatPreviewChunks } from './utils'
@@ -45,7 +45,7 @@ const ResultPreview = ({
       {outputs && previewChunks && (
         <div className="flex grow flex-col bg-background-body p-1">
           <ChunkCardList chunkType={outputs.chunk_structure} chunkInfo={previewChunks} />
-          <div className="system-xs-regular mt-1 flex items-center gap-x-2 text-text-tertiary">
+          <div className="mt-1 flex items-center gap-x-2 system-xs-regular text-text-tertiary">
             <div className="h-px flex-1 bg-linear-to-r from-background-gradient-mask-transparent to-divider-regular" />
             <span className="shrink-0truncate" title={t('result.resultPreview.footerTip', { ns: 'pipeline', count: RAG_PIPELINE_PREVIEW_CHUNK_NUM })}>
               {t('result.resultPreview.footerTip', { ns: 'pipeline', count: RAG_PIPELINE_PREVIEW_CHUNK_NUM })}
diff --git a/web/app/components/rag-pipeline/components/publish-as-knowledge-pipeline-modal.tsx b/web/app/components/rag-pipeline/components/publish-as-knowledge-pipeline-modal.tsx
index d077b6db95..67f6223a21 100644
--- a/web/app/components/rag-pipeline/components/publish-as-knowledge-pipeline-modal.tsx
+++ b/web/app/components/rag-pipeline/components/publish-as-knowledge-pipeline-modal.tsx
@@ -7,10 +7,10 @@ import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
 import AppIconPicker from '@/app/components/base/app-icon-picker'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
 import Textarea from '@/app/components/base/textarea'
+import { Button } from '@/app/components/base/ui/button'
 import { useWorkflowStore } from '@/app/components/workflow/store'
 
 type PublishAsKnowledgePipelineModalProps = {
@@ -82,11 +82,11 @@ const PublishAsKnowledgePipelineModal = ({
         onClose={noop}
         className="relative w-[520px]! p-0!"
       >
-        <div className="title-2xl-semi-bold relative flex items-center p-6 pb-3 pr-14 text-text-primary">
+        <div className="relative flex items-center p-6 pr-14 pb-3 title-2xl-semi-bold text-text-primary">
           {t('common.publishAs', { ns: 'pipeline' })}
           <div
             data-testid="publish-modal-close-btn"
-            className="absolute right-5 top-5 flex h-8 w-8 cursor-pointer items-center justify-center"
+            className="absolute top-5 right-5 flex h-8 w-8 cursor-pointer items-center justify-center"
             onClick={onCancel}
           >
             <RiCloseLine className="h-4 w-4 text-text-tertiary" />
@@ -95,7 +95,7 @@ const PublishAsKnowledgePipelineModal = ({
         <div className="px-6 py-3">
           <div className="mb-5 flex">
             <div className="mr-3 grow">
-              <div className="system-sm-medium mb-1 flex h-6 items-center text-text-secondary">
+              <div className="mb-1 flex h-6 items-center system-sm-medium text-text-secondary">
                 {t('common.publishAsPipeline.name', { ns: 'pipeline' })}
               </div>
               <Input
@@ -115,7 +115,7 @@ const PublishAsKnowledgePipelineModal = ({
             />
           </div>
           <div>
-            <div className="system-sm-medium mb-1 flex h-6 items-center text-text-secondary ">
+            <div className="mb-1 flex h-6 items-center system-sm-medium text-text-secondary">
               {t('common.publishAsPipeline.description', { ns: 'pipeline' })}
             </div>
             <Textarea
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/input-field-button.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/input-field-button.tsx
index 2c479d3268..55674b0242 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/input-field-button.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/input-field-button.tsx
@@ -1,7 +1,7 @@
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { InputField } from '@/app/components/base/icons/src/vender/pipeline'
+import { Button } from '@/app/components/base/ui/button'
 import { useStore } from '@/app/components/workflow/store'
 
 const InputFieldButton = () => {
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/popup.spec.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/popup.spec.tsx
index 043d16d89c..6834552201 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/popup.spec.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/popup.spec.tsx
@@ -74,8 +74,8 @@ vi.mock('@/app/components/workflow/store', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/button', () => ({
-  default: ({ children, onClick, disabled, variant, className }: Record<string, unknown>) => (
+vi.mock('@/app/components/base/ui/button', () => ({
+  Button: ({ children, onClick, disabled, variant, className }: Record<string, unknown>) => (
     <button
       onClick={onClick as () => void}
       disabled={disabled as boolean}
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/index.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/index.tsx
index a2d927458a..8f7e3c98e5 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/index.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/index.tsx
@@ -5,12 +5,12 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { useNodesSyncDraft } from '@/app/components/workflow/hooks'
 import Popup from './popup'
 
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
index e05fc2e542..68e59bafe8 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
@@ -5,11 +5,11 @@ import { useBoolean, useKeyPress } from 'ahooks'
 import { memo, useCallback, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { trackEvent } from '@/app/components/base/amplitude'
-import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'
 import Divider from '@/app/components/base/divider'
 import { SparklesSoft } from '@/app/components/base/icons/src/public/common'
 import PremiumBadge from '@/app/components/base/premium-badge'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useChecklistBeforePublish } from '@/app/components/workflow/hooks'
 import ShortcutsName from '@/app/components/workflow/shortcuts-name'
@@ -76,13 +76,13 @@ const Popup = () => {
         if (res) {
           toast.success(t('publishPipeline.success.message', { ns: 'datasetPipeline' }), {
             description: (
-              <div className="text-text-secondary system-xs-regular">
+              <div className="system-xs-regular text-text-secondary">
                 <Trans
                   i18nKey="publishPipeline.success.tip"
                   ns="datasetPipeline"
                   components={{
                     CustomLink: (
-                      <Link className="text-text-accent system-xs-medium" href={`/datasets/${datasetId}/documents`}>
+                      <Link className="system-xs-medium text-text-accent" href={`/datasets/${datasetId}/documents`}>
                       </Link>
                     ),
                   }}
@@ -129,10 +129,10 @@ const Popup = () => {
       toast.success(t('publishTemplate.success.message', { ns: 'datasetPipeline' }), {
         description: (
           <div className="flex flex-col gap-y-1">
-            <span className="text-text-secondary system-xs-regular">
+            <span className="system-xs-regular text-text-secondary">
               {t('publishTemplate.success.tip', { ns: 'datasetPipeline' })}
             </span>
-            <Link href={docLink()} target="_blank" className="inline-block text-text-accent system-xs-medium-uppercase">
+            <Link href={docLink()} target="_blank" className="inline-block system-xs-medium-uppercase text-text-accent">
               {t('publishTemplate.success.learnMore', { ns: 'datasetPipeline' })}
             </Link>
           </div>
@@ -157,13 +157,13 @@ const Popup = () => {
   return (
     <div className={cn('rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl shadow-shadow-shadow-5', isAllowPublishAsCustomKnowledgePipelineTemplate ? 'w-[360px]' : 'w-[400px]')}>
       <div className="p-4 pt-3">
-        <div className="flex h-6 items-center text-text-tertiary system-xs-medium-uppercase">
+        <div className="flex h-6 items-center system-xs-medium-uppercase text-text-tertiary">
           {publishedAt ? t('common.latestPublished', { ns: 'workflow' }) : t('common.currentDraftUnpublished', { ns: 'workflow' })}
         </div>
         {publishedAt
           ? (
               <div className="flex items-center justify-between">
-                <div className="flex items-center text-text-secondary system-sm-medium">
+                <div className="flex items-center system-sm-medium text-text-secondary">
                   {t('common.publishedAt', { ns: 'workflow' })}
                   {' '}
                   {formatTimeFromNow(publishedAt)}
@@ -171,7 +171,7 @@ const Popup = () => {
               </div>
             )
           : (
-              <div className="flex items-center text-text-secondary system-sm-medium">
+              <div className="flex items-center system-sm-medium text-text-secondary">
                 {t('common.autoSaved', { ns: 'workflow' })}
                 {' '}
                 ·
diff --git a/web/app/components/rag-pipeline/components/update-dsl-modal.tsx b/web/app/components/rag-pipeline/components/update-dsl-modal.tsx
index fd92977703..a420f02b9e 100644
--- a/web/app/components/rag-pipeline/components/update-dsl-modal.tsx
+++ b/web/app/components/rag-pipeline/components/update-dsl-modal.tsx
@@ -8,8 +8,8 @@ import {
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Uploader from '@/app/components/app/create-from-dsl-modal/uploader'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { useUpdateDSLModal } from '../hooks/use-update-dsl-modal'
 import VersionMismatchModal from './version-mismatch-modal'
 
@@ -51,13 +51,13 @@ const UpdateDSLModal = ({
           </div>
         </div>
         <div className="relative mb-2 flex grow gap-0.5 overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-2 shadow-xs">
-          <div className="absolute left-0 top-0 h-full w-full bg-toast-warning-bg opacity-40" />
+          <div className="absolute top-0 left-0 h-full w-full bg-toast-warning-bg opacity-40" />
           <div className="flex items-start justify-center p-1">
             <RiAlertFill className="h-4 w-4 shrink-0 text-text-warning-secondary" />
           </div>
           <div className="flex grow flex-col items-start gap-0.5 py-1">
             <div className="system-xs-medium whitespace-pre-line text-text-primary">{t('common.importDSLTip', { ns: 'workflow' })}</div>
-            <div className="flex items-start gap-1 self-stretch pb-0.5 pt-1">
+            <div className="flex items-start gap-1 self-stretch pt-1 pb-0.5">
               <Button
                 size="small"
                 variant="secondary"
@@ -73,7 +73,7 @@ const UpdateDSLModal = ({
           </div>
         </div>
         <div>
-          <div className="system-md-semibold pt-2 text-text-primary">
+          <div className="pt-2 system-md-semibold text-text-primary">
             {t('common.chooseDSL', { ns: 'workflow' })}
           </div>
           <div className="flex w-full flex-col items-start justify-center gap-4 self-stretch py-4">
@@ -90,7 +90,8 @@ const UpdateDSLModal = ({
           <Button onClick={onCancel}>{t('newApp.Cancel', { ns: 'app' })}</Button>
           <Button
             disabled={!currentFile || loading}
-            variant="warning"
+            variant="primary"
+            destructive
             onClick={handleImport}
             loading={loading}
           >
diff --git a/web/app/components/rag-pipeline/components/version-mismatch-modal.tsx b/web/app/components/rag-pipeline/components/version-mismatch-modal.tsx
index ffe2bc6e53..bf69e11435 100644
--- a/web/app/components/rag-pipeline/components/version-mismatch-modal.tsx
+++ b/web/app/components/rag-pipeline/components/version-mismatch-modal.tsx
@@ -1,7 +1,7 @@
 import type { MouseEventHandler } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 
 type VersionMismatchModalProps = {
   isShow: boolean
@@ -29,7 +29,7 @@ const VersionMismatchModal = ({
     >
       <div className="flex flex-col items-start gap-2 self-stretch pb-4">
         <div className="title-2xl-semi-bold text-text-primary">{t('newApp.appCreateDSLErrorTitle', { ns: 'app' })}</div>
-        <div className="system-md-regular flex grow flex-col text-text-secondary">
+        <div className="flex grow flex-col system-md-regular text-text-secondary">
           <div>{t('newApp.appCreateDSLErrorPart1', { ns: 'app' })}</div>
           <div>{t('newApp.appCreateDSLErrorPart2', { ns: 'app' })}</div>
           <br />
diff --git a/web/app/components/share/text-generation/result/index.tsx b/web/app/components/share/text-generation/result/index.tsx
index 09c87c61bb..cb2d783451 100644
--- a/web/app/components/share/text-generation/result/index.tsx
+++ b/web/app/components/share/text-generation/result/index.tsx
@@ -8,8 +8,8 @@ import { t } from 'i18next'
 import { useCallback } from 'react'
 import * as React from 'react'
 import TextGenerationRes from '@/app/components/app/text-generate/item'
-import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import NoData from '@/app/components/share/text-generation/no-data'
 import { useResultRunState } from './hooks/use-result-run-state'
@@ -83,8 +83,8 @@ const Result: FC<IResultProps> = ({ isWorkflow, isCallBatchAPI, isPC, isMobile,
         <div className={`mb-3 flex ${isPC ? 'justify-end' : 'justify-center'}`}>
           <Button variant="secondary" disabled={runState.isStopping} onClick={runState.handleStop}>
             {runState.isStopping
-              ? <span aria-hidden className="i-ri-loader-2-line mr-[5px] h-3.5 w-3.5 animate-spin" />
-              : <span aria-hidden className="i-ri-stop-circle-fill mr-[5px] h-3.5 w-3.5" />}
+              ? <span aria-hidden className="mr-[5px] i-ri-loader-2-line h-3.5 w-3.5 animate-spin" />
+              : <span aria-hidden className="mr-[5px] i-ri-stop-circle-fill h-3.5 w-3.5" />}
             <span className="text-xs font-normal">{t('operation.stopResponding', { ns: 'appDebug' })}</span>
           </Button>
         </div>
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 bdb8b78ecf..d6e4ed8a86 100644
--- a/web/app/components/share/text-generation/run-batch/index.tsx
+++ b/web/app/components/share/text-generation/run-batch/index.tsx
@@ -6,7 +6,7 @@ import {
 } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { cn } from '@/utils/classnames'
 import CSVDownload from './csv-download'
@@ -46,7 +46,7 @@ const RunBatch: FC<IRunBatchProps> = ({
       <div className="flex justify-end">
         <Button
           variant="primary"
-          className={cn('mt-4 pl-3 pr-4', !isPC && 'grow')}
+          className={cn('mt-4 pr-4 pl-3', !isPC && 'grow')}
           onClick={handleSend}
           disabled={!isParsed || !isAllFinished}
         >
diff --git a/web/app/components/share/text-generation/run-batch/res-download/index.tsx b/web/app/components/share/text-generation/run-batch/res-download/index.tsx
index 012693003b..d6f521029e 100644
--- a/web/app/components/share/text-generation/run-batch/res-download/index.tsx
+++ b/web/app/components/share/text-generation/run-batch/res-download/index.tsx
@@ -7,7 +7,7 @@ import {
   useCSVDownloader,
 } from 'react-papaparse'
 import ActionButton from '@/app/components/base/action-button'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 
 type IResDownloadProps = {
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 484291088c..53f11c5910 100644
--- a/web/app/components/share/text-generation/run-once/index.tsx
+++ b/web/app/components/share/text-generation/run-once/index.tsx
@@ -11,13 +11,13 @@ import {
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { FileUploaderInAttachmentWrapper } from '@/app/components/base/file-uploader'
 import { StopCircle } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
 import TextGenerationImageUploader from '@/app/components/base/image-uploader/text-generation-image-uploader'
 import Input from '@/app/components/base/input'
 import Select from '@/app/components/base/select'
 import Textarea from '@/app/components/base/textarea'
+import { Button } from '@/app/components/base/ui/button'
 import BoolInput from '@/app/components/workflow/nodes/_base/components/before-run-form/bool-input'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
@@ -120,7 +120,7 @@ const RunOnce: FC<IRunOnceProps> = ({
             : promptConfig.prompt_variables.filter(item => item.hide !== true).map(item => (
                 <div className="mt-4 w-full" key={item.key}>
                   {item.type !== 'checkbox' && (
-                    <div className="system-md-semibold flex h-6 items-center gap-1 text-text-secondary">
+                    <div className="flex h-6 items-center gap-1 system-md-semibold text-text-secondary">
                       <div className="truncate">{item.name}</div>
                       {!item.required && <span className="system-xs-regular text-text-tertiary">{t('panel.optional', { ns: 'workflow' })}</span>}
                     </div>
@@ -209,7 +209,7 @@ const RunOnce: FC<IRunOnceProps> = ({
           {
             visionConfig?.enabled && (
               <div className="mt-4 w-full">
-                <div className="system-md-semibold flex h-6 items-center text-text-secondary">{t('imageUploader.imageUpload', { ns: 'common' })}</div>
+                <div className="flex h-6 items-center system-md-semibold text-text-secondary">{t('imageUploader.imageUpload', { ns: 'common' })}</div>
                 <div className="mt-1">
                   <TextGenerationImageUploader
                     settings={visionConfig}
@@ -224,7 +224,7 @@ const RunOnce: FC<IRunOnceProps> = ({
               </div>
             )
           }
-          <div className="mb-3 mt-6 w-full">
+          <div className="mt-6 mb-3 w-full">
             <div className="flex items-center justify-between gap-2">
               <Button
                 onClick={onClear}
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 39f347c1b7..f1a52e5447 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
@@ -3,11 +3,11 @@ import type { FC } from 'react'
 import type { Credential } from '@/app/components/tools/types'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Drawer from '@/app/components/base/drawer-plus'
 import Input from '@/app/components/base/input'
 import Radio from '@/app/components/base/radio/ui'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import { AuthHeaderPrefix, AuthType } from '@/app/components/tools/types'
 import { cn } from '@/utils/classnames'
 
@@ -62,7 +62,7 @@ const ConfigCredential: FC<Props> = ({
         <div className="px-6 pt-2">
           <div className="space-y-4">
             <div>
-              <div className="system-sm-medium py-2 text-text-primary">{t('createTool.authMethod.type', { ns: 'tools' })}</div>
+              <div className="py-2 system-sm-medium text-text-primary">{t('createTool.authMethod.type', { ns: 'tools' })}</div>
               <div className="flex space-x-3">
                 <SelectItem
                   text={t('createTool.authMethod.types.none', { ns: 'tools' })}
@@ -98,7 +98,7 @@ const ConfigCredential: FC<Props> = ({
             {tempCredential.auth_type === AuthType.apiKeyHeader && (
               <>
                 <div>
-                  <div className="system-sm-medium py-2 text-text-primary">{t('createTool.authHeaderPrefix.title', { ns: 'tools' })}</div>
+                  <div className="py-2 system-sm-medium text-text-primary">{t('createTool.authHeaderPrefix.title', { ns: 'tools' })}</div>
                   <div className="flex space-x-3">
                     <SelectItem
                       text={t('createTool.authHeaderPrefix.types.basic', { ns: 'tools' })}
@@ -121,7 +121,7 @@ const ConfigCredential: FC<Props> = ({
                   </div>
                 </div>
                 <div>
-                  <div className="system-sm-medium flex items-center py-2 text-text-primary">
+                  <div className="flex items-center py-2 system-sm-medium text-text-primary">
                     {t('createTool.authMethod.key', { ns: 'tools' })}
                     <Tooltip
                       popupContent={(
@@ -139,7 +139,7 @@ const ConfigCredential: FC<Props> = ({
                   />
                 </div>
                 <div>
-                  <div className="system-sm-medium py-2 text-text-primary">{t('createTool.authMethod.value', { ns: 'tools' })}</div>
+                  <div className="py-2 system-sm-medium text-text-primary">{t('createTool.authMethod.value', { ns: 'tools' })}</div>
                   <Input
                     value={tempCredential.api_key_value}
                     onChange={e => setTempCredential({ ...tempCredential, api_key_value: e.target.value })}
@@ -151,7 +151,7 @@ const ConfigCredential: FC<Props> = ({
             {tempCredential.auth_type === AuthType.apiKeyQuery && (
               <>
                 <div>
-                  <div className="system-sm-medium flex items-center py-2 text-text-primary">
+                  <div className="flex items-center py-2 system-sm-medium text-text-primary">
                     {t('createTool.authMethod.queryParam', { ns: 'tools' })}
                     <Tooltip
                       popupContent={(
@@ -169,7 +169,7 @@ const ConfigCredential: FC<Props> = ({
                   />
                 </div>
                 <div>
-                  <div className="system-sm-medium py-2 text-text-primary">{t('createTool.authMethod.value', { ns: 'tools' })}</div>
+                  <div className="py-2 system-sm-medium text-text-primary">{t('createTool.authMethod.value', { ns: 'tools' })}</div>
                   <Input
                     value={tempCredential.api_key_value}
                     onChange={e => setTempCredential({ ...tempCredential, api_key_value: e.target.value })}
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 1f191b4334..3711a5d095 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
@@ -8,8 +8,8 @@ import { useClickAway } from 'ahooks'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { importSchemaFromURL } from '@/service/tools'
 import examples from './examples'
@@ -58,14 +58,14 @@ const GetSchema: FC<Props> = ({
       <div ref={importURLRef}>
         <Button
           size="small"
-          className="space-x-1 "
+          className="space-x-1"
           onClick={() => { setShowImportFromUrl(!showImportFromUrl) }}
         >
           <RiAddLine className="h-3 w-3" />
           <div className="system-xs-medium text-text-secondary">{t('createTool.importFromUrl', { ns: 'tools' })}</div>
         </Button>
         {showImportFromUrl && (
-          <div className=" absolute left-[-35px] top-[26px] rounded-lg border border-components-panel-border bg-components-panel-bg p-2 shadow-lg">
+          <div className="absolute top-[26px] left-[-35px] rounded-lg border border-components-panel-border bg-components-panel-bg p-2 shadow-lg">
             <div className="relative">
               <Input
                 type="text"
@@ -75,7 +75,7 @@ const GetSchema: FC<Props> = ({
                 onChange={e => setImportUrl(e.target.value)}
               />
               <Button
-                className="absolute right-1 top-1"
+                className="absolute top-1 right-1"
                 size="small"
                 variant="primary"
                 disabled={!importUrl}
@@ -98,7 +98,7 @@ const GetSchema: FC<Props> = ({
           <RiArrowDownSLine className="h-3 w-3" />
         </Button>
         {showExamples && (
-          <div className="absolute right-0 top-7 rounded-lg bg-components-panel-bg p-1 shadow-sm">
+          <div className="absolute top-7 right-0 rounded-lg bg-components-panel-bg p-1 shadow-sm">
             {examples.map(item => (
               <div
                 key={item.key}
@@ -106,7 +106,7 @@ const GetSchema: FC<Props> = ({
                   onChange(item.content)
                   setShowExamples(false)
                 }}
-                className="system-sm-regular cursor-pointer whitespace-nowrap rounded-lg px-3 py-1.5 leading-5 text-text-secondary hover:bg-components-panel-on-panel-item-bg-hover"
+                className="cursor-pointer rounded-lg px-3 py-1.5 system-sm-regular leading-5 whitespace-nowrap text-text-secondary hover:bg-components-panel-on-panel-item-bg-hover"
               >
                 {t(`createTool.exampleOptions.${item.key}`, { ns: 'tools' })}
               </div>
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 2938033073..506eab1c8f 100644
--- a/web/app/components/tools/edit-custom-collection-modal/index.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/index.tsx
@@ -8,11 +8,11 @@ import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
-import Button from '@/app/components/base/button'
 import Drawer from '@/app/components/base/drawer-plus'
 import EmojiPicker from '@/app/components/base/emoji-picker'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import LabelSelector from '@/app/components/tools/labels/selector'
 import { parseParamsSchema } from '@/service/tools'
@@ -204,7 +204,7 @@ const EditCustomCollectionModal: FC<Props> = ({
           <div className="flex h-full flex-col">
             <div className="h-0 grow space-y-4 overflow-y-auto px-6 py-3">
               <div>
-                <div className="system-sm-medium py-2 text-text-primary">
+                <div className="py-2 system-sm-medium text-text-primary">
                   {t('createTool.name', { ns: 'tools' })}
                   {' '}
                   <span className="ml-1 text-red-500">*</span>
@@ -229,7 +229,7 @@ const EditCustomCollectionModal: FC<Props> = ({
               <div className="select-none">
                 <div className="flex items-center justify-between">
                   <div className="flex items-center">
-                    <div className="system-sm-medium py-2 text-text-primary">
+                    <div className="py-2 system-sm-medium text-text-primary">
                       {t('createTool.schema', { ns: 'tools' })}
                       <span className="ml-1 text-red-500">*</span>
                     </div>
@@ -238,7 +238,7 @@ const EditCustomCollectionModal: FC<Props> = ({
                       href="https://swagger.io/specification/"
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="flex h-[18px] items-center space-x-1  text-text-accent"
+                      className="flex h-[18px] items-center space-x-1 text-text-accent"
                     >
                       <div className="text-xs font-normal">{t('createTool.viewSchemaSpec', { ns: 'tools' })}</div>
                       <LinkExternal02 className="h-3 w-3" />
@@ -257,10 +257,10 @@ const EditCustomCollectionModal: FC<Props> = ({
 
               {/* Available Tools  */}
               <div>
-                <div className="system-sm-medium py-2 text-text-primary">{t('createTool.availableTools.title', { ns: 'tools' })}</div>
+                <div className="py-2 system-sm-medium text-text-primary">{t('createTool.availableTools.title', { ns: 'tools' })}</div>
                 <div className="w-full overflow-x-auto rounded-lg border border-divider-regular">
-                  <table className="system-xs-regular w-full text-text-secondary">
-                    <thead className="uppercase text-text-tertiary">
+                  <table className="w-full system-xs-regular text-text-secondary">
+                    <thead className="text-text-tertiary uppercase">
                       <tr className={cn(paramsSchemas.length > 0 && 'border-b', 'border-divider-regular')}>
                         <th className="p-2 pl-3 font-medium">{t('createTool.availableTools.name', { ns: 'tools' })}</th>
                         <th className="w-[236px] p-2 pl-3 font-medium">{t('createTool.availableTools.description', { ns: 'tools' })}</th>
@@ -296,7 +296,7 @@ const EditCustomCollectionModal: FC<Props> = ({
 
               {/* Authorization method */}
               <div>
-                <div className="system-sm-medium py-2 text-text-primary">{t('createTool.authMethod.title', { ns: 'tools' })}</div>
+                <div className="py-2 system-sm-medium text-text-primary">{t('createTool.authMethod.title', { ns: 'tools' })}</div>
                 <div className="flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal px-2.5" onClick={() => setCredentialsModalShow(true)}>
                   <div className="system-xs-regular text-text-primary">{t(`createTool.authMethod.types.${credential.auth_type}`, { ns: 'tools' })}</div>
                   <RiSettings2Line className="h-4 w-4 text-text-secondary" />
@@ -305,13 +305,13 @@ const EditCustomCollectionModal: FC<Props> = ({
 
               {/* Labels */}
               <div>
-                <div className="system-sm-medium py-2 text-text-primary">{t('createTool.toolInput.label', { ns: 'tools' })}</div>
+                <div className="py-2 system-sm-medium text-text-primary">{t('createTool.toolInput.label', { ns: 'tools' })}</div>
                 <LabelSelector value={labels} onChange={handleLabelSelect} />
               </div>
 
               {/* Privacy Policy */}
               <div>
-                <div className="system-sm-medium py-2 text-text-primary">{t('createTool.privacyPolicy', { ns: 'tools' })}</div>
+                <div className="py-2 system-sm-medium text-text-primary">{t('createTool.privacyPolicy', { ns: 'tools' })}</div>
                 <Input
                   value={customCollection.privacy_policy}
                   onChange={(e) => {
@@ -326,7 +326,7 @@ const EditCustomCollectionModal: FC<Props> = ({
               </div>
 
               <div>
-                <div className="system-sm-medium py-2 text-text-primary">{t('createTool.customDisclaimer', { ns: 'tools' })}</div>
+                <div className="py-2 system-sm-medium text-text-primary">{t('createTool.customDisclaimer', { ns: 'tools' })}</div>
                 <Input
                   value={customCollection.custom_disclaimer}
                   onChange={(e) => {
@@ -344,10 +344,10 @@ const EditCustomCollectionModal: FC<Props> = ({
             <div className={cn(isEdit ? 'justify-between' : 'justify-end', 'mt-2 flex shrink-0 rounded-b-[10px] border-t border-divider-regular bg-background-section-burn px-6 py-4')}>
               {
                 isEdit && (
-                  <Button variant="warning" onClick={onRemove}>{t('operation.delete', { ns: 'common' })}</Button>
+                  <Button variant="primary" destructive onClick={onRemove}>{t('operation.delete', { ns: 'common' })}</Button>
                 )
               }
-              <div className="flex space-x-2 ">
+              <div className="flex space-x-2">
                 <Button onClick={onHide}>{t('operation.cancel', { ns: 'common' })}</Button>
                 <Button variant="primary" onClick={handleSave}>{t('operation.save', { ns: 'common' })}</Button>
               </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 0754c5a688..177cd2a8ee 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
@@ -5,9 +5,9 @@ import { RiSettings2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Drawer from '@/app/components/base/drawer-plus'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { AuthType } from '@/app/components/tools/types'
 import { useLocale } from '@/context/i18n'
 import { getLanguage } from '@/i18n-config/language'
@@ -75,7 +75,7 @@ const TestApi: FC<Props> = ({
           <div className="overflow-y-auto px-6 pt-2">
             <div className="space-y-4">
               <div>
-                <div className="system-sm-medium py-2 text-text-primary">{t('createTool.authMethod.title', { ns: 'tools' })}</div>
+                <div className="py-2 system-sm-medium text-text-primary">{t('createTool.authMethod.title', { ns: 'tools' })}</div>
                 <div className="flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal px-2.5" onClick={() => setCredentialsModalShow(true)}>
                   <div className="system-xs-regular text-text-primary">{t(`createTool.authMethod.types.${tempCredential.auth_type}`, { ns: 'tools' })}</div>
                   <RiSettings2Line className="h-4 w-4 text-text-secondary" />
@@ -83,10 +83,10 @@ const TestApi: FC<Props> = ({
               </div>
 
               <div>
-                <div className="system-sm-medium py-2 text-text-primary">{t('test.parametersValue', { ns: 'tools' })}</div>
+                <div className="py-2 system-sm-medium text-text-primary">{t('test.parametersValue', { ns: 'tools' })}</div>
                 <div className="rounded-lg border border-divider-regular">
-                  <table className="system-xs-regular w-full font-normal text-text-secondary">
-                    <thead className="uppercase text-text-tertiary">
+                  <table className="w-full system-xs-regular font-normal text-text-secondary">
+                    <thead className="text-text-tertiary uppercase">
                       <tr className="border-b border-divider-regular">
                         <th className="p-2 pl-3 font-medium">{t('test.parameters', { ns: 'tools' })}</th>
                         <th className="p-2 pl-3 font-medium">{t('test.value', { ns: 'tools' })}</th>
@@ -95,7 +95,7 @@ const TestApi: FC<Props> = ({
                     <tbody>
                       {parameters.map((item, index) => (
                         <tr key={index} className="border-b border-divider-regular last:border-0">
-                          <td className="py-2 pl-3 pr-2.5">
+                          <td className="py-2 pr-2.5 pl-3">
                             {item.label[language]}
                           </td>
                           <td className="">
@@ -114,13 +114,13 @@ const TestApi: FC<Props> = ({
               </div>
 
             </div>
-            <Button variant="primary" className=" mt-4 h-10 w-full" loading={testing} disabled={testing} onClick={handleTest}>{t('test.title', { ns: 'tools' })}</Button>
+            <Button variant="primary" className="mt-4 h-10 w-full" loading={testing} disabled={testing} onClick={handleTest}>{t('test.title', { ns: 'tools' })}</Button>
             <div className="mt-6">
               <div className="flex items-center space-x-3">
                 <div className="system-xs-semibold text-text-tertiary">{t('test.testResult', { ns: 'tools' })}</div>
                 <div className="bg-[rgb(243, 244, 246)] h-px w-0 grow"></div>
               </div>
-              <div className="system-xs-regular mt-2 h-[200px] overflow-y-auto overflow-x-hidden rounded-lg bg-components-input-bg-normal px-3 py-2 text-text-secondary">
+              <div className="mt-2 h-[200px] overflow-x-hidden overflow-y-auto rounded-lg bg-components-input-bg-normal px-3 py-2 system-xs-regular text-text-secondary">
                 {result || <span className="text-text-quaternary">{t('test.testResultPlaceholder', { ns: 'tools' })}</span>}
               </div>
             </div>
diff --git a/web/app/components/tools/mcp/detail/content.tsx b/web/app/components/tools/mcp/detail/content.tsx
index 23d408706d..4c95bd88f0 100644
--- a/web/app/components/tools/mcp/detail/content.tsx
+++ b/web/app/components/tools/mcp/detail/content.tsx
@@ -12,9 +12,9 @@ import * as React from 'react'
 import { useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 import Icon from '@/app/components/plugins/card/base/card-icon'
 import { useAppContext } from '@/context/app-context'
@@ -163,15 +163,15 @@ const MCPDetailContent: FC<Props> = ({
           </div>
           <div className="ml-3 w-0 grow">
             <div className="flex h-5 items-center">
-              <div className="system-md-semibold truncate text-text-primary" title={detail.name}>{detail.name}</div>
+              <div className="truncate system-md-semibold text-text-primary" title={detail.name}>{detail.name}</div>
             </div>
             <div className="mt-0.5 flex items-center gap-1">
               <Tooltip popupContent={t('mcp.identifier', { ns: 'tools' })}>
-                <div className="system-xs-regular shrink-0 cursor-pointer text-text-secondary" onClick={() => copy(detail.server_identifier || '')}>{detail.server_identifier}</div>
+                <div className="shrink-0 cursor-pointer system-xs-regular text-text-secondary" onClick={() => copy(detail.server_identifier || '')}>{detail.server_identifier}</div>
               </Tooltip>
-              <div className="system-xs-regular shrink-0 text-text-quaternary">·</div>
+              <div className="shrink-0 system-xs-regular text-text-quaternary">·</div>
               <Tooltip popupContent={t('mcp.modal.serverUrl', { ns: 'tools' })}>
-                <div className="system-xs-regular truncate text-text-secondary">{detail.server_url}</div>
+                <div className="truncate system-xs-regular text-text-secondary">{detail.server_url}</div>
               </Tooltip>
             </div>
           </div>
@@ -222,7 +222,7 @@ const MCPDetailContent: FC<Props> = ({
       <div className="flex grow flex-col">
         {((detail.is_team_authorization && isGettingTools) || isUpdating) && (
           <>
-            <div className="flex shrink-0 justify-between gap-2 px-4 pb-1 pt-2">
+            <div className="flex shrink-0 justify-between gap-2 px-4 pt-2 pb-1">
               <div className="flex h-6 items-center">
                 {!isUpdating && <div className="system-sm-semibold-uppercase text-text-secondary">{t('mcp.gettingTools', { ns: 'tools' })}</div>}
                 {isUpdating && <div className="system-sm-semibold-uppercase text-text-secondary">{t('mcp.updateTools', { ns: 'tools' })}</div>}
@@ -236,7 +236,7 @@ const MCPDetailContent: FC<Props> = ({
         )}
         {!isUpdating && detail.is_team_authorization && !isGettingTools && !toolList.length && (
           <div className="flex h-full w-full flex-col items-center justify-center">
-            <div className="system-sm-regular mb-3 text-text-tertiary">{t('mcp.toolsEmpty', { ns: 'tools' })}</div>
+            <div className="mb-3 system-sm-regular text-text-tertiary">{t('mcp.toolsEmpty', { ns: 'tools' })}</div>
             <Button
               variant="primary"
               onClick={handleUpdateTools}
@@ -247,7 +247,7 @@ const MCPDetailContent: FC<Props> = ({
         )}
         {!isUpdating && !isGettingTools && toolList.length > 0 && (
           <>
-            <div className="flex shrink-0 justify-between gap-2 px-4 pb-1 pt-2">
+            <div className="flex shrink-0 justify-between gap-2 px-4 pt-2 pb-1">
               <div className="flex h-6 items-center">
                 {toolList.length > 1 && <div className="system-sm-semibold-uppercase text-text-secondary">{t('mcp.toolsNum', { ns: 'tools', count: toolList.length })}</div>}
                 {toolList.length === 1 && <div className="system-sm-semibold-uppercase text-text-secondary">{t('mcp.onlyTool', { ns: 'tools' })}</div>}
@@ -272,8 +272,8 @@ const MCPDetailContent: FC<Props> = ({
 
         {!isUpdating && !detail.is_team_authorization && (
           <div className="flex h-full w-full flex-col items-center justify-center">
-            {!isAuthorizing && <div className="system-md-medium mb-1 text-text-secondary">{t('mcp.authorizingRequired', { ns: 'tools' })}</div>}
-            {isAuthorizing && <div className="system-md-medium mb-1 text-text-secondary">{t('mcp.authorizing', { ns: 'tools' })}</div>}
+            {!isAuthorizing && <div className="mb-1 system-md-medium text-text-secondary">{t('mcp.authorizingRequired', { ns: 'tools' })}</div>}
+            {isAuthorizing && <div className="mb-1 system-md-medium text-text-secondary">{t('mcp.authorizing', { ns: 'tools' })}</div>}
             <div className="system-sm-regular text-text-tertiary">{t('mcp.authorizeTip', { ns: 'tools' })}</div>
           </div>
         )}
diff --git a/web/app/components/tools/mcp/headers-input.tsx b/web/app/components/tools/mcp/headers-input.tsx
index be75ff16d2..382115efe4 100644
--- a/web/app/components/tools/mcp/headers-input.tsx
+++ b/web/app/components/tools/mcp/headers-input.tsx
@@ -4,8 +4,8 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { v4 as uuid } from 'uuid'
 import ActionButton from '@/app/components/base/action-button'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 
 export type HeaderItem = {
@@ -77,9 +77,9 @@ const HeadersInput = ({
         </div>
       )}
       <div className="overflow-hidden rounded-lg border border-divider-regular">
-        <div className="system-xs-medium-uppercase bg-background-secondary flex h-7 items-center leading-7 text-text-tertiary">
+        <div className="bg-background-secondary flex h-7 items-center system-xs-medium-uppercase leading-7 text-text-tertiary">
           <div className="h-full w-1/2 border-r border-divider-regular pl-3">{t('mcp.modal.headerKey', { ns: 'tools' })}</div>
-          <div className="h-full w-1/2 pl-3 pr-1">{t('mcp.modal.headerValue', { ns: 'tools' })}</div>
+          <div className="h-full w-1/2 pr-1 pl-3">{t('mcp.modal.headerValue', { ns: 'tools' })}</div>
         </div>
         {headersItems.map((item, index) => (
           <div
diff --git a/web/app/components/tools/mcp/mcp-server-modal.tsx b/web/app/components/tools/mcp/mcp-server-modal.tsx
index 7d85df7b55..4c8b45d1c9 100644
--- a/web/app/components/tools/mcp/mcp-server-modal.tsx
+++ b/web/app/components/tools/mcp/mcp-server-modal.tsx
@@ -5,10 +5,10 @@ import type {
 import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import Modal from '@/app/components/base/modal'
 import Textarea from '@/app/components/base/textarea'
+import { Button } from '@/app/components/base/ui/button'
 import MCPServerParamItem from '@/app/components/tools/mcp/mcp-server-param-item'
 import {
   useCreateMCPServer,
@@ -93,10 +93,10 @@ const MCPServerModal = ({
       onClose={onHide}
       className={cn('relative max-w-[520px]! p-0!')}
     >
-      <div className="absolute right-5 top-5 z-10 cursor-pointer p-1.5" onClick={onHide}>
+      <div className="absolute top-5 right-5 z-10 cursor-pointer p-1.5" onClick={onHide}>
         <RiCloseLine className="h-5 w-5 text-text-tertiary" />
       </div>
-      <div className="title-2xl-semi-bold relative p-6 pb-3 text-xl text-text-primary">
+      <div className="relative p-6 pb-3 title-2xl-semi-bold text-xl text-text-primary">
         {!data ? t('mcp.server.modal.addTitle', { ns: 'tools' }) : t('mcp.server.modal.editTitle', { ns: 'tools' })}
       </div>
       <div className="space-y-5 px-6 py-3">
@@ -116,10 +116,10 @@ const MCPServerModal = ({
         {latestParams.length > 0 && (
           <div>
             <div className="mb-1 flex items-center gap-2">
-              <div className="system-xs-medium-uppercase shrink-0 text-text-primary">{t('mcp.server.modal.parameters', { ns: 'tools' })}</div>
+              <div className="shrink-0 system-xs-medium-uppercase text-text-primary">{t('mcp.server.modal.parameters', { ns: 'tools' })}</div>
               <Divider type="horizontal" className="m-0! h-px! grow bg-divider-subtle" />
             </div>
-            <div className="body-xs-regular mb-2 text-text-tertiary">{t('mcp.server.modal.parametersTip', { ns: 'tools' })}</div>
+            <div className="mb-2 body-xs-regular text-text-tertiary">{t('mcp.server.modal.parametersTip', { ns: 'tools' })}</div>
             <div className="space-y-3">
               {latestParams.map(paramItem => (
                 <MCPServerParamItem
diff --git a/web/app/components/tools/mcp/mcp-service-card.tsx b/web/app/components/tools/mcp/mcp-service-card.tsx
index 5845ba0e34..9ff2c7b7b3 100644
--- a/web/app/components/tools/mcp/mcp-service-card.tsx
+++ b/web/app/components/tools/mcp/mcp-service-card.tsx
@@ -6,13 +6,13 @@ import type { AppSSO } from '@/types/app'
 import { RiEditLine, RiLoopLeftLine } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'
 import CopyFeedback from '@/app/components/base/copy-feedback'
 import Divider from '@/app/components/base/divider'
 import { Mcp } from '@/app/components/base/icons/src/vender/other'
 import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 import MCPServerModal from '@/app/components/tools/mcp/mcp-server-modal'
 import { useDocLink } from '@/context/i18n'
@@ -56,12 +56,12 @@ const ServerURLSection: FC<ServerURLSectionProps> = ({
   const { t } = useTranslation()
   return (
     <div className="flex flex-col items-start justify-center self-stretch">
-      <div className="system-xs-medium pb-1 text-text-tertiary">
+      <div className="pb-1 system-xs-medium text-text-tertiary">
         {t('mcp.server.url', { ns: 'tools' })}
       </div>
       <div className="inline-flex h-9 w-full items-center gap-0.5 rounded-lg bg-components-input-bg-normal p-1 pl-2">
         <div className="flex h-4 min-w-0 flex-1 items-start justify-start gap-2 px-1">
-          <div className="overflow-hidden text-ellipsis whitespace-nowrap text-xs font-medium text-text-secondary">
+          <div className="overflow-hidden text-xs font-medium text-ellipsis whitespace-nowrap text-text-secondary">
             {serverURL}
           </div>
         </div>
@@ -225,7 +225,7 @@ const MCPServiceCard: FC<IAppCardProps> = ({
 
   return (
     <>
-      <div className={cn('w-full max-w-full rounded-xl border-l-[0.5px] border-t border-effects-highlight', isMinimalState && 'h-12')}>
+      <div className={cn('w-full max-w-full rounded-xl border-t border-l-[0.5px] border-effects-highlight', isMinimalState && 'h-12')}>
         <div className={cn('relative rounded-xl bg-background-default', triggerModeDisabled && 'opacity-60')}>
           {triggerModeDisabled && (
             <TriggerModeOverlay triggerModeMessage={triggerModeMessage} />
@@ -237,7 +237,7 @@ const MCPServiceCard: FC<IAppCardProps> = ({
                   <Mcp className="h-4 w-4 text-text-primary-on-surface" />
                 </div>
                 <div className="group w-full">
-                  <div className="system-md-semibold min-w-0 overflow-hidden text-ellipsis break-normal text-text-secondary group-hover:text-text-primary">
+                  <div className="min-w-0 overflow-hidden system-md-semibold break-normal text-ellipsis text-text-secondary group-hover:text-text-primary">
                     {t('mcp.server.title', { ns: 'tools' })}
                   </div>
                 </div>
@@ -274,7 +274,7 @@ const MCPServiceCard: FC<IAppCardProps> = ({
               >
                 <div className="flex items-center justify-center gap-px">
                   <RiEditLine className="h-3.5 w-3.5" />
-                  <div className="system-xs-medium px-[3px] text-text-tertiary">
+                  <div className="px-[3px] system-xs-medium text-text-tertiary">
                     {serverPublished ? t('mcp.server.edit', { ns: 'tools' }) : t('mcp.server.addDescription', { ns: 'tools' })}
                   </div>
                 </div>
diff --git a/web/app/components/tools/mcp/modal.tsx b/web/app/components/tools/mcp/modal.tsx
index 2de71ba924..64298178bc 100644
--- a/web/app/components/tools/mcp/modal.tsx
+++ b/web/app/components/tools/mcp/modal.tsx
@@ -9,11 +9,11 @@ import { noop } from 'es-toolkit/function'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
 import AppIconPicker from '@/app/components/base/app-icon-picker'
-import Button from '@/app/components/base/button'
 import { Mcp } from '@/app/components/base/icons/src/vender/other'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
 import TabSlider from '@/app/components/base/tab-slider'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { MCPAuthMethod } from '@/app/components/tools/types'
 import { cn } from '@/utils/classnames'
@@ -131,10 +131,10 @@ const MCPModalContent: FC<MCPModalContentProps> = ({
 
   return (
     <>
-      <div className="absolute right-5 top-5 z-10 cursor-pointer p-1.5" onClick={onHide}>
+      <div className="absolute top-5 right-5 z-10 cursor-pointer p-1.5" onClick={onHide}>
         <RiCloseLine className="h-5 w-5 text-text-tertiary" />
       </div>
-      <div className="title-2xl-semi-bold relative pb-3 text-xl text-text-primary">
+      <div className="relative pb-3 title-2xl-semi-bold text-xl text-text-primary">
         {!isCreate ? t('mcp.modal.editTitle', { ns: 'tools' }) : t('mcp.modal.title', { ns: 'tools' })}
       </div>
 
@@ -197,7 +197,7 @@ const MCPModalContent: FC<MCPModalContentProps> = ({
           <div className="flex h-6 items-center">
             <span className="system-sm-medium text-text-secondary">{t('mcp.modal.serverIdentifier', { ns: 'tools' })}</span>
           </div>
-          <div className="body-xs-regular mb-1 text-text-tertiary">{t('mcp.modal.serverIdentifierTip', { ns: 'tools' })}</div>
+          <div className="mb-1 body-xs-regular text-text-tertiary">{t('mcp.modal.serverIdentifierTip', { ns: 'tools' })}</div>
           <Input
             value={state.serverIdentifier}
             onChange={e => actions.setServerIdentifier(e.target.value)}
diff --git a/web/app/components/tools/provider/detail.tsx b/web/app/components/tools/provider/detail.tsx
index d639d07044..516e2bb946 100644
--- a/web/app/components/tools/provider/detail.tsx
+++ b/web/app/components/tools/provider/detail.tsx
@@ -8,11 +8,11 @@ import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'
 import Drawer from '@/app/components/base/drawer'
 import { LinkExternal02, Settings01 } from '@/app/components/base/icons/src/vender/line/general'
 import Loading from '@/app/components/base/loading'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { ConfigurationMethodEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import Indicator from '@/app/components/header/indicator'
@@ -228,7 +228,7 @@ const ProviderDetail = ({
       footer={null}
       mask={false}
       positionCenter={false}
-      panelClassName={cn('mb-2 mr-2 mt-[64px] w-[420px]! max-w-[420px]! justify-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg! p-0! shadow-xl')}
+      panelClassName={cn('mt-[64px] mr-2 mb-2 w-[420px]! max-w-[420px]! justify-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg! p-0! shadow-xl')}
     >
       <div className="flex h-full flex-col p-4">
         <div className="shrink-0">
@@ -238,7 +238,7 @@ const ProviderDetail = ({
               <div className="flex h-5 items-center">
                 <Title title={collection.label[language]} />
               </div>
-              <div className="mb-1 mt-0.5 flex h-4 items-center justify-between">
+              <div className="mt-0.5 mb-1 flex h-4 items-center justify-between">
                 <OrgInfo
                   packageNameClassName="w-auto"
                   orgName={collection.author}
@@ -293,7 +293,7 @@ const ProviderDetail = ({
             <>
               <div className="shrink-0">
                 {(collection.type === CollectionType.builtIn || collection.type === CollectionType.model) && isAuthed && (
-                  <div className="system-sm-semibold-uppercase mb-1 flex h-6 items-center justify-between text-text-secondary">
+                  <div className="mb-1 flex h-6 items-center justify-between system-sm-semibold-uppercase text-text-secondary">
                     {t('detailPanel.actionNum', { ns: 'plugin', num: toolList.length, action: toolList.length > 1 ? 'actions' : 'action' })}
                     {needAuth && (
                       <Button
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 4986897ccf..0969153383 100644
--- a/web/app/components/tools/setting/build-in/config-credentials.tsx
+++ b/web/app/components/tools/setting/build-in/config-credentials.tsx
@@ -5,10 +5,10 @@ import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Drawer from '@/app/components/base/drawer-plus'
 import { LinkExternal02 } from '@/app/components/base/icons/src/vender/line/general'
 import Loading from '@/app/components/base/loading'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
@@ -108,7 +108,7 @@ const ConfigCredential: FC<Props> = ({
                         )
                       : null}
                   />
-                  <div className={cn((collection.is_team_authorization && !isHideRemoveBtn) ? 'justify-between' : 'justify-end', 'mt-2 flex ')}>
+                  <div className={cn((collection.is_team_authorization && !isHideRemoveBtn) ? 'justify-between' : 'justify-end', 'mt-2 flex')}>
                     {
                       (collection.is_team_authorization && !isHideRemoveBtn) && (
                         <Button onClick={onRemove}>{t('operation.remove', { ns: 'common' })}</Button>
diff --git a/web/app/components/tools/workflow-tool/configure-button.tsx b/web/app/components/tools/workflow-tool/configure-button.tsx
index 84fc3fd96d..557f442d79 100644
--- a/web/app/components/tools/workflow-tool/configure-button.tsx
+++ b/web/app/components/tools/workflow-tool/configure-button.tsx
@@ -4,8 +4,8 @@ import type { InputVar, Variable } from '@/app/components/workflow/types'
 import type { PublishWorkflowParams } from '@/types/workflow'
 import { RiArrowRightUpLine, RiHammerLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
+import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 import WorkflowToolModal from '@/app/components/tools/workflow-tool'
 import { cn } from '@/utils/classnames'
@@ -85,12 +85,12 @@ const WorkflowToolConfigureButton = ({
                   <RiHammerLine className={cn('relative h-4 w-4 text-text-secondary', !disabled && !published && 'group-hover:text-text-accent')} />
                   <div
                     title={t('common.workflowAsTool', { ns: 'workflow' }) || ''}
-                    className={cn('shrink grow basis-0 truncate text-text-secondary system-sm-medium', !disabled && !published && 'group-hover:text-text-accent')}
+                    className={cn('shrink grow basis-0 truncate system-sm-medium text-text-secondary', !disabled && !published && 'group-hover:text-text-accent')}
                   >
                     {t('common.workflowAsTool', { ns: 'workflow' })}
                   </div>
                   {!published && (
-                    <span className="shrink-0 rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-1 py-0.5 text-text-tertiary system-2xs-medium-uppercase">
+                    <span className="shrink-0 rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-1 py-0.5 system-2xs-medium-uppercase text-text-tertiary">
                       {t('common.configureRequired', { ns: 'workflow' })}
                     </span>
                   )}
@@ -103,7 +103,7 @@ const WorkflowToolConfigureButton = ({
                   <RiHammerLine className="h-4 w-4 text-text-tertiary" />
                   <div
                     title={t('common.workflowAsTool', { ns: 'workflow' }) || ''}
-                    className="shrink grow basis-0 truncate text-text-tertiary system-sm-medium"
+                    className="shrink grow basis-0 truncate system-sm-medium text-text-tertiary"
                   >
                     {t('common.workflowAsTool', { ns: 'workflow' })}
                   </div>
diff --git a/web/app/components/tools/workflow-tool/confirm-modal/__tests__/index.spec.tsx b/web/app/components/tools/workflow-tool/confirm-modal/__tests__/index.spec.tsx
index d28064ef0c..e076ae67e2 100644
--- a/web/app/components/tools/workflow-tool/confirm-modal/__tests__/index.spec.tsx
+++ b/web/app/components/tools/workflow-tool/confirm-modal/__tests__/index.spec.tsx
@@ -164,7 +164,8 @@ describe('ConfirmModal', () => {
 
       // Assert
       const confirmButton = screen.getByText('common.operation.confirm')
-      expect(confirmButton).toHaveClass('btn-warning')
+      expect(confirmButton).toHaveClass('btn-primary')
+      expect(confirmButton).toHaveClass('btn-destructive')
     })
   })
 
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 0c7e083a56..1533b22f8e 100644
--- a/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
+++ b/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
@@ -3,9 +3,9 @@
 import { RiCloseLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 
 type ConfirmModalProps = {
@@ -23,20 +23,20 @@ const ConfirmModal = ({ show, onConfirm, onClose }: ConfirmModalProps) => {
       isShow={show}
       onClose={noop}
     >
-      <div className="absolute right-4 top-4 cursor-pointer p-2" onClick={onClose}>
+      <div className="absolute top-4 right-4 cursor-pointer p-2" onClick={onClose}>
         <RiCloseLine className="h-4 w-4 text-text-tertiary" />
       </div>
       <div className="h-12 w-12 rounded-xl border-[0.5px] border-divider-regular bg-background-section p-3 shadow-xl">
         <AlertTriangle className="h-6 w-6 text-[rgb(247,144,9)]" />
       </div>
-      <div className="relative mt-3 text-xl font-semibold leading-[30px] text-text-primary">{t('createTool.confirmTitle', { ns: 'tools' })}</div>
+      <div className="relative mt-3 text-xl leading-[30px] font-semibold text-text-primary">{t('createTool.confirmTitle', { ns: 'tools' })}</div>
       <div className="my-1 text-sm leading-5 text-text-tertiary">
         {t('createTool.confirmTip', { ns: 'tools' })}
       </div>
       <div className="flex items-center justify-end pt-6">
         <div className="flex items-center">
           <Button className="mr-2" onClick={onClose}>{t('operation.cancel', { ns: 'common' })}</Button>
-          <Button variant="warning" onClick={onConfirm}>{t('operation.confirm', { ns: 'common' })}</Button>
+          <Button variant="primary" destructive onClick={onConfirm}>{t('operation.confirm', { ns: 'common' })}</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 219a0d8f53..d93a378ec2 100644
--- a/web/app/components/tools/workflow-tool/index.tsx
+++ b/web/app/components/tools/workflow-tool/index.tsx
@@ -7,12 +7,12 @@ import * as React from 'react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
-import Button from '@/app/components/base/button'
 import Drawer from '@/app/components/base/drawer-plus'
 import EmojiPicker from '@/app/components/base/emoji-picker'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import LabelSelector from '@/app/components/tools/labels/selector'
 import ConfirmModal from '@/app/components/tools/workflow-tool/confirm-modal'
@@ -318,7 +318,7 @@ const WorkflowToolAsModal: FC<Props> = ({
             </div>
             <div className={cn((!isAdd && onRemove) ? 'justify-between' : 'justify-end', 'mt-2 flex shrink-0 rounded-b-[10px] border-t border-divider-regular bg-background-section-burn px-6 py-4')}>
               {!isAdd && onRemove && (
-                <Button variant="warning" onClick={onRemove}>{t('operation.delete', { ns: 'common' })}</Button>
+                <Button variant="primary" destructive onClick={onRemove}>{t('operation.delete', { ns: 'common' })}</Button>
               )}
               <div className="flex space-x-2">
                 <Button onClick={onHide}>{t('operation.cancel', { ns: 'common' })}</Button>
diff --git a/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx b/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx
index 0acc03f9a2..7842e01ef2 100644
--- a/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx
+++ b/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx
@@ -15,8 +15,8 @@ import { useTranslation } from 'react-i18next'
 import { useEdges } from 'reactflow'
 import AppPublisher from '@/app/components/app/app-publisher'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import Button from '@/app/components/base/button'
 import { useFeatures } from '@/app/components/base/features/hooks'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { Plan } from '@/app/components/billing/type'
 import {
diff --git a/web/app/components/workflow/block-selector/all-start-blocks.tsx b/web/app/components/workflow/block-selector/all-start-blocks.tsx
index f59edfbcbf..c9848fc7c5 100644
--- a/web/app/components/workflow/block-selector/all-start-blocks.tsx
+++ b/web/app/components/workflow/block-selector/all-start-blocks.tsx
@@ -14,9 +14,9 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import { SearchMenu } from '@/app/components/base/icons/src/vender/line/general'
+import { Button } from '@/app/components/base/ui/button'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import Link from '@/next/link'
 import { useFeaturedTriggersRecommendations } from '@/service/use-plugins'
@@ -127,7 +127,7 @@ const AllStartBlocks = ({
   }, [enableTriggerPlugin, enable_marketplace, hasFilter, fetchPlugins, searchText, tags])
 
   return (
-    <div className={cn('min-w-[400px] max-w-[500px]', className)}>
+    <div className={cn('max-w-[500px] min-w-[400px]', className)}>
       <div className="flex max-h-[640px] flex-col">
         <div
           ref={wrapElemRef}
@@ -152,7 +152,7 @@ const AllStartBlocks = ({
               </>
             )}
             {shouldShowTriggerListTitle && (
-              <div className="px-3 pb-1 pt-2">
+              <div className="px-3 pt-2 pb-1">
                 <span className="system-xs-medium text-text-primary">{t('tabs.allTriggers', { ns: 'workflow' })}</span>
               </div>
             )}
diff --git a/web/app/components/workflow/block-selector/all-tools.tsx b/web/app/components/workflow/block-selector/all-tools.tsx
index 9927eeedce..7c06e7d968 100644
--- a/web/app/components/workflow/block-selector/all-tools.tsx
+++ b/web/app/components/workflow/block-selector/all-tools.tsx
@@ -14,9 +14,9 @@ import type { OnSelectBlock } from '@/app/components/workflow/types'
 import { RiArrowRightUpLine } from '@remixicon/react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import { SearchMenu } from '@/app/components/base/icons/src/vender/line/general'
+import { Button } from '@/app/components/base/ui/button'
 import PluginList from '@/app/components/workflow/block-selector/market-place-plugin/list'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useGetLanguage } from '@/context/i18n'
@@ -259,7 +259,7 @@ const AllTools = ({
             )}
             {hasToolsListContent && (
               <>
-                <div className="px-3 pb-1 pt-2">
+                <div className="px-3 pt-2 pb-1">
                   <span className="system-xs-medium text-text-primary">{t('allTools', { ns: 'tools' })}</span>
                 </div>
                 <Tools
diff --git a/web/app/components/workflow/block-selector/market-place-plugin/action.tsx b/web/app/components/workflow/block-selector/market-place-plugin/action.tsx
index d61b84656f..e9639e30b6 100644
--- a/web/app/components/workflow/block-selector/market-place-plugin/action.tsx
+++ b/web/app/components/workflow/block-selector/market-place-plugin/action.tsx
@@ -7,7 +7,7 @@ import * as React from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-// import Button from '@/app/components/base/button'
+// import { Button } from '@/app/components/base/ui/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
@@ -91,8 +91,8 @@ const OperationDropdown: FC<Props> = ({
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className="z-9999">
         <div className="min-w-[176px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg">
-          <div onClick={handleDownload} className="system-md-regular cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover">{t('operation.download', { ns: 'common' })}</div>
-          <a href={getMarketplaceUrl(`/plugins/${author}/${name}`, { theme })} target="_blank" className="system-md-regular block cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover">{t('operation.viewDetails', { ns: 'common' })}</a>
+          <div onClick={handleDownload} className="cursor-pointer rounded-lg px-3 py-1.5 system-md-regular text-text-secondary hover:bg-state-base-hover">{t('operation.download', { ns: 'common' })}</div>
+          <a href={getMarketplaceUrl(`/plugins/${author}/${name}`, { theme })} target="_blank" className="block cursor-pointer rounded-lg px-3 py-1.5 system-md-regular text-text-secondary hover:bg-state-base-hover">{t('operation.viewDetails', { ns: 'common' })}</a>
         </div>
       </PortalToFollowElemContent>
     </PortalToFollowElem>
diff --git a/web/app/components/workflow/dsl-export-confirm-modal.tsx b/web/app/components/workflow/dsl-export-confirm-modal.tsx
index a92698c8b7..2fb856ea93 100644
--- a/web/app/components/workflow/dsl-export-confirm-modal.tsx
+++ b/web/app/components/workflow/dsl-export-confirm-modal.tsx
@@ -5,10 +5,10 @@ import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Checkbox from '@/app/components/base/checkbox'
 import { Env } from '@/app/components/base/icons/src/vender/line/others'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 
 export type DSLExportConfirmModalProps = {
@@ -37,22 +37,22 @@ const DSLExportConfirmModal = ({
       onClose={noop}
       className={cn('w-[480px] max-w-[480px]')}
     >
-      <div className="title-2xl-semi-bold relative pb-6 text-text-primary">{t('env.export.title', { ns: 'workflow' })}</div>
-      <div className="absolute right-4 top-4 cursor-pointer p-2" onClick={onClose}>
+      <div className="relative pb-6 title-2xl-semi-bold text-text-primary">{t('env.export.title', { ns: 'workflow' })}</div>
+      <div className="absolute top-4 right-4 cursor-pointer p-2" onClick={onClose}>
         <RiCloseLine className="h-4 w-4 text-text-tertiary" />
       </div>
       <div className="relative">
-        <table className="radius-md w-full border-separate border-spacing-0 border border-divider-regular shadow-xs">
+        <table className="w-full border-separate border-spacing-0 radius-md border border-divider-regular shadow-xs">
           <thead className="system-xs-medium-uppercase text-text-tertiary">
             <tr>
-              <td width={220} className="h-7 border-b border-r border-divider-regular pl-3">{t('env.export.name', { ns: 'workflow' })}</td>
+              <td width={220} className="h-7 border-r border-b border-divider-regular pl-3">{t('env.export.name', { ns: 'workflow' })}</td>
               <td className="h-7 border-b border-divider-regular pl-3">{t('env.export.value', { ns: 'workflow' })}</td>
             </tr>
           </thead>
           <tbody>
             {envList.map((env, index) => (
               <tr key={env.name}>
-                <td className={cn('system-xs-medium h-7 border-r pl-3', index + 1 !== envList.length && 'border-b')}>
+                <td className={cn('h-7 border-r pl-3 system-xs-medium', index + 1 !== envList.length && 'border-b')}>
                   <div className="flex w-[200px] items-center gap-1">
                     <Env className="h-4 w-4 shrink-0 text-util-colors-violet-violet-600" />
                     <div className="truncate text-text-primary">{env.name}</div>
@@ -61,7 +61,7 @@ const DSLExportConfirmModal = ({
                   </div>
                 </td>
                 <td className={cn('h-7 pl-3', index + 1 !== envList.length && 'border-b')}>
-                  <div className="system-xs-regular truncate text-text-secondary">{env.value}</div>
+                  <div className="truncate system-xs-regular text-text-secondary">{env.value}</div>
                 </td>
               </tr>
             ))}
@@ -74,7 +74,7 @@ const DSLExportConfirmModal = ({
           checked={exportSecrets}
           onCheck={() => setExportSecrets(!exportSecrets)}
         />
-        <div className="system-sm-medium cursor-pointer text-text-primary" onClick={() => setExportSecrets(!exportSecrets)}>{t('env.export.checkbox', { ns: 'workflow' })}</div>
+        <div className="cursor-pointer system-sm-medium text-text-primary" onClick={() => setExportSecrets(!exportSecrets)}>{t('env.export.checkbox', { ns: 'workflow' })}</div>
       </div>
       <div className="flex flex-row-reverse pt-6">
         <Button className="ml-2" variant="primary" onClick={submit}>{exportSecrets ? t('env.export.export', { ns: 'workflow' }) : t('env.export.ignore', { ns: 'workflow' })}</Button>
diff --git a/web/app/components/workflow/header/chat-variable-button.tsx b/web/app/components/workflow/header/chat-variable-button.tsx
index 2926c55b44..82837274b4 100644
--- a/web/app/components/workflow/header/chat-variable-button.tsx
+++ b/web/app/components/workflow/header/chat-variable-button.tsx
@@ -1,6 +1,6 @@
 import { memo } from 'react'
-import Button from '@/app/components/base/button'
 import { BubbleX } from '@/app/components/base/icons/src/vender/line/others'
+import { Button } from '@/app/components/base/ui/button'
 import { useStore } from '@/app/components/workflow/store'
 import useTheme from '@/hooks/use-theme'
 import { cn } from '@/utils/classnames'
diff --git a/web/app/components/workflow/header/checklist/plugin-group.tsx b/web/app/components/workflow/header/checklist/plugin-group.tsx
index 198f35e68a..75c36bf78e 100644
--- a/web/app/components/workflow/header/checklist/plugin-group.tsx
+++ b/web/app/components/workflow/header/checklist/plugin-group.tsx
@@ -3,7 +3,7 @@ import type { BlockEnum } from '../../types'
 import type { Dependency } from '@/app/components/plugins/types'
 import { memo, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { PopoverClose } from '@/app/components/base/ui/popover'
 import BlockIcon from '../../block-icon'
 import { useStore as usePluginDependencyStore } from '../../plugin-dependency/store'
@@ -59,7 +59,7 @@ export const ChecklistPluginGroup = memo(({
         <div className="flex size-5 shrink-0 items-center justify-center rounded-md border-[0.5px] border-divider-regular bg-components-icon-bg-midnight-solid shadow-xs">
           <span className="i-ri-download-line size-3.5 text-white" />
         </div>
-        <span className="min-w-0 grow truncate text-sm font-medium leading-5 text-text-primary">
+        <span className="min-w-0 grow truncate text-sm leading-5 font-medium text-text-primary">
           {t('nodes.common.pluginsNotInstalled', { ns: 'workflow', count: items.length })}
         </span>
         <PopoverClose
diff --git a/web/app/components/workflow/header/env-button.tsx b/web/app/components/workflow/header/env-button.tsx
index c13dbf683d..2de3743178 100644
--- a/web/app/components/workflow/header/env-button.tsx
+++ b/web/app/components/workflow/header/env-button.tsx
@@ -1,6 +1,6 @@
 import { memo } from 'react'
-import Button from '@/app/components/base/button'
 import { Env } from '@/app/components/base/icons/src/vender/line/others'
+import { Button } from '@/app/components/base/ui/button'
 import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
 import { useStore } from '@/app/components/workflow/store'
 import useTheme from '@/hooks/use-theme'
diff --git a/web/app/components/workflow/header/global-variable-button.tsx b/web/app/components/workflow/header/global-variable-button.tsx
index 1d9b9c806f..5d9dcaa590 100644
--- a/web/app/components/workflow/header/global-variable-button.tsx
+++ b/web/app/components/workflow/header/global-variable-button.tsx
@@ -1,6 +1,6 @@
 import { memo } from 'react'
-import Button from '@/app/components/base/button'
 import { GlobalVariable } from '@/app/components/base/icons/src/vender/line/others'
+import { Button } from '@/app/components/base/ui/button'
 import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
 import { useStore } from '@/app/components/workflow/store'
 import useTheme from '@/hooks/use-theme'
diff --git a/web/app/components/workflow/header/header-in-restoring.tsx b/web/app/components/workflow/header/header-in-restoring.tsx
index a1aaf0f778..cc0934ca30 100644
--- a/web/app/components/workflow/header/header-in-restoring.tsx
+++ b/web/app/components/workflow/header/header-in-restoring.tsx
@@ -3,7 +3,7 @@ import {
   useCallback,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import useTheme from '@/hooks/use-theme'
 import { useInvalidAllLastRun, useRestoreWorkflow } from '@/service/use-workflow'
@@ -82,7 +82,7 @@ const HeaderInRestoring = ({
       <div>
         <RestoringTitle />
       </div>
-      <div className=" flex items-center justify-end gap-x-2">
+      <div className="flex items-center justify-end gap-x-2">
         <Button
           onClick={handleRestore}
           disabled={!canRestore}
diff --git a/web/app/components/workflow/header/header-in-view-history.tsx b/web/app/components/workflow/header/header-in-view-history.tsx
index 60a30a4fff..cd39ce605a 100644
--- a/web/app/components/workflow/header/header-in-view-history.tsx
+++ b/web/app/components/workflow/header/header-in-view-history.tsx
@@ -3,8 +3,8 @@ import {
   useCallback,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { ArrowNarrowLeft } from '@/app/components/base/icons/src/vender/line/arrows'
+import { Button } from '@/app/components/base/ui/button'
 import Divider from '../../base/divider'
 import {
   useWorkflowRun,
diff --git a/web/app/components/workflow/header/version-history-button.tsx b/web/app/components/workflow/header/version-history-button.tsx
index 47a311f22f..5f162e36da 100644
--- a/web/app/components/workflow/header/version-history-button.tsx
+++ b/web/app/components/workflow/header/version-history-button.tsx
@@ -4,9 +4,9 @@ import { useKeyPress } from 'ahooks'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
+import { Button } from '@/app/components/base/ui/button'
 import useTheme from '@/hooks/use-theme'
 import { cn } from '@/utils/classnames'
-import Button from '../../base/button'
 import Tooltip from '../../base/tooltip'
 import ShortcutsName from '../shortcuts-name'
 import { getKeyboardKeyCodeBySystem } from '../utils'
@@ -21,7 +21,7 @@ const PopupContent = React.memo(() => {
   const { t } = useTranslation()
   return (
     <div className="flex items-center gap-x-1">
-      <div className="system-xs-medium px-0.5 text-text-secondary">
+      <div className="px-0.5 system-xs-medium text-text-secondary">
         {t('common.versionHistory', { ns: 'workflow' })}
       </div>
       <ShortcutsName keys={VERSION_HISTORY_SHORTCUT} bgColor="gray" textColor="secondary" />
diff --git a/web/app/components/workflow/nodes/_base/components/add-button.tsx b/web/app/components/workflow/nodes/_base/components/add-button.tsx
index 95a0a963fe..ff18957abf 100644
--- a/web/app/components/workflow/nodes/_base/components/add-button.tsx
+++ b/web/app/components/workflow/nodes/_base/components/add-button.tsx
@@ -4,7 +4,7 @@ import {
   RiAddLine,
 } from '@remixicon/react'
 import * as React from 'react'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 
 type Props = {
diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx
index 0f695bb884..6baa4098fb 100644
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx
@@ -4,7 +4,6 @@ import type { InputVar } from '../../../../types'
 import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useRef } from 'react'
-import AddButton from '@/app/components/base/button/add-button'
 import { RETRIEVAL_OUTPUT_STRUCT } from '@/app/components/workflow/constants'
 import { InputVarType } from '@/app/components/workflow/types'
 import { cn } from '@/utils/classnames'
@@ -79,9 +78,11 @@ const Form: FC<Props> = ({
     <div className={cn(className, 'space-y-2')}>
       {label && (
         <div className="mb-1 flex items-center justify-between">
-          <div className="system-xs-medium-uppercase flex h-6 items-center text-text-tertiary">{label}</div>
+          <div className="flex h-6 items-center system-xs-medium-uppercase text-text-tertiary">{label}</div>
           {isArrayLikeType && !isIteratorItemFile && (
-            <AddButton onClick={handleAddContext} />
+            <div className="cursor-pointer rounded-md p-1 select-none hover:bg-state-base-hover" onClick={handleAddContext} data-testid="add-button">
+              <span className="i-ri-add-line h-4 w-4 text-text-tertiary" />
+            </div>
           )}
         </div>
       )}
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 be29fbbc22..08836cbd50 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
@@ -8,7 +8,7 @@ import type { HumanInputFormData } from '@/types/workflow'
 import * as React from 'react'
 import { useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
 import SingleRunForm from '@/app/components/workflow/nodes/human-input/components/single-run-form'
diff --git a/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-type-selector.tsx b/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-type-selector.tsx
index 232b3e6957..92ca3ed335 100644
--- a/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-type-selector.tsx
+++ b/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-type-selector.tsx
@@ -4,12 +4,12 @@ import {
 } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { ErrorHandleTypeEnum } from './types'
 
 type ErrorHandleTypeSelectorProps = {
@@ -83,7 +83,7 @@ const ErrorHandleTypeSelector = ({
                   }
                 </div>
                 <div className="grow">
-                  <div className="system-sm-semibold mb-0.5 text-text-secondary">{option.label}</div>
+                  <div className="mb-0.5 system-sm-semibold text-text-secondary">{option.label}</div>
                   <div className="system-xs-regular text-text-tertiary">{option.description}</div>
                 </div>
               </div>
diff --git a/web/app/components/workflow/nodes/_base/components/install-plugin-button.tsx b/web/app/components/workflow/nodes/_base/components/install-plugin-button.tsx
index e2e8448df8..21d4ade6ae 100644
--- a/web/app/components/workflow/nodes/_base/components/install-plugin-button.tsx
+++ b/web/app/components/workflow/nodes/_base/components/install-plugin-button.tsx
@@ -2,7 +2,7 @@ import type { ComponentProps, MouseEventHandler } from 'react'
 import { RiInstallLine, RiLoader2Line } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import checkTaskStatus from '@/app/components/plugins/install-plugin/base/check-task-status'
 import { TaskStatus } from '@/app/components/plugins/types'
 import { useCheckInstalled, useInstallPackageFromMarketPlace } from '@/service/use-plugins'
diff --git a/web/app/components/workflow/nodes/_base/components/next-step/item.tsx b/web/app/components/workflow/nodes/_base/components/next-step/item.tsx
index 1019b995b6..023f210108 100644
--- a/web/app/components/workflow/nodes/_base/components/next-step/item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/item.tsx
@@ -7,7 +7,7 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import {
   useNodesInteractions,
@@ -47,7 +47,7 @@ const Item = ({
         className="mr-1.5 shrink-0"
       />
       <div
-        className="system-xs-medium grow truncate text-text-secondary"
+        className="grow truncate system-xs-medium text-text-secondary"
         title={data.title}
       >
         {data.title}
diff --git a/web/app/components/workflow/nodes/_base/components/next-step/operator.tsx b/web/app/components/workflow/nodes/_base/components/next-step/operator.tsx
index 603e01d5ac..bc979eed60 100644
--- a/web/app/components/workflow/nodes/_base/components/next-step/operator.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/operator.tsx
@@ -8,12 +8,12 @@ import {
   useCallback,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import BlockSelector from '@/app/components/workflow/block-selector'
 import {
   useAvailableBlocks,
@@ -98,7 +98,7 @@ const Operator = ({
         </Button>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className="z-10">
-        <div className="system-md-regular min-w-[120px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur text-text-secondary shadow-lg">
+        <div className="min-w-[120px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur system-md-regular text-text-secondary shadow-lg">
           <div className="p-1">
             <ChangeItem
               data={data}
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.trigger.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.trigger.tsx
index 60d9c6f015..32ff6a4627 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.trigger.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.trigger.tsx
@@ -8,7 +8,6 @@ import type { TriggerWithProvider } from '@/app/components/workflow/block-select
 import type { Node, ToolWithProvider, ValueSelector, Var } from '@/app/components/workflow/types'
 import { RiArrowDownSLine, RiCloseLine, RiErrorWarningFill, RiLoader4Line, RiMoreLine } from '@remixicon/react'
 import Badge from '@/app/components/base/badge'
-import AddButton from '@/app/components/base/button/add-button'
 import { Line3 } from '@/app/components/base/icons/src/public/common'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
@@ -130,7 +129,9 @@ const VarReferencePickerTrigger: FC<Props> = ({
         {isAddBtnTrigger
           ? (
               <div>
-                <AddButton onClick={() => {}}></AddButton>
+                <div className="cursor-pointer rounded-md p-1 select-none hover:bg-state-base-hover" onClick={() => {}} data-testid="add-button">
+                  <span className="i-ri-add-line h-4 w-4 text-text-tertiary" />
+                </div>
               </div>
             )
           : (
@@ -148,8 +149,8 @@ const VarReferencePickerTrigger: FC<Props> = ({
                         <TypeSelector
                           noLeft
                           trigger={(
-                            <div className="flex h-8 items-center bg-components-input-bg-normal px-2 radius-md">
-                              <div className="mr-1 text-components-input-text-filled system-sm-regular">{varKindTypes.find(item => item.value === varKindType)?.label}</div>
+                            <div className="flex h-8 items-center radius-md bg-components-input-bg-normal px-2">
+                              <div className="mr-1 system-sm-regular text-components-input-text-filled">{varKindTypes.find(item => item.value === varKindType)?.label}</div>
                               <RiArrowDownSLine className="h-4 w-4 text-text-quaternary" />
                             </div>
                           )}
@@ -163,7 +164,7 @@ const VarReferencePickerTrigger: FC<Props> = ({
                       </div>
                     )
                   : (!hasValue && (
-                      <div className="ml-1.5 mr-1">
+                      <div className="mr-1 ml-1.5">
                         <Variable02 className={`h-4 w-4 ${readonly ? 'text-components-input-text-disabled' : 'text-components-input-text-placeholder'}`} />
                       </div>
                     ))}
@@ -246,7 +247,7 @@ const VarReferencePickerTrigger: FC<Props> = ({
                                             </div>
                                           </div>
                                           <div
-                                            className="ml-0.5 truncate text-center capitalize text-text-tertiary system-xs-regular"
+                                            className="ml-0.5 truncate text-center system-xs-regular text-text-tertiary capitalize"
                                             title={type}
                                             style={{ maxWidth: maxTypeWidth }}
                                           >
@@ -256,7 +257,7 @@ const VarReferencePickerTrigger: FC<Props> = ({
                                         </>
                                       )
                                     : (
-                                        <div className={`overflow-hidden ${readonly ? 'text-components-input-text-disabled' : 'text-components-input-text-placeholder'} text-ellipsis system-sm-regular`}>
+                                        <div className={`overflow-hidden ${readonly ? 'text-components-input-text-disabled' : 'text-components-input-text-placeholder'} system-sm-regular text-ellipsis`}>
                                           {isLoading
                                             ? (
                                                 <div className="flex items-center">
@@ -282,7 +283,7 @@ const VarReferencePickerTrigger: FC<Props> = ({
                     )}
                 {(hasValue && !readonly && !isInTable && !isJustShowValue) && (
                   <div
-                    className="group invisible absolute right-1 top-[50%] h-5 translate-y-[-50%] cursor-pointer rounded-md p-1 hover:bg-state-base-hover group-hover/wrap:visible"
+                    className="group invisible absolute top-[50%] right-1 h-5 translate-y-[-50%] cursor-pointer rounded-md p-1 group-hover/wrap:visible hover:bg-state-base-hover"
                     onClick={handleClearVar}
                     data-testid="var-reference-picker-clear"
                   >
@@ -291,7 +292,7 @@ const VarReferencePickerTrigger: FC<Props> = ({
                 )}
                 {!hasValue && valueTypePlaceHolder && (
                   <Badge
-                    className="absolute right-1 top-[50%] translate-y-[-50%] capitalize"
+                    className="absolute top-[50%] right-1 translate-y-[-50%] capitalize"
                     text={valueTypePlaceHolder}
                     uppercase={false}
                   />
@@ -300,14 +301,14 @@ const VarReferencePickerTrigger: FC<Props> = ({
             )}
         {!readonly && isInTable && (
           <RemoveButton
-            className="absolute right-1 top-0.5 hidden group-hover/picker-trigger-wrap:block"
+            className="absolute top-0.5 right-1 hidden group-hover/picker-trigger-wrap:block"
             onClick={() => onRemove?.()}
           />
         )}
 
         {!hasValue && typePlaceHolder && (
           <Badge
-            className="absolute right-2 top-1.5"
+            className="absolute top-1.5 right-2"
             text={typePlaceHolder}
             uppercase={false}
           />
diff --git a/web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/no-data.tsx b/web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/no-data.tsx
index d2724bdb5f..6237cb6f0f 100644
--- a/web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/no-data.tsx
+++ b/web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/no-data.tsx
@@ -3,8 +3,8 @@ import type { FC } from 'react'
 import { RiPlayLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { ClockPlay } from '@/app/components/base/icons/src/vender/line/time'
+import { Button } from '@/app/components/base/ui/button'
 
 type Props = {
   canSingleRun: boolean
@@ -19,7 +19,7 @@ const NoData: FC<Props> = ({
   return (
     <div className="flex h-0 grow flex-col items-center justify-center">
       <ClockPlay className="h-8 w-8 text-text-quaternary" />
-      <div className="system-xs-regular my-2 text-text-tertiary">{t('debug.noData.description', { ns: 'workflow' })}</div>
+      <div className="my-2 system-xs-regular text-text-tertiary">{t('debug.noData.description', { ns: 'workflow' })}</div>
       {canSingleRun && (
         <Button
           className="flex"
diff --git a/web/app/components/workflow/nodes/code/panel.tsx b/web/app/components/workflow/nodes/code/panel.tsx
index 018baa38a8..9358507173 100644
--- a/web/app/components/workflow/nodes/code/panel.tsx
+++ b/web/app/components/workflow/nodes/code/panel.tsx
@@ -3,8 +3,7 @@ import type { CodeNodeType } from './types'
 import type { NodePanelProps } from '@/app/components/workflow/types'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import AddButton from '@/app/components/base/button/add-button'
-import SyncButton from '@/app/components/base/button/sync-button'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import TypeSelector from '@/app/components/workflow/nodes/_base/components/selector'
@@ -74,8 +73,19 @@ const Panel: FC<NodePanelProps<CodeNodeType>> = ({
             !readOnly
               ? (
                   <div className="flex gap-2">
-                    <SyncButton popupContent={t(`${i18nPrefix}.syncFunctionSignature`, { ns: 'workflow' })} onClick={handleSyncFunctionSignature} />
-                    <AddButton onClick={handleAddVariable} />
+                    <Tooltip>
+                      <TooltipTrigger
+                        className="cursor-pointer rounded-md p-1 select-none hover:bg-state-base-hover"
+                        onClick={handleSyncFunctionSignature}
+                        data-testid="sync-button"
+                      >
+                        <span className="i-ri-refresh-line h-4 w-4 text-text-tertiary" />
+                      </TooltipTrigger>
+                      <TooltipContent>{t(`${i18nPrefix}.syncFunctionSignature`, { ns: 'workflow' })}</TooltipContent>
+                    </Tooltip>
+                    <div className="cursor-pointer rounded-md p-1 select-none hover:bg-state-base-hover" onClick={handleAddVariable} data-testid="add-button">
+                      <span className="i-ri-add-line h-4 w-4 text-text-tertiary" />
+                    </div>
                   </div>
                 )
               : undefined
@@ -110,12 +120,14 @@ const Panel: FC<NodePanelProps<CodeNodeType>> = ({
         />
       </div>
       <Split />
-      <div className="px-4 pb-2 pt-4">
+      <div className="px-4 pt-4 pb-2">
         <Field
           title={t(`${i18nPrefix}.outputVars`, { ns: 'workflow' })}
-          operations={
-            <AddButton onClick={handleAddOutputVariable} />
-          }
+          operations={(
+            <div className="cursor-pointer rounded-md p-1 select-none hover:bg-state-base-hover" onClick={handleAddOutputVariable} data-testid="add-button">
+              <span className="i-ri-add-line h-4 w-4 text-text-tertiary" />
+            </div>
+          )}
           required
         >
           <OutputVarList
diff --git a/web/app/components/workflow/nodes/data-source-empty/index.tsx b/web/app/components/workflow/nodes/data-source-empty/index.tsx
index a638a32bbc..ba896316b3 100644
--- a/web/app/components/workflow/nodes/data-source-empty/index.tsx
+++ b/web/app/components/workflow/nodes/data-source-empty/index.tsx
@@ -5,7 +5,7 @@ import {
   useCallback,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import BlockSelector from '@/app/components/workflow/block-selector'
 import { cn } from '@/utils/classnames'
 import { useReplaceDataSourceNode } from './hooks'
@@ -38,7 +38,7 @@ const DataSourceEmptyNode = ({ id, data }: NodeProps) => {
       }}
     >
       <div className="absolute inset-[-2px] top-[-22px] z-[-1] rounded-[18px] bg-node-data-source-bg p-0.5 backdrop-blur-[6px]">
-        <div className="system-2xs-semibold-uppercase flex h-5 items-center px-2.5 text-text-tertiary">
+        <div className="flex h-5 items-center px-2.5 system-2xs-semibold-uppercase text-text-tertiary">
           {t('blocks.datasource', { ns: 'workflow' })}
         </div>
       </div>
diff --git a/web/app/components/workflow/nodes/data-source/before-run-form.tsx b/web/app/components/workflow/nodes/data-source/before-run-form.tsx
index f8776e683e..677418048f 100644
--- a/web/app/components/workflow/nodes/data-source/before-run-form.tsx
+++ b/web/app/components/workflow/nodes/data-source/before-run-form.tsx
@@ -4,7 +4,7 @@ import type { CustomRunFormProps } from './types'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import LocalFile from '@/app/components/datasets/documents/create-from-pipeline/data-source/local-file'
 import OnlineDocuments from '@/app/components/datasets/documents/create-from-pipeline/data-source/online-documents'
 import OnlineDrive from '@/app/components/datasets/documents/create-from-pipeline/data-source/online-drive'
diff --git a/web/app/components/workflow/nodes/end/panel.tsx b/web/app/components/workflow/nodes/end/panel.tsx
index 2298135b07..a88777c82d 100644
--- a/web/app/components/workflow/nodes/end/panel.tsx
+++ b/web/app/components/workflow/nodes/end/panel.tsx
@@ -3,7 +3,6 @@ import type { EndNodeType } from './types'
 import type { NodePanelProps } from '@/app/components/workflow/types'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import AddButton from '@/app/components/base/button/add-button'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import VarList from '@/app/components/workflow/nodes/_base/components/variable/var-list'
 import useConfig from './use-config'
@@ -32,7 +31,13 @@ const Panel: FC<NodePanelProps<EndNodeType>> = ({
           title={t(`${i18nPrefix}.output.variable`, { ns: 'workflow' })}
           required
           operations={
-            !readOnly ? <AddButton onClick={handleAddVariable} /> : undefined
+            !readOnly
+              ? (
+                  <div className="cursor-pointer rounded-md p-1 select-none hover:bg-state-base-hover" onClick={handleAddVariable} data-testid="add-button">
+                    <span className="i-ri-add-line h-4 w-4 text-text-tertiary" />
+                  </div>
+                )
+              : undefined
           }
         >
           <VarList
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 8af77804e1..439d62c922 100644
--- a/web/app/components/workflow/nodes/http/components/authorization/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/authorization/index.tsx
@@ -6,9 +6,9 @@ import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import BaseInput from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import Input from '@/app/components/workflow/nodes/_base/components/input-support-select-var'
 import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use-available-var-list'
 import { VarType } from '@/app/components/workflow/types'
@@ -29,7 +29,7 @@ type Props = {
 const Field = ({ title, isRequired, children }: { title: string, isRequired?: boolean, children: React.JSX.Element }) => {
   return (
     <div>
-      <div className="text-[13px] font-medium leading-8 text-text-secondary">
+      <div className="text-[13px] leading-8 font-medium text-text-secondary">
         {title}
         {isRequired && <span className="ml-0.5 text-text-destructive">*</span>}
       </div>
diff --git a/web/app/components/workflow/nodes/http/components/curl-panel.tsx b/web/app/components/workflow/nodes/http/components/curl-panel.tsx
index 68d11a7ce5..ef1b28095c 100644
--- a/web/app/components/workflow/nodes/http/components/curl-panel.tsx
+++ b/web/app/components/workflow/nodes/http/components/curl-panel.tsx
@@ -4,9 +4,9 @@ import type { HttpNodeType } from '../types'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
 import Textarea from '@/app/components/base/textarea'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useNodesInteractions } from '@/app/components/workflow/hooks'
 import { parseCurl } from './curl-parser'
diff --git a/web/app/components/workflow/nodes/human-input/components/__tests__/button-style-dropdown.spec.tsx b/web/app/components/workflow/nodes/human-input/components/__tests__/button-style-dropdown.spec.tsx
index b7b0229424..1662e88b79 100644
--- a/web/app/components/workflow/nodes/human-input/components/__tests__/button-style-dropdown.spec.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/__tests__/button-style-dropdown.spec.tsx
@@ -10,9 +10,8 @@ vi.mock('react-i18next', () => ({
   useTranslation: () => mockUseTranslation(),
 }))
 
-vi.mock('@/app/components/base/button', () => ({
-  __esModule: true,
-  default: (props: {
+vi.mock('@/app/components/base/ui/button', () => ({
+  Button: (props: {
     variant?: string
     children?: React.ReactNode
     className?: string
diff --git a/web/app/components/workflow/nodes/human-input/components/__tests__/form-content-preview.spec.tsx b/web/app/components/workflow/nodes/human-input/components/__tests__/form-content-preview.spec.tsx
index e98a74e6b4..7dab3e75e9 100644
--- a/web/app/components/workflow/nodes/human-input/components/__tests__/form-content-preview.spec.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/__tests__/form-content-preview.spec.tsx
@@ -35,9 +35,8 @@ vi.mock('@/app/components/base/badge', () => ({
   default: ({ children }: { children?: ReactNode }) => <div data-testid="badge">{children}</div>,
 }))
 
-vi.mock('@/app/components/base/button', () => ({
-  __esModule: true,
-  default: ({ children, variant }: { children?: ReactNode, variant?: string }) => (
+vi.mock('@/app/components/base/ui/button', () => ({
+  Button: ({ children, variant }: { children?: ReactNode, variant?: string }) => (
     <button type="button" data-testid={`action-${variant}`}>{children}</button>
   ),
 }))
diff --git a/web/app/components/workflow/nodes/human-input/components/__tests__/user-action.spec.tsx b/web/app/components/workflow/nodes/human-input/components/__tests__/user-action.spec.tsx
index af488af817..08b3a30a1f 100644
--- a/web/app/components/workflow/nodes/human-input/components/__tests__/user-action.spec.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/__tests__/user-action.spec.tsx
@@ -27,9 +27,8 @@ vi.mock('@/app/components/base/input', () => ({
   ),
 }))
 
-vi.mock('@/app/components/base/button', () => ({
-  __esModule: true,
-  default: (props: {
+vi.mock('@/app/components/base/ui/button', () => ({
+  Button: (props: {
     children?: ReactNode
     onClick?: () => void
   }) => (
diff --git a/web/app/components/workflow/nodes/human-input/components/button-style-dropdown.tsx b/web/app/components/workflow/nodes/human-input/components/button-style-dropdown.tsx
index 457cf4c287..ae739e2baa 100644
--- a/web/app/components/workflow/nodes/human-input/components/button-style-dropdown.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/button-style-dropdown.tsx
@@ -5,12 +5,12 @@ import {
 import * as React from 'react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import { UserActionButtonType } from '../types'
 
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/email-configure-modal.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/email-configure-modal.tsx
index 21a72b10b5..a5956db6c6 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/email-configure-modal.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/email-configure-modal.tsx
@@ -7,11 +7,11 @@ import { RiBugLine, RiCloseLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/compat'
 import { memo, useCallback, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
 import Switch from '@/app/components/base/switch'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useSelector as useAppContextWithSelector } from '@/context/app-context'
 import MailBodyInput from './mail-body-input'
@@ -83,7 +83,7 @@ const EmailConfigureModal = ({
       onClose={noop}
       className="relative max-w-[720px]! p-0!"
     >
-      <div className="absolute right-5 top-5 cursor-pointer p-1.5" onClick={onClose}>
+      <div className="absolute top-5 right-5 cursor-pointer p-1.5" onClick={onClose}>
         <RiCloseLine className="h-5 w-5 text-text-tertiary" />
       </div>
       <div className="space-y-1 p-6 pb-3">
@@ -92,7 +92,7 @@ const EmailConfigureModal = ({
       </div>
       <div className="space-y-5 px-6 py-3">
         <div>
-          <div className="system-sm-medium mb-1 flex h-6 items-center text-text-secondary">
+          <div className="mb-1 flex h-6 items-center system-sm-medium text-text-secondary">
             {t(`${i18nPrefix}.deliveryMethod.emailConfigure.subject`, { ns: 'workflow' })}
           </div>
           <Input
@@ -103,7 +103,7 @@ const EmailConfigureModal = ({
           />
         </div>
         <div>
-          <div className="system-sm-medium mb-1 flex h-6 items-center text-text-secondary">
+          <div className="mb-1 flex h-6 items-center system-sm-medium text-text-secondary">
             {t(`${i18nPrefix}.deliveryMethod.emailConfigure.body`, { ns: 'workflow' })}
           </div>
           <MailBodyInput
@@ -114,7 +114,7 @@ const EmailConfigureModal = ({
           />
         </div>
         <div>
-          <div className="system-sm-medium mb-1 flex h-6 items-center text-text-secondary">
+          <div className="mb-1 flex h-6 items-center system-sm-medium text-text-secondary">
             {t(`${i18nPrefix}.deliveryMethod.emailConfigure.recipient`, { ns: 'workflow' })}
           </div>
           <Recipient
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/method-item.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/method-item.tsx
index e38487e3c7..3afe390d1d 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/method-item.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/method-item.tsx
@@ -15,9 +15,9 @@ import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
 import Badge from '@/app/components/base/badge/index'
-import Button from '@/app/components/base/button'
 import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 import { useSelector as useAppContextWithSelector } from '@/context/app-context'
 import { cn } from '@/utils/classnames'
@@ -89,7 +89,7 @@ const DeliveryMethodItem: FC<DeliveryMethodItemProps> = ({
     <>
       <div
         className={cn(
-          'group flex h-8 items-center justify-between rounded-lg border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg pl-1.5 pr-2 shadow-xs hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-sm',
+          'group flex h-8 items-center justify-between rounded-lg border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg pr-2 pl-1.5 shadow-xs hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-sm',
           isHovering && 'border-state-destructive-border bg-state-destructive-hover hover:bg-state-destructive-hover',
         )}
       >
@@ -104,7 +104,7 @@ const DeliveryMethodItem: FC<DeliveryMethodItemProps> = ({
               <RiMailSendFill className="h-3.5 w-3.5 text-text-primary-on-surface" />
             </div>
           )}
-          <div className="system-xs-medium capitalize text-text-secondary">{method.type}</div>
+          <div className="system-xs-medium text-text-secondary capitalize">{method.type}</div>
           {method.type === DeliveryMethodType.Email
             && (method.config as EmailConfig)?.debug_mode
             && <Badge size="s" className="px-1! py-0.5!">DEBUG</Badge>}
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-selector.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-selector.tsx
index ac475daf58..27cf28c962 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-selector.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-selector.tsx
@@ -7,8 +7,8 @@ import {
 } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import MemberList from './member-list'
 
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/test-email-sender.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/test-email-sender.tsx
index 2ea1786490..9045a4d2a6 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/test-email-sender.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/test-email-sender.tsx
@@ -9,10 +9,10 @@ import { noop, unionBy } from 'es-toolkit/compat'
 import { memo, useCallback, useMemo, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import Modal from '@/app/components/base/modal'
 import { getInputVars as doGetInputVars } from '@/app/components/base/prompt-editor/constants'
+import { Button } from '@/app/components/base/ui/button'
 import FormItem from '@/app/components/workflow/nodes/_base/components/before-run-form/form-item'
 import {
   getNodeInfoById,
@@ -251,7 +251,7 @@ const EmailSenderModal = ({
       onClose={noop}
       className="relative max-w-[480px]! p-0!"
     >
-      <div className="absolute right-5 top-5 cursor-pointer p-1.5" onClick={onClose}>
+      <div className="absolute top-5 right-5 cursor-pointer p-1.5" onClick={onClose}>
         <RiCloseLine className="h-5 w-5 text-text-tertiary" />
       </div>
       <div className="space-y-1 p-6 pb-3">
@@ -306,12 +306,12 @@ const EmailSenderModal = ({
               onAdd={noop}
             />
           </div>
-          <div className="system-xs-regular px-6 pt-1 text-text-tertiary">
+          <div className="px-6 pt-1 system-xs-regular text-text-tertiary">
             <Trans
               i18nKey={`${i18nPrefix}.deliveryMethod.emailSender.tip`}
               ns="workflow"
               components={{
-                strong: <span onClick={jumpToEmailConfigModal} className="system-xs-regular cursor-pointer text-text-accent"></span>,
+                strong: <span onClick={jumpToEmailConfigModal} className="cursor-pointer system-xs-regular text-text-accent"></span>,
               }}
             />
           </div>
@@ -321,11 +321,11 @@ const EmailSenderModal = ({
       {generatedInputs.length > 0 && (
         <>
           <div className="px-6">
-            <Divider className="mb-2! mt-4! h-px! w-12! bg-divider-regular" />
+            <Divider className="mt-4! mb-2! h-px! w-12! bg-divider-regular" />
           </div>
           <div className="px-6 py-2">
             <div className="group flex h-6 cursor-pointer items-center" onClick={() => setCollapsed(!collapsed)}>
-              <div className="system-sm-semibold-uppercase mr-1 text-text-secondary">{t(`${i18nPrefix}.deliveryMethod.emailSender.vars`, { ns: 'workflow' })}</div>
+              <div className="mr-1 system-sm-semibold-uppercase text-text-secondary">{t(`${i18nPrefix}.deliveryMethod.emailSender.vars`, { ns: 'workflow' })}</div>
               <RiArrowRightSFill className={cn('h-4 w-4 text-text-quaternary group-hover:text-text-primary', !collapsed && 'rotate-90')} />
             </div>
             <div className="system-xs-regular text-text-tertiary">{t(`${i18nPrefix}.deliveryMethod.emailSender.varsTip`, { ns: 'workflow' })}</div>
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/upgrade-modal.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/upgrade-modal.tsx
index 670b1cfbc0..6d78bec6ae 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/upgrade-modal.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/upgrade-modal.tsx
@@ -3,10 +3,10 @@ import {
 } from '@remixicon/react'
 import { noop } from 'es-toolkit/compat'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { SparklesSoft } from '@/app/components/base/icons/src/public/common'
 import Modal from '@/app/components/base/modal'
 import PremiumBadge from '@/app/components/base/premium-badge'
+import { Button } from '@/app/components/base/ui/button'
 import { useModalContextSelector } from '@/context/modal-context'
 import { cn } from '@/utils/classnames'
 
@@ -37,11 +37,11 @@ const UpgradeModal: React.FC<UpgradeModalProps> = ({
           <RiMailSendFill className="h-6 w-6 text-text-primary-on-surface" />
         </div>
         <p
-          className="title-3xl-semi-bold bg-[linear-gradient(271deg,var(--components-input-border-active-prompt-1,#155AEF)_-12.85%,var(--components-input-border-active-prompt-2,#0BA5EC)_95.4%)] bg-clip-text text-transparent"
+          className="bg-[linear-gradient(271deg,var(--components-input-border-active-prompt-1,#155AEF)_-12.85%,var(--components-input-border-active-prompt-2,#0BA5EC)_95.4%)] bg-clip-text title-3xl-semi-bold text-transparent"
         >
           {t('nodes.humanInput.deliveryMethod.upgradeTip', { ns: 'workflow' })}
         </p>
-        <p className="system-md-regular mt-2 text-text-tertiary">
+        <p className="mt-2 system-md-regular text-text-tertiary">
           {t('nodes.humanInput.deliveryMethod.upgradeTipContent', { ns: 'workflow' })}
         </p>
       </div>
diff --git a/web/app/components/workflow/nodes/human-input/components/form-content-preview.tsx b/web/app/components/workflow/nodes/human-input/components/form-content-preview.tsx
index 2420e00d7b..1364941edf 100644
--- a/web/app/components/workflow/nodes/human-input/components/form-content-preview.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/form-content-preview.tsx
@@ -1,14 +1,14 @@
 'use client'
 import type { FC } from 'react'
 import type { FormInputItem, UserAction } from '../types'
-import type { ButtonProps } from '@/app/components/base/button'
+import type { ButtonProps } from '@/app/components/base/ui/button'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import Badge from '@/app/components/base/badge'
-import Button from '@/app/components/base/button'
 import { getButtonStyle } from '@/app/components/base/chat/chat/answer/human-input-content/utils'
 import { Markdown } from '@/app/components/base/markdown'
+import { Button } from '@/app/components/base/ui/button'
 import { useStore } from '@/app/components/workflow/store'
 import useNodes from '@/app/components/workflow/store/workflow/use-nodes'
 import { Note, rehypeNotes, rehypeVariable, Variable } from './variable-in-markdown'
@@ -92,7 +92,7 @@ const FormContentPreview: FC<FormContentPreviewProps> = ({
             </Button>
           ))}
         </div>
-        <div className="mt-1 text-text-tertiary system-xs-regular">{t('nodes.humanInput.editor.previewTip', { ns: 'workflow' })}</div>
+        <div className="mt-1 system-xs-regular text-text-tertiary">{t('nodes.humanInput.editor.previewTip', { ns: 'workflow' })}</div>
       </div>
     </div>
   )
diff --git a/web/app/components/workflow/nodes/human-input/components/single-run-form.tsx b/web/app/components/workflow/nodes/human-input/components/single-run-form.tsx
index 7fd0c74000..dc735830c6 100644
--- a/web/app/components/workflow/nodes/human-input/components/single-run-form.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/single-run-form.tsx
@@ -1,5 +1,5 @@
 'use client'
-import type { ButtonProps } from '@/app/components/base/button'
+import type { ButtonProps } from '@/app/components/base/ui/button'
 import type { UserAction } from '@/app/components/workflow/nodes/human-input/types'
 import type { HumanInputFormData } from '@/types/workflow'
 import { RiArrowLeftLine } from '@remixicon/react'
@@ -7,9 +7,9 @@ import * as React from 'react'
 
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import ContentItem from '@/app/components/base/chat/chat/answer/human-input-content/content-item'
 import { getButtonStyle, initializeInputs, splitByOutputVar } from '@/app/components/base/chat/chat/answer/human-input-content/utils'
+import { Button } from '@/app/components/base/ui/button'
 
 type Props = {
   nodeName: string
@@ -49,11 +49,11 @@ const FormContent = ({
     <>
       {showBackButton && (
         <div className="flex items-center p-4 pb-1">
-          <div className="system-sm-semibold-uppercase flex cursor-pointer items-center text-text-accent" onClick={handleBack}>
+          <div className="flex cursor-pointer items-center system-sm-semibold-uppercase text-text-accent" onClick={handleBack}>
             <RiArrowLeftLine className="mr-1 h-4 w-4" />
             {t('nodes.humanInput.singleRun.back', { ns: 'workflow' })}
           </div>
-          <div className="system-xs-regular mx-1 text-divider-deep">/</div>
+          <div className="mx-1 system-xs-regular text-divider-deep">/</div>
           <div className="system-sm-semibold-uppercase text-text-secondary">{nodeName}</div>
         </div>
       )}
diff --git a/web/app/components/workflow/nodes/human-input/components/user-action.tsx b/web/app/components/workflow/nodes/human-input/components/user-action.tsx
index ca0398eb7f..6ef5609a64 100644
--- a/web/app/components/workflow/nodes/human-input/components/user-action.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/user-action.tsx
@@ -5,8 +5,8 @@ import {
 } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import ButtonStyleDropdown from './button-style-dropdown'
 
diff --git a/web/app/components/workflow/nodes/human-input/panel.tsx b/web/app/components/workflow/nodes/human-input/panel.tsx
index 2d09d2848e..24e2d6c8dc 100644
--- a/web/app/components/workflow/nodes/human-input/panel.tsx
+++ b/web/app/components/workflow/nodes/human-input/panel.tsx
@@ -14,9 +14,9 @@ import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
@@ -100,7 +100,7 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
       </div>
       {/* form content */}
       <div
-        className={cn('px-4 py-2', isExpandFormContent && 'fixed bottom-[8px] right-[4px] top-[244px] z-10 flex flex-col rounded-b-2xl bg-components-panel-bg')}
+        className={cn('px-4 py-2', isExpandFormContent && 'fixed top-[244px] right-[4px] bottom-[8px] z-10 flex flex-col rounded-b-2xl bg-components-panel-bg')}
         style={{
           width: isExpandFormContent ? nodePanelWidth : '100%',
         }}
@@ -113,7 +113,7 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
             />
           </div>
           {!readOnly && (
-            <div className="flex items-center ">
+            <div className="flex items-center">
               <Button
                 variant="ghost"
                 size="small"
@@ -179,7 +179,7 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
           )}
         </div>
         {!inputs.user_actions.length && (
-          <div className="system-xs-regular flex items-center justify-center radius-lg bg-background-section p-3 text-text-tertiary">{t(`${i18nPrefix}.userActions.emptyTip`, { ns: 'workflow' })}</div>
+          <div className="flex items-center justify-center radius-lg bg-background-section p-3 system-xs-regular text-text-tertiary">{t(`${i18nPrefix}.userActions.emptyTip`, { ns: 'workflow' })}</div>
         )}
         {inputs.user_actions.length > 0 && (
           <div className="space-y-2">
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-add.tsx b/web/app/components/workflow/nodes/if-else/components/condition-add.tsx
index 6aa25ddc58..3b6d729078 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-add.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-add.tsx
@@ -10,12 +10,12 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import VarReferenceVars from '@/app/components/workflow/nodes/_base/components/variable/var-reference-vars'
 
 type ConditionAddProps = {
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx
index e9d3092e6c..43fc5c391a 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx
@@ -6,12 +6,12 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import { getOperators, isComparisonOperatorNeedTranslate } from '../../utils'
 
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx b/web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx
index 1ac411d4e1..be4df1501d 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx
@@ -11,13 +11,13 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import VarReferenceVars from '@/app/components/workflow/nodes/_base/components/variable/var-reference-vars'
 import { VarType } from '@/app/components/workflow/types'
 import { variableTransformer } from '@/app/components/workflow/utils'
@@ -147,7 +147,7 @@ const ConditionNumberInput = ({
         }
         {
           numberVarType === NumberVarType.constant && (
-            <div className=" relative">
+            <div className="relative">
               <input
                 className={cn('block w-full appearance-none bg-transparent px-2 text-[13px] text-components-input-text-filled outline-hidden placeholder:text-components-input-text-placeholder', unit && 'pr-6')}
                 type="number"
@@ -157,7 +157,7 @@ const ConditionNumberInput = ({
                 onFocus={setFocus}
                 onBlur={setBlur}
               />
-              {!isFocus && unit && <div className="system-sm-regular absolute right-2 top-[50%] translate-y-[-50%] text-text-tertiary">{unit}</div>}
+              {!isFocus && unit && <div className="absolute top-[50%] right-2 translate-y-[-50%] system-sm-regular text-text-tertiary">{unit}</div>}
             </div>
           )
         }
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx b/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
index b9abd80f42..e03e43ea70 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
@@ -12,8 +12,8 @@ import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ReactSortable } from 'react-sortablejs'
-import Button from '@/app/components/base/button'
 import { PortalSelect as Select } from '@/app/components/base/select'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import { VarType } from '../../../types'
 import { SUB_VARIABLES } from '../../constants'
@@ -99,19 +99,19 @@ const ConditionWrap: FC<Props> = ({
                 className={cn(
                   'group relative radius-lg bg-components-panel-bg',
                   willDeleteCaseId === item.case_id && 'bg-state-destructive-hover',
-                  !isSubVariable && 'min-h-[40px] px-3 py-1 ',
+                  !isSubVariable && 'min-h-[40px] px-3 py-1',
                   isSubVariable && 'px-1 py-2',
                 )}
               >
                 {!isSubVariable && (
                   <>
                     <RiDraggable className={cn(
-                      'handle absolute left-1 top-2 hidden h-3 w-3 cursor-pointer text-text-quaternary',
+                      'handle absolute top-2 left-1 hidden h-3 w-3 cursor-pointer text-text-quaternary',
                       casesLength > 1 && 'group-hover:block',
                     )}
                     />
                     <div className={cn(
-                      'absolute left-4 text-[13px] font-semibold leading-4 text-text-secondary',
+                      'absolute left-4 text-[13px] leading-4 font-semibold text-text-secondary',
                       casesLength === 1 ? 'top-2.5' : 'top-1',
                     )}
                     >
@@ -161,7 +161,7 @@ const ConditionWrap: FC<Props> = ({
                   'flex items-center justify-between pr-[30px]',
                   !item.conditions.length && !isSubVariable && 'mt-1',
                   !item.conditions.length && isSubVariable && 'mt-2',
-                  !isSubVariable && ' pl-[60px]',
+                  !isSubVariable && 'pl-[60px]',
                 )}
                 >
                   {isSubVariable
diff --git a/web/app/components/workflow/nodes/if-else/panel.tsx b/web/app/components/workflow/nodes/if-else/panel.tsx
index e20b1ea956..e8dae6fad9 100644
--- a/web/app/components/workflow/nodes/if-else/panel.tsx
+++ b/web/app/components/workflow/nodes/if-else/panel.tsx
@@ -8,7 +8,7 @@ import {
   memo,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import ConditionWrap from './components/condition-wrap'
 import useConfig from './use-config'
@@ -78,7 +78,7 @@ const Panel: FC<NodePanelProps<IfElseNodeType>> = ({
         title={t(`${i18nPrefix}.else`, { ns: 'workflow' })}
         className="px-4 py-2"
       >
-        <div className="text-xs font-normal leading-[18px] text-text-tertiary">{t(`${i18nPrefix}.elseDescription`, { ns: 'workflow' })}</div>
+        <div className="text-xs leading-[18px] font-normal text-text-tertiary">{t(`${i18nPrefix}.elseDescription`, { ns: 'workflow' })}</div>
       </Field>
     </div>
   )
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/index.tsx b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/index.tsx
index 88b71286b3..a7bba6879e 100644
--- a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/index.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/index.tsx
@@ -1,7 +1,7 @@
 import type { ChunkStructureEnum } from '../../types'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { Field } from '@/app/components/workflow/nodes/_base/components/layout'
 import OptionCard from '../option-card'
 import { useChunkStructure } from './hooks'
@@ -64,7 +64,7 @@ const ChunkStructure = ({
                   className="w-full"
                   variant="secondary-accent"
                 >
-                  <span className="i-ri-add-line mr-1 h-4 w-4" />
+                  <span className="mr-1 i-ri-add-line h-4 w-4" />
                   {t('nodes.knowledgeBase.chooseChunkStructure', { ns: 'workflow' })}
                 </Button>
               )}
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/selector.tsx b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/selector.tsx
index eb377d7fd4..5018bbc784 100644
--- a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/selector.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/selector.tsx
@@ -3,12 +3,12 @@ import type { ChunkStructureEnum } from '../../types'
 import type { Option } from './type'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import OptionCard from '../option-card'
 
 type SelectorProps = {
@@ -64,7 +64,7 @@ const Selector = ({
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className="z-10">
         <div className="w-[404px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-xl backdrop-blur-[5px]">
-          <div className="system-sm-semibold px-3 pt-3.5 text-text-primary">
+          <div className="px-3 pt-3.5 system-sm-semibold text-text-primary">
             {t('nodes.knowledgeBase.changeChunkStructure', { ns: 'workflow' })}
           </div>
           <div className="space-y-1 p-3 pt-2">
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/add-dataset.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/add-dataset.tsx
index a513280dec..fe6d83d244 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/add-dataset.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/add-dataset.tsx
@@ -5,7 +5,6 @@ import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useCallback } from 'react'
 import SelectDataset from '@/app/components/app/configuration/dataset-config/select-dataset'
-import AddButton from '@/app/components/base/button/add-button'
 
 type Props = {
   selectedIds: string[]
@@ -27,7 +26,9 @@ const AddDataset: FC<Props> = ({
   }, [onChange, hideModal])
   return (
     <div>
-      <AddButton onClick={showModal} />
+      <div className="cursor-pointer rounded-md p-1 select-none hover:bg-state-base-hover" onClick={showModal} data-testid="add-button">
+        <span className="i-ri-add-line h-4 w-4 text-text-tertiary" />
+      </div>
       {isShowModal && (
         <SelectDataset
           isShow={isShowModal}
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/add-condition.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/add-condition.tsx
index fec8e96541..e94caf7b30 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/add-condition.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/add-condition.tsx
@@ -9,13 +9,13 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import MetadataIcon from './metadata-icon'
 
 const AddCondition = ({
@@ -69,7 +69,7 @@ const AddCondition = ({
               filteredMetadataList?.map(metadata => (
                 <div
                   key={metadata.name}
-                  className="system-sm-medium flex h-6 cursor-pointer items-center rounded-md px-3 text-text-secondary hover:bg-state-base-hover"
+                  className="flex h-6 cursor-pointer items-center rounded-md px-3 system-sm-medium text-text-secondary hover:bg-state-base-hover"
                 >
                   <div className="mr-1 p-px">
                     <MetadataIcon type={metadata.type} />
@@ -81,7 +81,7 @@ const AddCondition = ({
                   >
                     {metadata.name}
                   </div>
-                  <div className="system-xs-regular shrink-0 text-text-tertiary">{metadata.type}</div>
+                  <div className="shrink-0 system-xs-regular text-text-tertiary">{metadata.type}</div>
                 </div>
               ))
             }
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-operator.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-operator.tsx
index 4af1bc00f8..550142db96 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-operator.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-operator.tsx
@@ -8,12 +8,12 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import {
   getOperators,
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-value-method.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-value-method.tsx
index ab0c027e68..b24a41589a 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-value-method.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-value-method.tsx
@@ -1,12 +1,12 @@
 import { RiArrowDownSLine } from '@remixicon/react'
 import { capitalize } from 'es-toolkit/string'
 import { useState } from 'react'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 
 export type ConditionValueMethodProps = {
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-filter/metadata-filter-selector.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-filter/metadata-filter-selector.tsx
index d855c8ebea..67939a6448 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-filter/metadata-filter-selector.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-filter/metadata-filter-selector.tsx
@@ -4,12 +4,12 @@ import {
 } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { MetadataFilteringModeEnum } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
 
 type MetadataFilterSelectorProps = {
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-trigger.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-trigger.tsx
index bb43f762d0..1553da1e1f 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-trigger.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-trigger.tsx
@@ -5,12 +5,12 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import MetadataPanel from './metadata-panel'
 
 const MetadataTrigger = ({
@@ -53,7 +53,7 @@ const MetadataTrigger = ({
         >
           <RiFilter3Line className="mr-1 h-3.5 w-3.5" />
           {t('nodes.knowledgeRetrieval.metadata.panel.conditions', { ns: 'workflow' })}
-          <div className="system-2xs-medium-uppercase ml-1 flex items-center rounded-[5px] border border-divider-deep px-1 text-text-tertiary">
+          <div className="ml-1 flex items-center rounded-[5px] border border-divider-deep px-1 system-2xs-medium-uppercase text-text-tertiary">
             {metadataFilteringConditions?.conditions.length || 0}
           </div>
         </Button>
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx
index c3eef42a39..ec5399974b 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx
@@ -10,12 +10,12 @@ import * as React from 'react'
 import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import ConfigRetrievalContent from '@/app/components/app/configuration/dataset-config/params-config/config-content'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { DATASET_DEFAULT } from '@/config'
 import { RETRIEVE_TYPE } from '@/types/app'
 import { cn } from '@/utils/classnames'
@@ -140,7 +140,7 @@ const RetrievalConfig: FC<Props> = ({
         </Button>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent style={{ zIndex: 1001 }}>
-        <div className="w-[404px] rounded-2xl border border-components-panel-border bg-components-panel-bg  px-4 pb-4 pt-3  shadow-xl">
+        <div className="w-[404px] rounded-2xl border border-components-panel-border bg-components-panel-bg px-4 pt-3 pb-4 shadow-xl">
           <ConfigRetrievalContent
             datasetConfigs={datasetConfigs}
             onChange={handleChange}
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx
index 8ba827fb96..840e293cd7 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx
@@ -3,8 +3,8 @@ import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { JSON_SCHEMA_MAX_DEPTH } from '@/config'
 import { cn } from '@/utils/classnames'
 import { checkJsonDepth } from '../../utils'
@@ -90,7 +90,7 @@ const JsonImporter: FC<JsonImporterProps> = ({
         <button
           type="button"
           className={cn(
-            'system-xs-medium flex shrink-0 rounded-md px-1.5 py-1 text-text-tertiary hover:bg-components-button-ghost-bg-hover',
+            'flex shrink-0 rounded-md px-1.5 py-1 system-xs-medium text-text-tertiary hover:bg-components-button-ghost-bg-hover',
             open && 'bg-components-button-ghost-bg-hover',
           )}
         >
@@ -100,11 +100,11 @@ const JsonImporter: FC<JsonImporterProps> = ({
       <PortalToFollowElemContent className="z-100">
         <div className="flex w-[400px] flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl shadow-shadow-shadow-9">
           {/* Title */}
-          <div className="relative px-3 pb-1 pt-3.5">
-            <div className="absolute bottom-0 right-2.5 flex h-8 w-8 items-center justify-center" onClick={onClose}>
+          <div className="relative px-3 pt-3.5 pb-1">
+            <div className="absolute right-2.5 bottom-0 flex h-8 w-8 items-center justify-center" onClick={onClose}>
               <RiCloseLine className="h-4 w-4 text-text-tertiary" />
             </div>
-            <div className="system-xl-semibold flex pl-1 pr-8 text-text-primary">
+            <div className="flex pr-8 pl-1 system-xl-semibold text-text-primary">
               {t('nodes.llm.jsonSchema.import', { ns: 'workflow' })}
             </div>
           </div>
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx
index 164e7c3c29..b84e87269f 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx
@@ -2,8 +2,8 @@ import type { FC } from 'react'
 import type { SchemaRoot } from '../../types'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { JSON_SCHEMA_MAX_DEPTH } from '@/config'
 import { cn } from '@/utils/classnames'
@@ -207,11 +207,11 @@ const JsonSchemaConfig: FC<JsonSchemaConfigProps> = ({
   return (
     <div className="flex h-full flex-col">
       {/* Header */}
-      <div className="relative flex p-6 pb-3 pr-14">
-        <div className="grow truncate text-text-primary title-2xl-semi-bold">
+      <div className="relative flex p-6 pr-14 pb-3">
+        <div className="grow truncate title-2xl-semi-bold text-text-primary">
           {t('nodes.llm.jsonSchema.title', { ns: 'workflow' })}
         </div>
-        <div className="absolute right-5 top-5 flex h-8 w-8 items-center justify-center p-1.5" onClick={onClose}>
+        <div className="absolute top-5 right-5 flex h-8 w-8 items-center justify-center p-1.5" onClick={onClose}>
           <span className="i-ri-close-line h-[18px] w-[18px] text-text-tertiary" />
         </div>
       </div>
@@ -260,7 +260,7 @@ const JsonSchemaConfig: FC<JsonSchemaConfigProps> = ({
             <Button variant="secondary" onClick={handleResetDefaults}>
               {t('nodes.llm.jsonSchema.resetDefaults', { ns: 'workflow' })}
             </Button>
-            <Divider type="vertical" className="ml-1 mr-0 h-4" />
+            <Divider type="vertical" className="mr-0 ml-1 h-4" />
           </div>
           <div className="flex items-center gap-x-2">
             <Button variant="secondary" onClick={handleCancel}>
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/generated-result.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/generated-result.tsx
index 377e7e3b6a..4f7b2ceb0c 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/generated-result.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/generated-result.tsx
@@ -4,8 +4,8 @@ import { RiArrowLeftLine, RiCloseLine, RiSparklingLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
+import { Button } from '@/app/components/base/ui/button'
 import { getValidationErrorMessage, validateSchemaAgainstDraft7 } from '../../../utils'
 import CodeEditor from '../code-editor'
 import ErrorMessage from '../error-message'
@@ -68,15 +68,15 @@ const GeneratedResult: FC<GeneratedResultProps> = ({
           </div>
         ) : (
           <>
-            <div className="absolute right-2.5 top-2.5 flex h-8 w-8 items-center justify-center" onClick={onClose}>
+            <div className="absolute top-2.5 right-2.5 flex h-8 w-8 items-center justify-center" onClick={onClose}>
               <RiCloseLine className="h-4 w-4 text-text-tertiary" />
             </div>
             {/* Title */}
-            <div className="flex flex-col gap-y-[0.5px] px-3 pb-1 pt-3.5">
-              <div className="system-xl-semibold flex pl-1 pr-8 text-text-primary">
+            <div className="flex flex-col gap-y-[0.5px] px-3 pt-3.5 pb-1">
+              <div className="flex pr-8 pl-1 system-xl-semibold text-text-primary">
                 {t('nodes.llm.jsonSchema.generatedResult', { ns: 'workflow' })}
               </div>
-              <div className="system-xs-regular flex px-1 text-text-tertiary">
+              <div className="flex px-1 system-xs-regular text-text-tertiary">
                 {t('nodes.llm.jsonSchema.resultTip', { ns: 'workflow' })}
               </div>
             </div>
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/prompt-editor.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/prompt-editor.tsx
index 8c7eb854dd..1a7bce0361 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/prompt-editor.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/prompt-editor.tsx
@@ -5,9 +5,9 @@ import { RiCloseLine, RiSparklingFill } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Textarea from '@/app/components/base/textarea'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
 
 type ModelInfo = {
@@ -44,21 +44,21 @@ const PromptEditor: FC<PromptEditorProps> = ({
 
   return (
     <div className="relative flex w-[480px] flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl shadow-shadow-shadow-9">
-      <div className="absolute right-2.5 top-2.5 flex h-8 w-8 items-center justify-center" onClick={onClose}>
+      <div className="absolute top-2.5 right-2.5 flex h-8 w-8 items-center justify-center" onClick={onClose}>
         <RiCloseLine className="h-4 w-4 text-text-tertiary" />
       </div>
       {/* Title */}
-      <div className="flex flex-col gap-y-[0.5px] px-3 pb-1 pt-3.5">
-        <div className="system-xl-semibold flex pl-1 pr-8 text-text-primary">
+      <div className="flex flex-col gap-y-[0.5px] px-3 pt-3.5 pb-1">
+        <div className="flex pr-8 pl-1 system-xl-semibold text-text-primary">
           {t('nodes.llm.jsonSchema.generateJsonSchema', { ns: 'workflow' })}
         </div>
-        <div className="system-xs-regular flex px-1 text-text-tertiary">
+        <div className="flex px-1 system-xs-regular text-text-tertiary">
           {t('nodes.llm.jsonSchema.generationTip', { ns: 'workflow' })}
         </div>
       </div>
       {/* Content */}
       <div className="flex flex-col gap-y-1 px-4 py-2">
-        <div className="system-sm-semibold-uppercase flex h-6 items-center text-text-secondary">
+        <div className="flex h-6 items-center system-sm-semibold-uppercase text-text-secondary">
           {t('modelProvider.model', { ns: 'common' })}
         </div>
         <ModelParameterModal
@@ -73,7 +73,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
         />
       </div>
       <div className="flex flex-col gap-y-1 px-4 py-2">
-        <div className="system-sm-semibold-uppercase flex h-6 items-center text-text-secondary">
+        <div className="flex h-6 items-center system-sm-semibold-uppercase text-text-secondary">
           <span>{t('nodes.llm.jsonSchema.instruction', { ns: 'workflow' })}</span>
           <Tooltip popupContent={t('nodes.llm.jsonSchema.promptTooltip', { ns: 'workflow' })} />
         </div>
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/add-field.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/add-field.tsx
index 7e88b70e15..d25ee83f80 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/add-field.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/add-field.tsx
@@ -2,7 +2,7 @@ import { RiAddCircleFill } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { useMittContext } from './context'
 import { useVisualEditorStore } from './store'
 
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/advanced-actions.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/advanced-actions.tsx
index 8aad824008..3601895942 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/advanced-actions.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/advanced-actions.tsx
@@ -2,7 +2,7 @@ import type { FC } from 'react'
 import { useKeyPress } from 'ahooks'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import ShortcutsName from '@/app/components/workflow/shortcuts-name'
 import { getKeyboardKeyCodeBySystem } from '@/app/components/workflow/utils'
 
diff --git a/web/app/components/workflow/nodes/llm/components/structure-output.tsx b/web/app/components/workflow/nodes/llm/components/structure-output.tsx
index a3320e9983..d60af7bf55 100644
--- a/web/app/components/workflow/nodes/llm/components/structure-output.tsx
+++ b/web/app/components/workflow/nodes/llm/components/structure-output.tsx
@@ -6,7 +6,7 @@ import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import ShowPanel from '@/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show'
 import { cn } from '@/utils/classnames'
 import { Type } from '../types'
@@ -39,7 +39,7 @@ const StructureOutput: FC<Props> = ({
       <div className="flex justify-between">
         <div className="flex items-center leading-[18px]">
           <div className="code-sm-semibold text-text-secondary">structured_output</div>
-          <div className="system-xs-regular ml-2 text-text-tertiary">object</div>
+          <div className="ml-2 system-xs-regular text-text-tertiary">object</div>
         </div>
         <Button
           size="small"
@@ -58,7 +58,7 @@ const StructureOutput: FC<Props> = ({
             />
           )
         : (
-            <div className="system-xs-regular mt-1.5 flex h-10 cursor-pointer items-center justify-center radius-lg bg-background-section text-text-tertiary" onClick={showConfigModal}>{t('structOutput.notConfiguredTip', { ns: 'app' })}</div>
+            <div className="mt-1.5 flex h-10 cursor-pointer items-center justify-center radius-lg bg-background-section system-xs-regular text-text-tertiary" onClick={showConfigModal}>{t('structOutput.notConfiguredTip', { ns: 'app' })}</div>
           )}
 
       {showConfig && (
diff --git a/web/app/components/workflow/nodes/llm/panel.tsx b/web/app/components/workflow/nodes/llm/panel.tsx
index 7789b3989f..f465366ee9 100644
--- a/web/app/components/workflow/nodes/llm/panel.tsx
+++ b/web/app/components/workflow/nodes/llm/panel.tsx
@@ -4,7 +4,6 @@ import type { NodePanelProps } from '@/app/components/workflow/types'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import AddButton2 from '@/app/components/base/button/add-button'
 import { toast } from '@/app/components/base/ui/toast'
 import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
@@ -146,7 +145,7 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
               filterVar={filterVar}
             />
             {shouldShowContextTip && (
-              <div className="text-xs font-normal leading-[18px] text-[#DC6803]">{t(`${i18nPrefix}.notSetContextInPromptTip`, { ns: 'workflow' })}</div>
+              <div className="text-xs leading-[18px] font-normal text-[#DC6803]">{t(`${i18nPrefix}.notSetContextInPromptTip`, { ns: 'workflow' })}</div>
             )}
           </>
         </Field>
@@ -173,7 +172,13 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
           <Field
             title={t('nodes.templateTransform.inputVars', { ns: 'workflow' })}
             operations={
-              !readOnly ? <AddButton2 onClick={handleAddEmptyVariable} /> : undefined
+              !readOnly
+                ? (
+                    <div className="cursor-pointer rounded-md p-1 select-none hover:bg-state-base-hover" onClick={handleAddEmptyVariable} data-testid="add-button">
+                      <span className="i-ri-add-line h-4 w-4 text-text-tertiary" />
+                    </div>
+                  )
+                : undefined
             }
           >
             <VarList
diff --git a/web/app/components/workflow/nodes/loop/components/condition-add.tsx b/web/app/components/workflow/nodes/loop/components/condition-add.tsx
index 35e0747319..1d9be045d2 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-add.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-add.tsx
@@ -10,12 +10,12 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import VarReferenceVars from '@/app/components/workflow/nodes/_base/components/variable/var-reference-vars'
 
 type ConditionAddProps = {
diff --git a/web/app/components/workflow/nodes/loop/components/condition-list/condition-operator.tsx b/web/app/components/workflow/nodes/loop/components/condition-list/condition-operator.tsx
index ecbdcb7355..8ec128a2e6 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-list/condition-operator.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-list/condition-operator.tsx
@@ -6,12 +6,12 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import { getOperators, isComparisonOperatorNeedTranslate } from '../../utils'
 
diff --git a/web/app/components/workflow/nodes/loop/components/condition-number-input.tsx b/web/app/components/workflow/nodes/loop/components/condition-number-input.tsx
index 1ac411d4e1..be4df1501d 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-number-input.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-number-input.tsx
@@ -11,13 +11,13 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import VarReferenceVars from '@/app/components/workflow/nodes/_base/components/variable/var-reference-vars'
 import { VarType } from '@/app/components/workflow/types'
 import { variableTransformer } from '@/app/components/workflow/utils'
@@ -147,7 +147,7 @@ const ConditionNumberInput = ({
         }
         {
           numberVarType === NumberVarType.constant && (
-            <div className=" relative">
+            <div className="relative">
               <input
                 className={cn('block w-full appearance-none bg-transparent px-2 text-[13px] text-components-input-text-filled outline-hidden placeholder:text-components-input-text-placeholder', unit && 'pr-6')}
                 type="number"
@@ -157,7 +157,7 @@ const ConditionNumberInput = ({
                 onFocus={setFocus}
                 onBlur={setBlur}
               />
-              {!isFocus && unit && <div className="system-sm-regular absolute right-2 top-[50%] translate-y-[-50%] text-text-tertiary">{unit}</div>}
+              {!isFocus && unit && <div className="absolute top-[50%] right-2 translate-y-[-50%] system-sm-regular text-text-tertiary">{unit}</div>}
             </div>
           )
         }
diff --git a/web/app/components/workflow/nodes/loop/components/condition-wrap.tsx b/web/app/components/workflow/nodes/loop/components/condition-wrap.tsx
index d29eb5c432..aa52956470 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-wrap.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-wrap.tsx
@@ -8,8 +8,8 @@ import {
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { PortalSelect as Select } from '@/app/components/base/select'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import { VarType } from '../../../types'
 import { useGetAvailableVars } from '../../variable-assigner/hooks'
@@ -76,7 +76,7 @@ const ConditionWrap: FC<Props> = ({
         <div
           className={cn(
             'group relative radius-lg bg-components-panel-bg',
-            !isSubVariable && 'min-h-[40px] px-3 py-1 ',
+            !isSubVariable && 'min-h-[40px] px-3 py-1',
             isSubVariable && 'px-1 py-2',
           )}
         >
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 e0a11edc11..6de836be22 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
@@ -8,13 +8,12 @@ import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Field from '@/app/components/app/configuration/config-var/config-modal/field'
 import ConfigSelect from '@/app/components/app/configuration/config-var/config-select'
-import Button from '@/app/components/base/button'
-import AddButton from '@/app/components/base/button/add-button'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
 import Select from '@/app/components/base/select'
 import Switch from '@/app/components/base/switch'
 import Textarea from '@/app/components/base/textarea'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { ChangeType } from '@/app/components/workflow/types'
 import { checkKeys } from '@/utils/var'
@@ -120,7 +119,9 @@ const AddExtractParameter: FC<Props> = ({
   return (
     <div>
       {isAdd && (
-        <AddButton className="mx-1" onClick={showAddModal} />
+        <div className="mx-1 cursor-pointer rounded-md p-1 select-none hover:bg-state-base-hover" onClick={showAddModal} data-testid="add-button">
+          <span className="i-ri-add-line h-4 w-4 text-text-tertiary" />
+        </div>
       )}
       {isShowModal && (
         <Modal
@@ -167,7 +168,7 @@ const AddExtractParameter: FC<Props> = ({
               </Field>
               <Field title={t(`${i18nPrefix}.addExtractParameterContent.required`, { ns: 'workflow' })}>
                 <>
-                  <div className="mb-1.5 text-xs font-normal leading-[18px] text-text-tertiary">{t(`${i18nPrefix}.addExtractParameterContent.requiredContent`, { ns: 'workflow' })}</div>
+                  <div className="mb-1.5 text-xs leading-[18px] font-normal text-text-tertiary">{t(`${i18nPrefix}.addExtractParameterContent.requiredContent`, { ns: 'workflow' })}</div>
                   <Switch size="lg" value={param.required ?? false} onChange={handleParamChange('required')} />
                 </>
               </Field>
diff --git a/web/app/components/workflow/nodes/start/panel.tsx b/web/app/components/workflow/nodes/start/panel.tsx
index 13abd3b19d..5fc8f224fe 100644
--- a/web/app/components/workflow/nodes/start/panel.tsx
+++ b/web/app/components/workflow/nodes/start/panel.tsx
@@ -4,7 +4,6 @@ import type { InputVar, NodePanelProps } from '@/app/components/workflow/types'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import ConfigVarModal from '@/app/components/app/configuration/config-var/config-modal'
-import AddButton from '@/app/components/base/button/add-button'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
 import RemoveEffectVarConfirm from '../_base/components/remove-effect-var-confirm'
@@ -46,7 +45,13 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
         <Field
           title={t(`${i18nPrefix}.inputField`, { ns: 'workflow' })}
           operations={
-            !readOnly ? <AddButton onClick={showAddVarModal} /> : undefined
+            !readOnly
+              ? (
+                  <div className="cursor-pointer rounded-md p-1 select-none hover:bg-state-base-hover" onClick={showAddVarModal} data-testid="add-button">
+                    <span className="i-ri-add-line h-4 w-4 text-text-tertiary" />
+                  </div>
+                )
+              : undefined
           }
         >
           <>
diff --git a/web/app/components/workflow/nodes/template-transform/panel.tsx b/web/app/components/workflow/nodes/template-transform/panel.tsx
index 9c47b59cb0..08f96d8999 100644
--- a/web/app/components/workflow/nodes/template-transform/panel.tsx
+++ b/web/app/components/workflow/nodes/template-transform/panel.tsx
@@ -6,7 +6,6 @@ import {
 } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import AddButton from '@/app/components/base/button/add-button'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
@@ -42,7 +41,13 @@ const Panel: FC<NodePanelProps<TemplateTransformNodeType>> = ({
         <Field
           title={t(`${i18nPrefix}.inputVars`, { ns: 'workflow' })}
           operations={
-            !readOnly ? <AddButton onClick={handleAddEmptyVariable} /> : undefined
+            !readOnly
+              ? (
+                  <div className="cursor-pointer rounded-md p-1 select-none hover:bg-state-base-hover" onClick={handleAddEmptyVariable} data-testid="add-button">
+                    <span className="i-ri-add-line h-4 w-4 text-text-tertiary" />
+                  </div>
+                )
+              : undefined
           }
         >
           <VarList
diff --git a/web/app/components/workflow/nodes/tool/components/tool-form/item.tsx b/web/app/components/workflow/nodes/tool/components/tool-form/item.tsx
index 5011cf9486..7ccf137899 100644
--- a/web/app/components/workflow/nodes/tool/components/tool-form/item.tsx
+++ b/web/app/components/workflow/nodes/tool/components/tool-form/item.tsx
@@ -8,8 +8,8 @@ import {
   RiBracesLine,
 } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
-import Button from '@/app/components/base/button'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { SchemaModal } from '@/app/components/plugins/plugin-detail-panel/tool-selector/components'
@@ -97,7 +97,7 @@ const ToolFormItem: FC<Props> = ({
         <div className="flex h-6 items-center">
           <div className="system-sm-medium text-text-secondary">{label[language] || label.en_US}</div>
           {required && (
-            <div className="system-xs-regular ml-1 text-text-destructive-secondary">*</div>
+            <div className="ml-1 system-xs-regular text-text-destructive-secondary">*</div>
           )}
           {!showDescription && tooltip && (
             <Tooltip
@@ -112,12 +112,12 @@ const ToolFormItem: FC<Props> = ({
           )}
           {showSchemaButton && (
             <>
-              <div className="system-xs-regular ml-1 mr-0.5 text-text-quaternary">·</div>
+              <div className="mr-0.5 ml-1 system-xs-regular text-text-quaternary">·</div>
               <Button
                 variant="ghost"
                 size="small"
                 onClick={showSchema}
-                className="system-xs-regular px-1 text-text-tertiary"
+                className="px-1 system-xs-regular text-text-tertiary"
               >
                 <RiBracesLine className="mr-1 size-3.5" />
                 <span>JSON Schema</span>
@@ -126,7 +126,7 @@ const ToolFormItem: FC<Props> = ({
           )}
         </div>
         {showDescription && tooltip && (
-          <div className="body-xs-regular break-words pb-0.5 text-text-tertiary">
+          <div className="pb-0.5 body-xs-regular break-words text-text-tertiary">
             {renderDescriptionWithLinks(tooltip[language] || tooltip.en_US)}
           </div>
         )}
diff --git a/web/app/components/workflow/nodes/trigger-plugin/components/trigger-form/item.tsx b/web/app/components/workflow/nodes/trigger-plugin/components/trigger-form/item.tsx
index a862fdc1f4..68810fb068 100644
--- a/web/app/components/workflow/nodes/trigger-plugin/components/trigger-form/item.tsx
+++ b/web/app/components/workflow/nodes/trigger-plugin/components/trigger-form/item.tsx
@@ -8,8 +8,8 @@ import {
   RiBracesLine,
 } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
-import Button from '@/app/components/base/button'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { SchemaModal } from '@/app/components/plugins/plugin-detail-panel/tool-selector/components'
@@ -54,7 +54,7 @@ const TriggerFormItem: FC<Props> = ({
         <div className="flex h-6 items-center">
           <div className="system-sm-medium text-text-secondary">{label[language] || label.en_US}</div>
           {required && (
-            <div className="system-xs-regular ml-1 text-text-destructive-secondary">*</div>
+            <div className="ml-1 system-xs-regular text-text-destructive-secondary">*</div>
           )}
           {!showDescription && tooltip && (
             <Tooltip
@@ -69,12 +69,12 @@ const TriggerFormItem: FC<Props> = ({
           )}
           {showSchemaButton && (
             <>
-              <div className="system-xs-regular ml-1 mr-0.5 text-text-quaternary">·</div>
+              <div className="mr-0.5 ml-1 system-xs-regular text-text-quaternary">·</div>
               <Button
                 variant="ghost"
                 size="small"
                 onClick={showSchema}
-                className="system-xs-regular px-1 text-text-tertiary"
+                className="px-1 system-xs-regular text-text-tertiary"
               >
                 <RiBracesLine className="mr-1 size-3.5" />
                 <span>JSON Schema</span>
@@ -83,7 +83,7 @@ const TriggerFormItem: FC<Props> = ({
           )}
         </div>
         {showDescription && tooltip && (
-          <div className="body-xs-regular pb-0.5 text-text-tertiary">{tooltip[language] || tooltip.en_US}</div>
+          <div className="pb-0.5 body-xs-regular text-text-tertiary">{tooltip[language] || tooltip.en_US}</div>
         )}
       </div>
       <FormInputItem
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 dde5b5a382..38ef5fb901 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
@@ -18,7 +18,7 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import { useStore } from '../../store'
 import { useLink } from './hooks'
@@ -71,7 +71,7 @@ const LinkEditorComponent = ({
               className={cn(
                 'nodrag nopan z-10 inline-flex w-max items-center rounded-md border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg',
                 !linkOperatorShow && 'p-1 shadow-md',
-                linkOperatorShow && 'system-xs-medium p-0.5 text-text-tertiary shadow-sm',
+                linkOperatorShow && 'p-0.5 system-xs-medium text-text-tertiary shadow-sm',
               )}
               style={floatingStyles}
               ref={refs.setFloating}
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/array-bool-list.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/array-bool-list.tsx
index b056533d2d..a44bd014f8 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/array-bool-list.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/array-bool-list.tsx
@@ -5,7 +5,7 @@ import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import RemoveButton from '@/app/components/workflow/nodes/_base/components/remove-button'
 import { cn } from '@/utils/classnames'
 import BoolValue from './bool-value'
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/array-value-list.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/array-value-list.tsx
index 6188013694..8dc21edd09 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/array-value-list.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/array-value-list.tsx
@@ -5,8 +5,8 @@ import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import RemoveButton from '@/app/components/workflow/nodes/_base/components/remove-button'
 
 type Props = {
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal-trigger.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal-trigger.tsx
index b82eaa66ac..0e1449e5a8 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal-trigger.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal-trigger.tsx
@@ -3,12 +3,12 @@ import type { ConversationVariable } from '@/app/components/workflow/types'
 import { RiAddLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import VariableModal from '@/app/components/workflow/panel/chat-variable-panel/components/variable-modal'
 
 type Props = {
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.sections.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.sections.tsx
index 41a90ce8ce..2a5c71d4b9 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.sections.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.sections.tsx
@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react'
 import type { ObjectValueItem } from './variable-modal.helpers'
 import { RiDraftLine, RiInputField } from '@remixicon/react'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import { ChatVarType } from '../type'
@@ -17,7 +17,7 @@ type SectionTitleProps = {
 }
 
 const SectionTitle = ({ children }: SectionTitleProps) => (
-  <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-semibold">{children}</div>
+  <div className="mb-1 flex h-6 items-center system-sm-semibold text-text-secondary">{children}</div>
 )
 
 type NameSectionProps = {
@@ -111,7 +111,7 @@ export const ValueSection = ({
   value,
 }: ValueSectionProps) => (
   <div className="mb-4">
-    <div className="mb-1 flex h-6 items-center justify-between text-text-secondary system-sm-semibold">
+    <div className="mb-1 flex h-6 items-center justify-between system-sm-semibold text-text-secondary">
       <div>{t('chatVariable.modal.value', { ns: 'workflow' })}</div>
       {toggleLabelKey && (
         <Button
@@ -128,7 +128,7 @@ export const ValueSection = ({
     <div className="flex">
       {type === ChatVarType.String && (
         <textarea
-          className="block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 text-components-input-text-filled caret-primary-600 outline-hidden system-sm-regular placeholder:text-components-input-text-placeholder placeholder:system-sm-regular hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs"
+          className="block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 system-sm-regular text-components-input-text-filled caret-primary-600 outline-hidden placeholder:system-sm-regular placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs"
           value={(value as string) || ''}
           placeholder={t('chatVariable.modal.valuePlaceholder', { ns: 'workflow' }) || ''}
           onChange={e => onArrayChange([e.target.value])}
@@ -178,7 +178,7 @@ export const ValueSection = ({
         />
       )}
       {editInJSON && (
-        <div className="w-full radius-lg bg-components-input-bg-normal py-2 pl-3 pr-1" style={{ height: editorMinHeight }}>
+        <div className="w-full radius-lg bg-components-input-bg-normal py-2 pr-1 pl-3" style={{ height: editorMinHeight }}>
           <CodeEditor
             isExpand
             noWrapper
@@ -210,7 +210,7 @@ export const DescriptionSection = ({
     <SectionTitle>{title}</SectionTitle>
     <div className="flex">
       <textarea
-        className="block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 text-components-input-text-filled caret-primary-600 outline-hidden system-sm-regular placeholder:text-components-input-text-placeholder placeholder:system-sm-regular hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs"
+        className="block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 system-sm-regular text-components-input-text-filled caret-primary-600 outline-hidden placeholder:system-sm-regular placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs"
         value={description}
         placeholder={placeholder}
         onChange={e => onChange(e.target.value)}
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx
index 4fe1a707cb..4742eb0f36 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx
@@ -3,7 +3,7 @@ import type { ConversationVariable } from '@/app/components/workflow/types'
 import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { ChatVarType } from '@/app/components/workflow/panel/chat-variable-panel/type'
 import { useWorkflowStore } from '@/app/components/workflow/store'
@@ -76,7 +76,7 @@ const ChatVariableModal = ({
     <div
       className={cn('flex h-full w-[360px] flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl', type === ChatVarType.Object && 'w-[480px]')}
     >
-      <div className="mb-3 flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary system-xl-semibold">
+      <div className="mb-3 flex shrink-0 items-center justify-between p-4 pb-0 system-xl-semibold text-text-primary">
         {!chatVar ? t('chatVariable.modal.title', { ns: 'workflow' }) : t('chatVariable.modal.editTitle', { ns: 'workflow' })}
         <div className="flex items-center">
           <div
diff --git a/web/app/components/workflow/panel/env-panel/variable-modal.tsx b/web/app/components/workflow/panel/env-panel/variable-modal.tsx
index 523ea5a870..cd8b3b5103 100644
--- a/web/app/components/workflow/panel/env-panel/variable-modal.tsx
+++ b/web/app/components/workflow/panel/env-panel/variable-modal.tsx
@@ -4,9 +4,9 @@ import * as React from 'react'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { v4 as uuid4 } from 'uuid'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useWorkflowStore } from '@/app/components/workflow/store'
 import { cn } from '@/utils/classnames'
@@ -83,7 +83,7 @@ const VariableModal = ({
     <div
       className={cn('flex h-full w-[360px] flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl')}
     >
-      <div className="mb-3 flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary system-xl-semibold">
+      <div className="mb-3 flex shrink-0 items-center justify-between p-4 pb-0 system-xl-semibold text-text-primary">
         {!env ? t('env.modal.title', { ns: 'workflow' }) : t('env.modal.editTitle', { ns: 'workflow' })}
         <div className="flex items-center">
           <div
@@ -97,12 +97,12 @@ const VariableModal = ({
       <div className="px-4 py-2">
         {/* type */}
         <div className="mb-4">
-          <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-semibold">{t('env.modal.type', { ns: 'workflow' })}</div>
+          <div className="mb-1 flex h-6 items-center system-sm-semibold text-text-secondary">{t('env.modal.type', { ns: 'workflow' })}</div>
           <div className="flex gap-2">
             <div
               className={cn(
-                'flex w-[106px] cursor-pointer items-center justify-center border border-components-option-card-option-border bg-components-option-card-option-bg p-2 text-text-secondary system-sm-regular radius-md hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
-                type === 'string' && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg text-text-primary shadow-xs system-sm-medium hover:border-components-option-card-option-selected-border',
+                'flex w-[106px] cursor-pointer items-center justify-center radius-md border border-components-option-card-option-border bg-components-option-card-option-bg p-2 system-sm-regular text-text-secondary hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
+                type === 'string' && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg system-sm-medium text-text-primary shadow-xs hover:border-components-option-card-option-selected-border',
               )}
               onClick={() => setType('string')}
             >
@@ -110,7 +110,7 @@ const VariableModal = ({
             </div>
             <div
               className={cn(
-                'flex w-[106px] cursor-pointer items-center justify-center border border-components-option-card-option-border bg-components-option-card-option-bg p-2 text-text-secondary system-sm-regular radius-md hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
+                'flex w-[106px] cursor-pointer items-center justify-center radius-md border border-components-option-card-option-border bg-components-option-card-option-bg p-2 system-sm-regular text-text-secondary hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
                 type === 'number' && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg font-medium text-text-primary shadow-xs hover:border-components-option-card-option-selected-border',
               )}
               onClick={() => {
@@ -123,7 +123,7 @@ const VariableModal = ({
             </div>
             <div
               className={cn(
-                'flex w-[106px] cursor-pointer items-center justify-center border border-components-option-card-option-border bg-components-option-card-option-bg p-2 text-text-secondary system-sm-regular radius-md hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
+                'flex w-[106px] cursor-pointer items-center justify-center radius-md border border-components-option-card-option-border bg-components-option-card-option-bg p-2 system-sm-regular text-text-secondary hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
                 type === 'secret' && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg font-medium text-text-primary shadow-xs hover:border-components-option-card-option-selected-border',
               )}
               onClick={() => setType('secret')}
@@ -142,7 +142,7 @@ const VariableModal = ({
         </div>
         {/* name */}
         <div className="mb-4">
-          <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-semibold">{t('env.modal.name', { ns: 'workflow' })}</div>
+          <div className="mb-1 flex h-6 items-center system-sm-semibold text-text-secondary">{t('env.modal.name', { ns: 'workflow' })}</div>
           <div className="flex">
             <Input
               placeholder={t('env.modal.namePlaceholder', { ns: 'workflow' }) || ''}
@@ -155,13 +155,13 @@ const VariableModal = ({
         </div>
         {/* value */}
         <div className="mb-4">
-          <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-semibold">{t('env.modal.value', { ns: 'workflow' })}</div>
+          <div className="mb-1 flex h-6 items-center system-sm-semibold text-text-secondary">{t('env.modal.value', { ns: 'workflow' })}</div>
           <div className="flex">
             {
               type !== 'number'
                 ? (
                     <textarea
-                      className="block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 text-components-input-text-filled caret-primary-600 outline-hidden system-sm-regular placeholder:text-components-input-text-placeholder placeholder:system-sm-regular hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs"
+                      className="block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 system-sm-regular text-components-input-text-filled caret-primary-600 outline-hidden placeholder:system-sm-regular placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs"
                       value={value}
                       placeholder={t('env.modal.valuePlaceholder', { ns: 'workflow' }) || ''}
                       onChange={e => setValue(e.target.value)}
@@ -180,10 +180,10 @@ const VariableModal = ({
         </div>
         {/* description */}
         <div className="">
-          <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-semibold">{t('env.modal.description', { ns: 'workflow' })}</div>
+          <div className="mb-1 flex h-6 items-center system-sm-semibold text-text-secondary">{t('env.modal.description', { ns: 'workflow' })}</div>
           <div className="flex">
             <textarea
-              className="block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 text-components-input-text-filled caret-primary-600 outline-hidden system-sm-regular placeholder:text-components-input-text-placeholder placeholder:system-sm-regular hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs"
+              className="block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 system-sm-regular text-components-input-text-filled caret-primary-600 outline-hidden placeholder:system-sm-regular placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs"
               value={description}
               placeholder={t('env.modal.descriptionPlaceholder', { ns: 'workflow' }) || ''}
               onChange={e => setDescription(e.target.value)}
diff --git a/web/app/components/workflow/panel/env-panel/variable-trigger.tsx b/web/app/components/workflow/panel/env-panel/variable-trigger.tsx
index 2e0f291591..657d5bf043 100644
--- a/web/app/components/workflow/panel/env-panel/variable-trigger.tsx
+++ b/web/app/components/workflow/panel/env-panel/variable-trigger.tsx
@@ -3,12 +3,12 @@ import type { EnvironmentVariable } from '@/app/components/workflow/types'
 import { RiAddLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import VariableModal from '@/app/components/workflow/panel/env-panel/variable-modal'
 
 type Props = {
diff --git a/web/app/components/workflow/panel/inputs-panel.tsx b/web/app/components/workflow/panel/inputs-panel.tsx
index 6f7ab13471..2eb597b5df 100644
--- a/web/app/components/workflow/panel/inputs-panel.tsx
+++ b/web/app/components/workflow/panel/inputs-panel.tsx
@@ -6,11 +6,11 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useNodes } from 'reactflow'
-import Button from '@/app/components/base/button'
 import { useCheckInputsForms } from '@/app/components/base/chat/chat/check-input-forms-hooks'
 import {
   getProcessedInputs,
 } from '@/app/components/base/chat/chat/utils'
+import { Button } from '@/app/components/base/ui/button'
 import { TransferMethod } from '../../base/text-generation/types'
 import { useWorkflowRun } from '../hooks'
 import { useHooksStore } from '../hooks-store'
@@ -105,7 +105,7 @@ const InputsPanel = ({ onRun }: Props) => {
 
   return (
     <>
-      <div className="px-4 pb-2 pt-3">
+      <div className="px-4 pt-3 pb-2">
         {
           variables.map((variable, index) => (
             <div
diff --git a/web/app/components/workflow/panel/version-history-panel/context-menu/index.tsx b/web/app/components/workflow/panel/version-history-panel/context-menu/index.tsx
index 225f4b08f8..a635e80bab 100644
--- a/web/app/components/workflow/panel/version-history-panel/context-menu/index.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/context-menu/index.tsx
@@ -2,13 +2,13 @@ import type { FC } from 'react'
 import { RiMoreFill } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback } from 'react'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { VersionHistoryContextMenuOptions } from '../../../types'
 import MenuItem from './menu-item'
 import useContextMenu from './use-context-menu'
diff --git a/web/app/components/workflow/panel/version-history-panel/delete-confirm-modal.tsx b/web/app/components/workflow/panel/version-history-panel/delete-confirm-modal.tsx
index ad30db9e1c..daf485c5a5 100644
--- a/web/app/components/workflow/panel/version-history-panel/delete-confirm-modal.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/delete-confirm-modal.tsx
@@ -2,8 +2,8 @@ import type { FC } from 'react'
 import type { VersionHistory } from '@/types/workflow'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 
 type DeleteConfirmModalProps = {
   isOpen: boolean
@@ -22,7 +22,7 @@ const DeleteConfirmModal: FC<DeleteConfirmModalProps> = ({
 
   return (
     <Modal className="p-0" isShow={isOpen} onClose={onClose}>
-      <div className="flex flex-col gap-y-2 p-6 pb-4 ">
+      <div className="flex flex-col gap-y-2 p-6 pb-4">
         <div className="title-2xl-semi-bold text-text-primary">
           {`${t('operation.delete', { ns: 'common' })} ${versionInfo.marked_name || t('versionHistory.defaultName', { ns: 'workflow' })}`}
         </div>
@@ -34,7 +34,7 @@ const DeleteConfirmModal: FC<DeleteConfirmModalProps> = ({
         <Button onClick={onClose}>
           {t('operation.cancel', { ns: 'common' })}
         </Button>
-        <Button variant="warning" onClick={onDelete.bind(null, versionInfo.id)}>
+        <Button variant="primary" destructive onClick={onDelete.bind(null, versionInfo.id)}>
           {t('operation.delete', { ns: 'common' })}
         </Button>
       </div>
diff --git a/web/app/components/workflow/panel/version-history-panel/empty.tsx b/web/app/components/workflow/panel/version-history-panel/empty.tsx
index 698d2b3dac..2c8f6655e1 100644
--- a/web/app/components/workflow/panel/version-history-panel/empty.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/empty.tsx
@@ -2,7 +2,7 @@ import type { FC } from 'react'
 import { RiHistoryLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 
 type EmptyProps = {
   onResetFilter: () => void
@@ -18,7 +18,7 @@ const Empty: FC<EmptyProps> = ({
       <div className="flex justify-center">
         <RiHistoryLine className="h-10 w-10 text-text-empty-state-icon" />
       </div>
-      <div className="system-xs-regular flex justify-center text-text-tertiary">
+      <div className="flex justify-center system-xs-regular text-text-tertiary">
         {t('versionHistory.filter.empty', { ns: 'workflow' })}
       </div>
       <div className="flex justify-center">
diff --git a/web/app/components/workflow/panel/version-history-panel/restore-confirm-modal.tsx b/web/app/components/workflow/panel/version-history-panel/restore-confirm-modal.tsx
index 0a2d5ec560..695e6fe35c 100644
--- a/web/app/components/workflow/panel/version-history-panel/restore-confirm-modal.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/restore-confirm-modal.tsx
@@ -2,8 +2,8 @@ import type { FC } from 'react'
 import type { VersionHistory } from '@/types/workflow'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 
 type RestoreConfirmModalProps = {
   isOpen: boolean
@@ -22,7 +22,7 @@ const RestoreConfirmModal: FC<RestoreConfirmModalProps> = ({
 
   return (
     <Modal className="p-0" isShow={isOpen} onClose={onClose}>
-      <div className="flex flex-col gap-y-2 p-6 pb-4 ">
+      <div className="flex flex-col gap-y-2 p-6 pb-4">
         <div className="title-2xl-semi-bold text-text-primary">
           {`${t('common.restore', { ns: 'workflow' })} ${versionInfo.marked_name || t('versionHistory.defaultName', { ns: 'workflow' })}`}
         </div>
diff --git a/web/app/components/workflow/panel/workflow-preview.tsx b/web/app/components/workflow/panel/workflow-preview.tsx
index e1e442c0cb..e144e04b3e 100644
--- a/web/app/components/workflow/panel/workflow-preview.tsx
+++ b/web/app/components/workflow/panel/workflow-preview.tsx
@@ -6,8 +6,8 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { submitHumanInputForm } from '@/service/workflow'
 import { cn } from '@/utils/classnames'
@@ -111,7 +111,7 @@ const WorkflowPreview = () => {
       style={{ width: `${panelWidth}px` }}
     >
       <div
-        className="absolute bottom-0 left-[3px] top-1/2 z-50 h-6 w-[3px] cursor-col-resize rounded-sm bg-gray-300"
+        className="absolute top-1/2 bottom-0 left-[3px] z-50 h-6 w-[3px] cursor-col-resize rounded-sm bg-gray-300"
         onMouseDown={startResizing}
       />
       <div className="flex items-center justify-between p-4 pb-1 text-base font-semibold text-text-primary">
@@ -125,7 +125,7 @@ const WorkflowPreview = () => {
           {showInputsPanel && (
             <div
               className={cn(
-                'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary',
+                'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] leading-[18px] font-semibold text-text-tertiary',
                 currentTab === 'INPUT' && 'border-[rgb(21,94,239)]! text-text-secondary',
               )}
               onClick={() => switchTab('INPUT')}
@@ -135,7 +135,7 @@ const WorkflowPreview = () => {
           )}
           <div
             className={cn(
-              'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary',
+              'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] leading-[18px] font-semibold text-text-tertiary',
               currentTab === 'RESULT' && 'border-[rgb(21,94,239)]! text-text-secondary',
               !workflowRunningData && 'cursor-not-allowed! opacity-30',
             )}
@@ -149,7 +149,7 @@ const WorkflowPreview = () => {
           </div>
           <div
             className={cn(
-              'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary',
+              'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] leading-[18px] font-semibold text-text-tertiary',
               currentTab === 'DETAIL' && 'border-[rgb(21,94,239)]! text-text-secondary',
               !workflowRunningData && 'cursor-not-allowed! opacity-30',
             )}
@@ -163,7 +163,7 @@ const WorkflowPreview = () => {
           </div>
           <div
             className={cn(
-              'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary',
+              'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] leading-[18px] font-semibold text-text-tertiary',
               currentTab === 'TRACING' && 'border-[rgb(21,94,239)]! text-text-secondary',
               !workflowRunningData && 'cursor-not-allowed! opacity-30',
             )}
diff --git a/web/app/components/workflow/run/agent-log/agent-log-item.tsx b/web/app/components/workflow/run/agent-log/agent-log-item.tsx
index 27e1e00fbb..7c572c59aa 100644
--- a/web/app/components/workflow/run/agent-log/agent-log-item.tsx
+++ b/web/app/components/workflow/run/agent-log/agent-log-item.tsx
@@ -7,7 +7,7 @@ import {
   useMemo,
   useState,
 } from 'react'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
@@ -57,7 +57,7 @@ const AgentLogItem = ({
     <div className="radius-lg border-[0.5px] border-components-panel-border bg-background-default">
       <div
         className={cn(
-          'flex cursor-pointer items-center pb-2 pl-1.5 pr-3 pt-2',
+          'flex cursor-pointer items-center pt-2 pr-3 pb-2 pl-1.5',
           expanded && 'pb-1',
         )}
         onClick={() => setExpanded(!expanded)}
@@ -73,14 +73,14 @@ const AgentLogItem = ({
           toolIcon={toolIcon}
         />
         <div
-          className="system-sm-semibold-uppercase grow truncate text-text-secondary"
+          className="grow truncate system-sm-semibold-uppercase text-text-secondary"
           title={label}
         >
           {label}
         </div>
         {
           !!metadata?.elapsed_time && (
-            <div className="system-xs-regular mr-2 shrink-0 text-text-tertiary">
+            <div className="mr-2 shrink-0 system-xs-regular text-text-tertiary">
               {metadata?.elapsed_time?.toFixed(3)}
               s
             </div>
diff --git a/web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx b/web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx
index bf2fb32c2b..8bdb6ad227 100644
--- a/web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx
+++ b/web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx
@@ -1,12 +1,12 @@
 import type { AgentLogItemWithChildren } from '@/types/workflow'
 import { RiMoreLine } from '@remixicon/react'
 import { useState } from 'react'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 
 type AgentLogNavMoreProps = {
   options: AgentLogItemWithChildren[]
@@ -42,7 +42,7 @@ const AgentLogNavMore = ({
             options.map(option => (
               <div
                 key={option.message_id}
-                className="system-md-regular flex h-8 cursor-pointer items-center rounded-lg px-2 text-text-secondary hover:bg-state-base-hover"
+                className="flex h-8 cursor-pointer items-center rounded-lg px-2 system-md-regular text-text-secondary hover:bg-state-base-hover"
                 onClick={() => {
                   onShowAgentOrToolLog(option)
                   setOpen(false)
diff --git a/web/app/components/workflow/run/agent-log/agent-log-nav.tsx b/web/app/components/workflow/run/agent-log/agent-log-nav.tsx
index 11061bf625..2548256cb1 100644
--- a/web/app/components/workflow/run/agent-log/agent-log-nav.tsx
+++ b/web/app/components/workflow/run/agent-log/agent-log-nav.tsx
@@ -1,7 +1,7 @@
 import type { AgentLogItemWithChildren } from '@/types/workflow'
 import { RiArrowLeftLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import AgentLogNavMore from './agent-log-nav-more'
 
 type AgentLogNavProps = {
@@ -31,7 +31,7 @@ const AgentLogNav = ({
         <RiArrowLeftLine className="mr-1 h-3.5 w-3.5" />
         AGENT
       </Button>
-      <div className="system-xs-regular mx-0.5 shrink-0 text-divider-deep">/</div>
+      <div className="mx-0.5 shrink-0 system-xs-regular text-divider-deep">/</div>
       {
         agentOrToolLogItemStackLength > 1
           ? (
@@ -45,7 +45,7 @@ const AgentLogNav = ({
               </Button>
             )
           : (
-              <div className="system-xs-medium-uppercase flex items-center px-[5px] text-text-tertiary">
+              <div className="flex items-center px-[5px] system-xs-medium-uppercase text-text-tertiary">
                 {t('nodes.agent.strategy.label', { ns: 'workflow' })}
               </div>
             )
@@ -53,7 +53,7 @@ const AgentLogNav = ({
       {
         !!mid.length && (
           <>
-            <div className="system-xs-regular mx-0.5 shrink-0 text-divider-deep">/</div>
+            <div className="mx-0.5 shrink-0 system-xs-regular text-divider-deep">/</div>
             <AgentLogNavMore
               options={mid}
               onShowAgentOrToolLog={onShowAgentOrToolLog}
@@ -64,8 +64,8 @@ const AgentLogNav = ({
       {
         !!end && agentOrToolLogItemStackLength > 1 && (
           <>
-            <div className="system-xs-regular mx-0.5 shrink-0 text-divider-deep">/</div>
-            <div className="system-xs-medium-uppercase flex items-center px-[5px] text-text-tertiary">
+            <div className="mx-0.5 shrink-0 system-xs-regular text-divider-deep">/</div>
+            <div className="flex items-center px-[5px] system-xs-medium-uppercase text-text-tertiary">
               {end.label}
             </div>
           </>
diff --git a/web/app/components/workflow/run/iteration-log/iteration-log-trigger.tsx b/web/app/components/workflow/run/iteration-log/iteration-log-trigger.tsx
index 52ebb29ff5..77b9425501 100644
--- a/web/app/components/workflow/run/iteration-log/iteration-log-trigger.tsx
+++ b/web/app/components/workflow/run/iteration-log/iteration-log-trigger.tsx
@@ -4,8 +4,8 @@ import type {
 } from '@/types/workflow'
 import { RiArrowRightSLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { Iteration } from '@/app/components/base/icons/src/vender/workflow'
+import { Button } from '@/app/components/base/ui/button'
 import { NodeRunningStatus } from '@/app/components/workflow/types'
 
 type IterationLogTriggerProps = {
@@ -145,7 +145,7 @@ const IterationLogTrigger = ({
     >
       {/* eslint-disable-next-line hyoban/prefer-tailwind-icons */}
       <Iteration className="h-4 w-4 shrink-0 text-components-button-tertiary-text" />
-      <div className="system-sm-medium flex-1 text-left text-components-button-tertiary-text">
+      <div className="flex-1 text-left system-sm-medium text-components-button-tertiary-text">
         {t('nodes.iteration.iteration', { ns: 'workflow', count: displayIterationCount })}
         {errorCount > 0 && (
           <>
diff --git a/web/app/components/workflow/run/loop-log/loop-log-trigger.tsx b/web/app/components/workflow/run/loop-log/loop-log-trigger.tsx
index aeb4b7e211..42593e564f 100644
--- a/web/app/components/workflow/run/loop-log/loop-log-trigger.tsx
+++ b/web/app/components/workflow/run/loop-log/loop-log-trigger.tsx
@@ -5,8 +5,8 @@ import type {
 } from '@/types/workflow'
 import { RiArrowRightSLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { Loop } from '@/app/components/base/icons/src/vender/workflow'
+import { Button } from '@/app/components/base/ui/button'
 
 type LoopLogTriggerProps = {
   nodeInfo: NodeTracing
@@ -95,7 +95,7 @@ const LoopLogTrigger = ({
       onClick={handleOnShowLoopDetail}
     >
       <Loop className="h-4 w-4 shrink-0 text-components-button-tertiary-text" />
-      <div className="system-sm-medium flex-1 text-left text-components-button-tertiary-text">
+      <div className="flex-1 text-left system-sm-medium text-components-button-tertiary-text">
         {t('nodes.loop.loop', { ns: 'workflow', count: displayLoopCount })}
         {errorCount > 0 && (
           <>
diff --git a/web/app/components/workflow/run/retry-log/retry-log-trigger.tsx b/web/app/components/workflow/run/retry-log/retry-log-trigger.tsx
index 6e9e0865e8..592b7775f1 100644
--- a/web/app/components/workflow/run/retry-log/retry-log-trigger.tsx
+++ b/web/app/components/workflow/run/retry-log/retry-log-trigger.tsx
@@ -4,7 +4,7 @@ import {
   RiRestartFill,
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 
 type RetryLogTriggerProps = {
   nodeInfo: NodeTracing
diff --git a/web/app/components/workflow/update-dsl-modal.tsx b/web/app/components/workflow/update-dsl-modal.tsx
index 2240b87ee5..38607b97d5 100644
--- a/web/app/components/workflow/update-dsl-modal.tsx
+++ b/web/app/components/workflow/update-dsl-modal.tsx
@@ -15,8 +15,8 @@ import {
 import { useTranslation } from 'react-i18next'
 import Uploader from '@/app/components/app/create-from-dsl-modal/uploader'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
@@ -203,19 +203,19 @@ const UpdateDSLModal = ({
         onClose={onCancel}
       >
         <div className="mb-3 flex items-center justify-between">
-          <div className="text-text-primary title-2xl-semi-bold">{t('common.importDSL', { ns: 'workflow' })}</div>
+          <div className="title-2xl-semi-bold text-text-primary">{t('common.importDSL', { ns: 'workflow' })}</div>
           <div className="flex h-[22px] w-[22px] cursor-pointer items-center justify-center" onClick={onCancel}>
             <RiCloseLine className="h-[18px] w-[18px] text-text-tertiary" />
           </div>
         </div>
         <div className="relative mb-2 flex grow gap-0.5 overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-2 shadow-xs">
-          <div className="absolute left-0 top-0 h-full w-full bg-toast-warning-bg opacity-40" />
+          <div className="absolute top-0 left-0 h-full w-full bg-toast-warning-bg opacity-40" />
           <div className="flex items-start justify-center p-1">
             <RiAlertFill className="h-4 w-4 shrink-0 text-text-warning-secondary" />
           </div>
           <div className="flex grow flex-col items-start gap-0.5 py-1">
-            <div className="whitespace-pre-line text-text-primary system-xs-medium">{t('common.importDSLTip', { ns: 'workflow' })}</div>
-            <div className="flex items-start gap-1 self-stretch pb-0.5 pt-1">
+            <div className="system-xs-medium whitespace-pre-line text-text-primary">{t('common.importDSLTip', { ns: 'workflow' })}</div>
+            <div className="flex items-start gap-1 self-stretch pt-1 pb-0.5">
               <Button
                 size="small"
                 variant="secondary"
@@ -231,7 +231,7 @@ const UpdateDSLModal = ({
           </div>
         </div>
         <div>
-          <div className="pt-2 text-text-primary system-md-semibold">
+          <div className="pt-2 system-md-semibold text-text-primary">
             {t('common.chooseDSL', { ns: 'workflow' })}
           </div>
           <div className="flex w-full flex-col items-start justify-center gap-4 self-stretch py-4">
@@ -246,7 +246,8 @@ const UpdateDSLModal = ({
           <Button onClick={onCancel}>{t('newApp.Cancel', { ns: 'app' })}</Button>
           <Button
             disabled={!currentFile || loading}
-            variant="warning"
+            variant="primary"
+            destructive
             onClick={handleImport}
             loading={loading}
           >
@@ -260,8 +261,8 @@ const UpdateDSLModal = ({
         className="w-[480px]"
       >
         <div className="flex flex-col items-start gap-2 self-stretch pb-4">
-          <div className="text-text-primary title-2xl-semi-bold">{t('newApp.appCreateDSLErrorTitle', { ns: 'app' })}</div>
-          <div className="flex grow flex-col text-text-secondary system-md-regular">
+          <div className="title-2xl-semi-bold text-text-primary">{t('newApp.appCreateDSLErrorTitle', { ns: 'app' })}</div>
+          <div className="flex grow flex-col system-md-regular text-text-secondary">
             <div>{t('newApp.appCreateDSLErrorPart1', { ns: 'app' })}</div>
             <div>{t('newApp.appCreateDSLErrorPart2', { ns: 'app' })}</div>
             <br />
diff --git a/web/app/components/workflow/variable-inspect/group.tsx b/web/app/components/workflow/variable-inspect/group.tsx
index 66c64790be..5941ddae59 100644
--- a/web/app/components/workflow/variable-inspect/group.tsx
+++ b/web/app/components/workflow/variable-inspect/group.tsx
@@ -9,7 +9,7 @@ import {
 } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-// import Button from '@/app/components/base/button'
+// import { Button } from '@/app/components/base/ui/button'
 import ActionButton from '@/app/components/base/action-button'
 import Tooltip from '@/app/components/base/tooltip'
 import BlockIcon from '@/app/components/workflow/block-icon'
@@ -117,11 +117,11 @@ const Group = ({
                 toolIcon={toolIcon || ''}
                 size="xs"
               />
-              <div className="system-xs-medium-uppercase truncate text-text-tertiary">{nodeData.title}</div>
+              <div className="truncate system-xs-medium-uppercase text-text-tertiary">{nodeData.title}</div>
             </>
           )}
           {!nodeData && (
-            <div className="system-xs-medium-uppercase truncate text-text-tertiary">
+            <div className="truncate system-xs-medium-uppercase text-text-tertiary">
               {isEnv && t('debug.variableInspect.envNode', { ns: 'workflow' })}
               {isChatVar && t('debug.variableInspect.chatNode', { ns: 'workflow' })}
               {isSystem && t('debug.variableInspect.systemNode', { ns: 'workflow' })}
@@ -160,8 +160,8 @@ const Group = ({
                 isExceptionVariable={['error_type', 'error_message'].includes(varItem.name)}
                 className="size-4"
               />
-              <div className="system-sm-medium grow truncate text-text-secondary">{varItem.name}</div>
-              <div className="system-xs-regular shrink-0 text-text-tertiary">{varItem.value_type}</div>
+              <div className="grow truncate system-sm-medium text-text-secondary">{varItem.name}</div>
+              <div className="shrink-0 system-xs-regular text-text-tertiary">{varItem.value_type}</div>
             </div>
           ))}
         </div>
diff --git a/web/app/components/workflow/variable-inspect/left.tsx b/web/app/components/workflow/variable-inspect/left.tsx
index e6638cb0f9..b59096f338 100644
--- a/web/app/components/workflow/variable-inspect/left.tsx
+++ b/web/app/components/workflow/variable-inspect/left.tsx
@@ -3,7 +3,7 @@ import type { currentVarType } from './panel'
 import type { VarInInspect } from '@/types/workflow'
 // import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { VarInInspectType } from '@/types/workflow'
 import { cn } from '@/utils/classnames'
 import useCurrentVars from '../hooks/use-inspect-vars-crud'
@@ -51,8 +51,8 @@ const Left = ({
   return (
     <div className={cn('flex h-full flex-col')}>
       {/* header */}
-      <div className="flex shrink-0 items-center justify-between gap-1 pl-4 pr-1 pt-2">
-        <div className="system-sm-semibold-uppercase truncate text-text-primary">{t('debug.variableInspect.title', { ns: 'workflow' })}</div>
+      <div className="flex shrink-0 items-center justify-between gap-1 pt-2 pr-1 pl-4">
+        <div className="truncate system-sm-semibold-uppercase text-text-primary">{t('debug.variableInspect.title', { ns: 'workflow' })}</div>
         <Button variant="ghost" size="small" className="shrink-0" onClick={handleClearAll}>{t('debug.variableInspect.clearAll', { ns: 'workflow' })}</Button>
       </div>
       {/* content */}
diff --git a/web/app/components/workflow/variable-inspect/listening.tsx b/web/app/components/workflow/variable-inspect/listening.tsx
index b183976ea4..4cdc0f348d 100644
--- a/web/app/components/workflow/variable-inspect/listening.tsx
+++ b/web/app/components/workflow/variable-inspect/listening.tsx
@@ -7,9 +7,9 @@ import copy from 'copy-to-clipboard'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStoreApi } from 'reactflow'
-import Button from '@/app/components/base/button'
 import { StopCircle } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import { useGetToolIcon } from '@/app/components/workflow/hooks/use-tool-icon'
 import { getNextExecutionTime } from '@/app/components/workflow/nodes/trigger-schedule/utils/execution-time-calculator'
@@ -176,7 +176,7 @@ const Listening: FC<ListeningProps> = ({
       </div>
       {webhookDebugUrl && (
         <div className="flex items-center gap-2">
-          <div className="system-xs-regular shrink-0 whitespace-pre-line text-text-tertiary">
+          <div className="shrink-0 system-xs-regular whitespace-pre-line text-text-tertiary">
             {t('nodes.triggerWebhook.debugUrlTitle', { ns: 'workflow' })}
           </div>
           <Tooltip
@@ -191,7 +191,7 @@ const Listening: FC<ListeningProps> = ({
             <button
               type="button"
               aria-label={t('nodes.triggerWebhook.debugUrlCopy', { ns: 'workflow' }) || ''}
-              className={`inline-flex items-center radius-sm border border-divider-regular bg-components-badge-white-to-dark px-1.5 py-[2px] font-mono text-[13px] leading-[18px] text-text-secondary transition-colors hover:bg-components-panel-on-panel-item-bg-hover focus:outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-components-panel-border ${debugUrlCopied ? 'bg-components-panel-on-panel-item-bg-hover text-text-primary' : ''}`}
+              className={`inline-flex items-center radius-sm border border-divider-regular bg-components-badge-white-to-dark px-1.5 py-[2px] font-mono text-[13px] leading-[18px] text-text-secondary transition-colors hover:bg-components-panel-on-panel-item-bg-hover focus:outline-hidden focus-visible:outline-2 focus-visible:outline-components-panel-border focus-visible:outline-solid ${debugUrlCopied ? 'bg-components-panel-on-panel-item-bg-hover text-text-primary' : ''}`}
               onClick={() => {
                 copy(webhookDebugUrl)
                 setDebugUrlCopied(true)
diff --git a/web/app/education-apply/education-apply-page.tsx b/web/app/education-apply/education-apply-page.tsx
index 48688a1725..7fda139aa9 100644
--- a/web/app/education-apply/education-apply-page.tsx
+++ b/web/app/education-apply/education-apply-page.tsx
@@ -6,8 +6,8 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Checkbox from '@/app/components/base/checkbox'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { EDUCATION_VERIFYING_LOCALSTORAGE_ITEM } from '@/app/education-apply/constants'
 import { useDocLink } from '@/context/i18n'
@@ -85,12 +85,12 @@ const EducationApplyAge = () => {
           <DifyLogo size="large" style="monochromeWhite" />
         </div>
         <div className="mx-auto max-w-[720px] px-8 pb-[180px]">
-          <div className="mb-2 flex h-[192px] flex-col justify-end pb-4 pt-3 text-text-primary-on-surface">
-            <div className="mb-2 shadow-xs title-5xl-bold">{t('toVerified', { ns: 'education' })}</div>
-            <div className="shadow-xs system-md-medium">
+          <div className="mb-2 flex h-[192px] flex-col justify-end pt-3 pb-4 text-text-primary-on-surface">
+            <div className="mb-2 title-5xl-bold shadow-xs">{t('toVerified', { ns: 'education' })}</div>
+            <div className="system-md-medium shadow-xs">
               {t('toVerifiedTip.front', { ns: 'education' })}
 &nbsp;
-              <span className="underline system-md-semibold">{t('toVerifiedTip.coupon', { ns: 'education' })}</span>
+              <span className="system-md-semibold underline">{t('toVerifiedTip.coupon', { ns: 'education' })}</span>
 &nbsp;
               {t('toVerifiedTip.end', { ns: 'education' })}
             </div>
@@ -99,7 +99,7 @@ const EducationApplyAge = () => {
             <UserInfo />
           </div>
           <div className="mb-7">
-            <div className="mb-1 flex h-6 items-center text-text-secondary system-md-semibold">
+            <div className="mb-1 flex h-6 items-center system-md-semibold text-text-secondary">
               {t('form.schoolName.title', { ns: 'education' })}
             </div>
             <SearchInput
@@ -108,7 +108,7 @@ const EducationApplyAge = () => {
             />
           </div>
           <div className="mb-7">
-            <div className="mb-1 flex h-6 items-center text-text-secondary system-md-semibold">
+            <div className="mb-1 flex h-6 items-center system-md-semibold text-text-secondary">
               {t('form.schoolRole.title', { ns: 'education' })}
             </div>
             <RoleSelector
@@ -117,10 +117,10 @@ const EducationApplyAge = () => {
             />
           </div>
           <div className="mb-7">
-            <div className="mb-1 flex h-6 items-center text-text-secondary system-md-semibold">
+            <div className="mb-1 flex h-6 items-center system-md-semibold text-text-secondary">
               {t('form.terms.title', { ns: 'education' })}
             </div>
-            <div className="mb-1 text-text-tertiary system-md-regular">
+            <div className="mb-1 system-md-regular text-text-tertiary">
               {t('form.terms.desc.front', { ns: 'education' })}
 &nbsp;
               <a href="https://dify.ai/terms" target="_blank" className="text-text-secondary hover:underline">{t('form.terms.desc.termsOfService', { ns: 'education' })}</a>
@@ -130,7 +130,7 @@ const EducationApplyAge = () => {
               <a href="https://dify.ai/privacy" target="_blank" className="text-text-secondary hover:underline">{t('form.terms.desc.privacyPolicy', { ns: 'education' })}</a>
               {t('form.terms.desc.end', { ns: 'education' })}
             </div>
-            <div className="py-2 text-text-primary system-md-regular">
+            <div className="py-2 system-md-regular text-text-primary">
               <div className="mb-2 flex">
                 <Checkbox
                   className="mr-2 shrink-0"
@@ -156,9 +156,9 @@ const EducationApplyAge = () => {
           >
             {t('submit', { ns: 'education' })}
           </Button>
-          <div className="mb-4 mt-5 h-px bg-linear-to-r from-[rgba(16,24,40,0.08)]"></div>
+          <div className="mt-5 mb-4 h-px bg-linear-to-r from-[rgba(16,24,40,0.08)]"></div>
           <a
-            className="flex items-center text-text-accent system-xs-regular"
+            className="flex items-center system-xs-regular text-text-accent"
             href={docLink('/use-dify/workspace/subscription-management#dify-for-education')}
             target="_blank"
           >
diff --git a/web/app/education-apply/expire-notice-modal.tsx b/web/app/education-apply/expire-notice-modal.tsx
index fc939ffc3c..ec88bba1b5 100644
--- a/web/app/education-apply/expire-notice-modal.tsx
+++ b/web/app/education-apply/expire-notice-modal.tsx
@@ -2,8 +2,8 @@
 import { RiExternalLinkLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { useDocLink } from '@/context/i18n'
 import { useModalContextSelector } from '@/context/modal-context'
 import useTimestamp from '@/hooks/use-timestamp'
@@ -48,7 +48,7 @@ const ExpireNoticeModal: React.FC<Props> = ({ expireAt, expired, onClose }) => {
       closable
       className="max-w-[600px]"
     >
-      <div className="body-md-regular mt-5 space-y-5 text-text-secondary">
+      <div className="mt-5 space-y-5 body-md-regular text-text-secondary">
         <div>
           {expired
             ? (
@@ -60,16 +60,16 @@ const ExpireNoticeModal: React.FC<Props> = ({ expireAt, expired, onClose }) => {
             : t(`${i18nPrefix}.isAboutToExpire.summary`, { ns: 'education' })}
         </div>
         <div>
-          <strong className="title-md-semi-bold block">{t(`${i18nPrefix}.stillInEducation.title`, { ns: 'education' })}</strong>
+          <strong className="block title-md-semi-bold">{t(`${i18nPrefix}.stillInEducation.title`, { ns: 'education' })}</strong>
           {t(`${i18nPrefix}.stillInEducation.${expired ? 'expired' : 'isAboutToExpire'}`, { ns: 'education' })}
         </div>
         <div>
-          <strong className="title-md-semi-bold block">{t(`${i18nPrefix}.alreadyGraduated.title`, { ns: 'education' })}</strong>
+          <strong className="block title-md-semi-bold">{t(`${i18nPrefix}.alreadyGraduated.title`, { ns: 'education' })}</strong>
           {t(`${i18nPrefix}.alreadyGraduated.${expired ? 'expired' : 'isAboutToExpire'}`, { ns: 'education' })}
         </div>
       </div>
       <div className="mt-7 flex items-center justify-between space-x-2">
-        <Link className="system-xs-regular flex items-center space-x-1 text-text-accent" href={eduDocLink} target="_blank" rel="noopener noreferrer">
+        <Link className="flex items-center space-x-1 system-xs-regular text-text-accent" href={eduDocLink} target="_blank" rel="noopener noreferrer">
           <div>{t('learn', { ns: 'education' })}</div>
           <RiExternalLinkLine className="size-3" />
         </Link>
diff --git a/web/app/education-apply/user-info.tsx b/web/app/education-apply/user-info.tsx
index 6e51d1adb8..32d56b2780 100644
--- a/web/app/education-apply/user-info.tsx
+++ b/web/app/education-apply/user-info.tsx
@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { Triangle } from '@/app/components/base/icons/src/public/education'
 import { Avatar } from '@/app/components/base/ui/avatar'
+import { Button } from '@/app/components/base/ui/button'
 import { useAppContext } from '@/context/app-context'
 import { useRouter } from '@/next/navigation'
 import { useLogout } from '@/service/use-common'
@@ -22,9 +22,9 @@ const UserInfo = () => {
   }
 
   return (
-    <div className="relative flex items-center justify-between rounded-xl border-4 border-components-panel-on-panel-item-bg bg-linear-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1 pb-6 pl-6 pr-8 pt-9 shadow-shadow-shadow-5">
-      <div className="absolute left-0 top-0 flex items-center">
-        <div className="system-2xs-semibold-uppercase flex h-[22px] items-center bg-components-panel-on-panel-item-bg pl-2 pt-1 text-text-accent-light-mode-only">
+    <div className="relative flex items-center justify-between rounded-xl border-4 border-components-panel-on-panel-item-bg bg-linear-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1 pt-9 pr-8 pb-6 pl-6 shadow-shadow-shadow-5">
+      <div className="absolute top-0 left-0 flex items-center">
+        <div className="flex h-[22px] items-center bg-components-panel-on-panel-item-bg pt-1 pl-2 system-2xs-semibold-uppercase text-text-accent-light-mode-only">
           {t('currentSigned', { ns: 'education' })}
         </div>
         <Triangle className="h-[22px] w-4 text-components-panel-on-panel-item-bg" />
diff --git a/web/app/education-apply/verify-state-modal.tsx b/web/app/education-apply/verify-state-modal.tsx
index 6f1f529e76..c4d836f178 100644
--- a/web/app/education-apply/verify-state-modal.tsx
+++ b/web/app/education-apply/verify-state-modal.tsx
@@ -5,7 +5,7 @@ import * as React from 'react'
 import { useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { useDocLink } from '@/context/i18n'
 
 type IConfirm = {
@@ -87,21 +87,21 @@ function Confirm({
     >
       <div ref={dialogRef} className="relative w-full max-w-[481px] overflow-hidden">
         <div className="shadows-shadow-lg flex max-w-full flex-col items-start rounded-2xl border-[0.5px] border-solid border-components-panel-border bg-components-panel-bg">
-          <div className="flex flex-col items-start gap-2 self-stretch pb-4 pl-6 pr-6 pt-6">
+          <div className="flex flex-col items-start gap-2 self-stretch pt-6 pr-6 pb-4 pl-6">
             <div className="title-2xl-semi-bold text-text-primary">{title}</div>
-            <div className="system-md-regular w-full text-text-tertiary">{content}</div>
+            <div className="w-full system-md-regular text-text-tertiary">{content}</div>
           </div>
           {email && (
             <div className="w-full space-y-1 px-6 py-3">
-              <div className="system-sm-semibold py-1 text-text-secondary">{t('emailLabel', { ns: 'education' })}</div>
-              <div className="system-sm-regular rounded-lg bg-components-input-bg-disabled px-3 py-2 text-components-input-text-filled-disabled">{email}</div>
+              <div className="py-1 system-sm-semibold text-text-secondary">{t('emailLabel', { ns: 'education' })}</div>
+              <div className="rounded-lg bg-components-input-bg-disabled px-3 py-2 system-sm-regular text-components-input-text-filled-disabled">{email}</div>
             </div>
           )}
           <div className="flex items-center justify-between gap-2 self-stretch p-6">
             <div className="flex items-center gap-1">
               {showLink && (
                 <>
-                  <a onClick={handleClick} href={eduDocLink} target="_blank" className="system-xs-regular cursor-pointer text-text-accent">{t('learn', { ns: 'education' })}</a>
+                  <a onClick={handleClick} href={eduDocLink} target="_blank" className="cursor-pointer system-xs-regular text-text-accent">{t('learn', { ns: 'education' })}</a>
                   <RiExternalLinkLine className="h-3 w-3 text-text-accent" />
                 </>
               )}
diff --git a/web/app/forgot-password/ChangePasswordForm.tsx b/web/app/forgot-password/ChangePasswordForm.tsx
index e303aee2ea..4d859eddaf 100644
--- a/web/app/forgot-password/ChangePasswordForm.tsx
+++ b/web/app/forgot-password/ChangePasswordForm.tsx
@@ -2,8 +2,8 @@
 import { CheckCircleIcon } from '@heroicons/react/24/solid'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { validPassword } from '@/config'
 import { useSearchParams } from '@/next/navigation'
diff --git a/web/app/forgot-password/ForgotPasswordForm.tsx b/web/app/forgot-password/ForgotPasswordForm.tsx
index fdc35c20da..7ce5e7d8dd 100644
--- a/web/app/forgot-password/ForgotPasswordForm.tsx
+++ b/web/app/forgot-password/ForgotPasswordForm.tsx
@@ -7,9 +7,9 @@ import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import * as z from 'zod'
-import Button from '@/app/components/base/button'
 import { formContext, useAppForm } from '@/app/components/base/form'
 import { zodSubmitValidator } from '@/app/components/base/form/utils/zod-submit-validator'
+import { Button } from '@/app/components/base/ui/button'
 import { useRouter } from '@/next/navigation'
 import {
   fetchInitValidateStatus,
diff --git a/web/app/init/InitPasswordPopup.tsx b/web/app/init/InitPasswordPopup.tsx
index e192f2856a..b0c74978fa 100644
--- a/web/app/init/InitPasswordPopup.tsx
+++ b/web/app/init/InitPasswordPopup.tsx
@@ -2,7 +2,7 @@
 import type { InitValidateStatusResponse } from '@/models/common'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import useDocumentTitle from '@/hooks/use-document-title'
 import { useRouter } from '@/next/navigation'
@@ -64,7 +64,7 @@ const InitPasswordPopup = () => {
                       type="password"
                       value={password}
                       onChange={e => setPassword(e.target.value)}
-                      className="block w-full appearance-none rounded-md border border-divider-regular px-3 py-2 shadow-sm placeholder:text-text-quaternary focus:border-indigo-500 focus:outline-hidden focus:ring-indigo-500 sm:text-sm"
+                      className="block w-full appearance-none rounded-md border border-divider-regular px-3 py-2 shadow-sm placeholder:text-text-quaternary focus:border-indigo-500 focus:ring-indigo-500 focus:outline-hidden sm:text-sm"
                     />
                   </div>
                 </div>
diff --git a/web/app/install/installForm.tsx b/web/app/install/installForm.tsx
index d5cc401fbe..268471a12b 100644
--- a/web/app/install/installForm.tsx
+++ b/web/app/install/installForm.tsx
@@ -6,10 +6,10 @@ import * as React from 'react'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import * as z from 'zod'
-import Button from '@/app/components/base/button'
 import { formContext, useAppForm } from '@/app/components/base/form'
 import { zodSubmitValidator } from '@/app/components/base/form/utils/zod-submit-validator'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { validPassword } from '@/config'
 import { LICENSE_LINK } from '@/constants/link'
 import useDocumentTitle from '@/hooks/use-document-title'
diff --git a/web/app/reset-password/check-code/page.tsx b/web/app/reset-password/check-code/page.tsx
index 5927d52a0c..98ea828aae 100644
--- a/web/app/reset-password/check-code/page.tsx
+++ b/web/app/reset-password/check-code/page.tsx
@@ -2,8 +2,8 @@
 import { RiArrowLeftLine, RiMailSendFill } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import Countdown from '@/app/components/signin/countdown'
 import { useLocale } from '@/context/i18n'
@@ -61,9 +61,9 @@ export default function CheckCode() {
       <div className="inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge text-text-accent-light-mode-only shadow-lg">
         <RiMailSendFill className="h-6 w-6 text-2xl" />
       </div>
-      <div className="pb-4 pt-2">
+      <div className="pt-2 pb-4">
         <h2 className="title-4xl-semi-bold text-text-primary">{t('checkCode.checkYourEmail', { ns: 'login' })}</h2>
-        <p className="body-md-regular mt-2 text-text-secondary">
+        <p className="mt-2 body-md-regular text-text-secondary">
           <span>
             {t('checkCode.tipsPrefix', { ns: 'login' })}
             <strong>{email}</strong>
@@ -75,7 +75,7 @@ export default function CheckCode() {
 
       <form action="">
         <input type="text" className="hidden" />
-        <label htmlFor="code" className="system-md-semibold mb-1 text-text-secondary">{t('checkCode.verificationCode', { ns: 'login' })}</label>
+        <label htmlFor="code" className="mb-1 system-md-semibold text-text-secondary">{t('checkCode.verificationCode', { ns: 'login' })}</label>
         <Input value={code} onChange={e => setVerifyCode(e.target.value)} maxLength={6} className="mt-1" placeholder={t('checkCode.verificationCodePlaceholder', { ns: 'login' }) as string} />
         <Button loading={loading} disabled={loading} className="my-3 w-full" variant="primary" onClick={verify}>{t('checkCode.verify', { ns: 'login' })}</Button>
         <Countdown onResend={resendCode} />
@@ -87,7 +87,7 @@ export default function CheckCode() {
         <div className="inline-block rounded-full bg-background-default-dimmed p-1">
           <RiArrowLeftLine size={12} />
         </div>
-        <span className="system-xs-regular ml-2">{t('back', { ns: 'login' })}</span>
+        <span className="ml-2 system-xs-regular">{t('back', { ns: 'login' })}</span>
       </div>
     </div>
   )
diff --git a/web/app/reset-password/page.tsx b/web/app/reset-password/page.tsx
index 618ac7ad30..d58fd7e9ff 100644
--- a/web/app/reset-password/page.tsx
+++ b/web/app/reset-password/page.tsx
@@ -3,8 +3,8 @@ import { RiArrowLeftLine, RiLockPasswordLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { emailRegex } from '@/config'
 import { useLocale } from '@/context/i18n'
@@ -60,9 +60,9 @@ export default function CheckCode() {
       <div className="inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge shadow-lg">
         <RiLockPasswordLine className="h-6 w-6 text-2xl text-text-accent-light-mode-only" />
       </div>
-      <div className="pb-4 pt-2">
+      <div className="pt-2 pb-4">
         <h2 className="title-4xl-semi-bold text-text-primary">{t('resetPassword', { ns: 'login' })}</h2>
-        <p className="body-md-regular mt-2 text-text-secondary">
+        <p className="mt-2 body-md-regular text-text-secondary">
           {t('resetPasswordDesc', { ns: 'login' })}
         </p>
       </div>
@@ -70,7 +70,7 @@ export default function CheckCode() {
       <form onSubmit={noop}>
         <input type="text" className="hidden" />
         <div className="mb-2">
-          <label htmlFor="email" className="system-md-semibold my-2 text-text-secondary">{t('email', { ns: 'login' })}</label>
+          <label htmlFor="email" className="my-2 system-md-semibold text-text-secondary">{t('email', { ns: 'login' })}</label>
           <div className="mt-1">
             <Input id="email" type="email" disabled={loading} value={email} placeholder={t('emailPlaceholder', { ns: 'login' }) as string} onChange={e => setEmail(e.target.value)} />
           </div>
@@ -86,7 +86,7 @@ export default function CheckCode() {
         <div className="inline-block rounded-full bg-background-default-dimmed p-1">
           <RiArrowLeftLine size={12} />
         </div>
-        <span className="system-xs-regular ml-2">{t('backToLogin', { ns: 'login' })}</span>
+        <span className="ml-2 system-xs-regular">{t('backToLogin', { ns: 'login' })}</span>
       </Link>
     </div>
   )
diff --git a/web/app/reset-password/set-password/page.tsx b/web/app/reset-password/set-password/page.tsx
index 877c156b71..e40e1e5e6c 100644
--- a/web/app/reset-password/set-password/page.tsx
+++ b/web/app/reset-password/set-password/page.tsx
@@ -3,8 +3,8 @@ import { RiCheckboxCircleFill } from '@remixicon/react'
 import { useCountDown } from 'ahooks'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { validPassword } from '@/config'
 import { useRouter, useSearchParams } from '@/next/navigation'
@@ -96,7 +96,7 @@ const ChangePasswordForm = () => {
             <h2 className="title-4xl-semi-bold text-text-primary">
               {t('changePassword', { ns: 'login' })}
             </h2>
-            <p className="body-md-regular mt-2 text-text-secondary">
+            <p className="mt-2 body-md-regular text-text-secondary">
               {t('changePasswordTip', { ns: 'login' })}
             </p>
           </div>
@@ -105,7 +105,7 @@ const ChangePasswordForm = () => {
             <div>
               {/* Password */}
               <div className="mb-5">
-                <label htmlFor="password" className="system-md-semibold my-2 text-text-secondary">
+                <label htmlFor="password" className="my-2 system-md-semibold text-text-secondary">
                   {t('account.newPassword', { ns: 'common' })}
                 </label>
                 <div className="relative mt-1">
@@ -127,11 +127,11 @@ const ChangePasswordForm = () => {
                     </Button>
                   </div>
                 </div>
-                <div className="body-xs-regular mt-1 text-text-secondary">{t('error.passwordInvalid', { ns: 'login' })}</div>
+                <div className="mt-1 body-xs-regular text-text-secondary">{t('error.passwordInvalid', { ns: 'login' })}</div>
               </div>
               {/* Confirm Password */}
               <div className="mb-5">
-                <label htmlFor="confirmPassword" className="system-md-semibold my-2 text-text-secondary">
+                <label htmlFor="confirmPassword" className="my-2 system-md-semibold text-text-secondary">
                   {t('account.confirmPassword', { ns: 'common' })}
                 </label>
                 <div className="relative mt-1">
diff --git a/web/app/signin/check-code/page.tsx b/web/app/signin/check-code/page.tsx
index 60d0732bc7..b86c984f31 100644
--- a/web/app/signin/check-code/page.tsx
+++ b/web/app/signin/check-code/page.tsx
@@ -4,8 +4,8 @@ import { RiArrowLeftLine, RiMailSendFill } from '@remixicon/react'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { trackEvent } from '@/app/components/base/amplitude'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import Countdown from '@/app/components/signin/countdown'
 import { useLocale } from '@/context/i18n'
@@ -88,9 +88,9 @@ export default function CheckCode() {
       <div className="inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge shadow-lg">
         <RiMailSendFill className="h-6 w-6 text-2xl text-text-accent-light-mode-only" />
       </div>
-      <div className="pb-4 pt-2">
-        <h2 className="text-text-primary title-4xl-semi-bold">{t('checkCode.checkYourEmail', { ns: 'login' })}</h2>
-        <p className="mt-2 text-text-secondary body-md-regular">
+      <div className="pt-2 pb-4">
+        <h2 className="title-4xl-semi-bold text-text-primary">{t('checkCode.checkYourEmail', { ns: 'login' })}</h2>
+        <p className="mt-2 body-md-regular text-text-secondary">
           <span>
             {t('checkCode.tipsPrefix', { ns: 'login' })}
             <strong>{email}</strong>
@@ -101,7 +101,7 @@ export default function CheckCode() {
       </div>
 
       <form onSubmit={handleSubmit}>
-        <label htmlFor="code" className="mb-1 text-text-secondary system-md-semibold">{t('checkCode.verificationCode', { ns: 'login' })}</label>
+        <label htmlFor="code" className="mb-1 system-md-semibold text-text-secondary">{t('checkCode.verificationCode', { ns: 'login' })}</label>
         <Input
           ref={codeInputRef}
           id="code"
diff --git a/web/app/signin/components/mail-and-code-auth.tsx b/web/app/signin/components/mail-and-code-auth.tsx
index 0e6735183f..5c5431c42a 100644
--- a/web/app/signin/components/mail-and-code-auth.tsx
+++ b/web/app/signin/components/mail-and-code-auth.tsx
@@ -1,8 +1,8 @@
 import type { FormEvent } from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { COUNT_DOWN_KEY, COUNT_DOWN_TIME_MS } from '@/app/components/signin/countdown'
 import { emailRegex } from '@/config'
@@ -61,7 +61,7 @@ export default function MailAndCodeAuth({ isInvite }: MailAndCodeAuthProps) {
     <form onSubmit={handleSubmit}>
       <input type="text" className="hidden" />
       <div className="mb-2">
-        <label htmlFor="email" className="system-md-semibold my-2 text-text-secondary">{t('email', { ns: 'login' })}</label>
+        <label htmlFor="email" className="my-2 system-md-semibold text-text-secondary">{t('email', { ns: 'login' })}</label>
         <div className="mt-1">
           <Input id="email" type="email" disabled={isInvite} value={email} placeholder={t('emailPlaceholder', { ns: 'login' }) as string} onChange={e => setEmail(e.target.value)} />
         </div>
diff --git a/web/app/signin/components/mail-and-password-auth.tsx b/web/app/signin/components/mail-and-password-auth.tsx
index 061757a1bd..ca93b9b391 100644
--- a/web/app/signin/components/mail-and-password-auth.tsx
+++ b/web/app/signin/components/mail-and-password-auth.tsx
@@ -3,8 +3,8 @@ import { noop } from 'es-toolkit/function'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { trackEvent } from '@/app/components/base/amplitude'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { emailRegex } from '@/config'
 import { useLocale } from '@/context/i18n'
@@ -96,7 +96,7 @@ export default function MailAndPasswordAuth({ isInvite, isEmailSetup, allowRegis
   return (
     <form onSubmit={noop}>
       <div className="mb-3">
-        <label htmlFor="email" className="my-2 text-text-secondary system-md-semibold">
+        <label htmlFor="email" className="my-2 system-md-semibold text-text-secondary">
           {t('email', { ns: 'login' })}
         </label>
         <div className="mt-1">
@@ -115,7 +115,7 @@ export default function MailAndPasswordAuth({ isInvite, isEmailSetup, allowRegis
 
       <div className="mb-3">
         <label htmlFor="password" className="my-2 flex items-center justify-between">
-          <span className="text-text-secondary system-md-semibold">{t('password', { ns: 'login' })}</span>
+          <span className="system-md-semibold text-text-secondary">{t('password', { ns: 'login' })}</span>
           <Link
             href={`/reset-password?${searchParams.toString()}`}
             className={`system-xs-regular ${isEmailSetup ? 'text-components-button-secondary-accent-text' : 'pointer-events-none text-components-button-secondary-accent-text-disabled'}`}
diff --git a/web/app/signin/components/social-auth.tsx b/web/app/signin/components/social-auth.tsx
index 35517a0505..0e3883ea73 100644
--- a/web/app/signin/components/social-auth.tsx
+++ b/web/app/signin/components/social-auth.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { API_PREFIX } from '@/config'
 import { useSearchParams } from '@/next/navigation'
 import { getPurifyHref } from '@/utils'
diff --git a/web/app/signin/components/sso-auth.tsx b/web/app/signin/components/sso-auth.tsx
index a94f101b74..5ead876741 100644
--- a/web/app/signin/components/sso-auth.tsx
+++ b/web/app/signin/components/sso-auth.tsx
@@ -2,8 +2,8 @@
 import type { FC } from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { Lock01 } from '@/app/components/base/icons/src/vender/solid/security'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useRouter, useSearchParams } from '@/next/navigation'
 import { getUserOAuth2SSOUrl, getUserOIDCSSOUrl, getUserSAMLSSOUrl } from '@/service/sso'
diff --git a/web/app/signin/invite-settings/page.tsx b/web/app/signin/invite-settings/page.tsx
index ffee528b0d..fc9bdf6b0a 100644
--- a/web/app/signin/invite-settings/page.tsx
+++ b/web/app/signin/invite-settings/page.tsx
@@ -4,10 +4,10 @@ import { RiAccountCircleLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Loading from '@/app/components/base/loading'
 import { SimpleSelect } from '@/app/components/base/select'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { LICENSE_LINK } from '@/constants/link'
 import { useGlobalPublicStore } from '@/context/global-public-context'
@@ -72,7 +72,7 @@ export default function InviteSettingsPage() {
       <div className="flex flex-col md:w-[400px]">
         <div className="mx-auto w-full">
           <div className="mb-3 flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle text-2xl font-bold shadow-lg">🤷‍♂️</div>
-          <h2 className="text-text-primary title-4xl-semi-bold">{t('invalid', { ns: 'login' })}</h2>
+          <h2 className="title-4xl-semi-bold text-text-primary">{t('invalid', { ns: 'login' })}</h2>
         </div>
         <div className="mx-auto mt-6 w-full">
           <Button variant="primary" className="w-full text-sm!">
@@ -88,12 +88,12 @@ export default function InviteSettingsPage() {
       <div className="inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge shadow-lg">
         <RiAccountCircleLine className="h-6 w-6 text-2xl text-text-accent-light-mode-only" />
       </div>
-      <div className="pb-4 pt-2">
-        <h2 className="text-text-primary title-4xl-semi-bold">{t('setYourAccount', { ns: 'login' })}</h2>
+      <div className="pt-2 pb-4">
+        <h2 className="title-4xl-semi-bold text-text-primary">{t('setYourAccount', { ns: 'login' })}</h2>
       </div>
       <form onSubmit={noop}>
         <div className="mb-5">
-          <label htmlFor="name" className="my-2 text-text-secondary system-md-semibold">
+          <label htmlFor="name" className="my-2 system-md-semibold text-text-secondary">
             {t('name', { ns: 'login' })}
           </label>
           <div className="mt-1">
@@ -114,7 +114,7 @@ export default function InviteSettingsPage() {
           </div>
         </div>
         <div className="mb-5">
-          <label htmlFor="name" className="my-2 text-text-secondary system-md-semibold">
+          <label htmlFor="name" className="my-2 system-md-semibold text-text-secondary">
             {t('interfaceLanguage', { ns: 'login' })}
           </label>
           <div className="mt-1">
@@ -129,7 +129,7 @@ export default function InviteSettingsPage() {
         </div>
         {/* timezone */}
         <div className="mb-5">
-          <label htmlFor="timezone" className="text-text-secondary system-md-semibold">
+          <label htmlFor="timezone" className="system-md-semibold text-text-secondary">
             {t('timezone', { ns: 'login' })}
           </label>
           <div className="mt-1">
@@ -153,11 +153,11 @@ export default function InviteSettingsPage() {
         </div>
       </form>
       {!systemFeatures.branding.enabled && (
-        <div className="mt-2 block w-full text-text-tertiary system-xs-regular">
+        <div className="mt-2 block w-full system-xs-regular text-text-tertiary">
           {t('license.tip', { ns: 'login' })}
       &nbsp;
           <Link
-            className="text-text-accent-secondary system-xs-medium"
+            className="system-xs-medium text-text-accent-secondary"
             target="_blank"
             rel="noopener noreferrer"
             href={LICENSE_LINK}
diff --git a/web/app/signin/one-more-step.tsx b/web/app/signin/one-more-step.tsx
index 9814ef4c1b..6368533e2a 100644
--- a/web/app/signin/one-more-step.tsx
+++ b/web/app/signin/one-more-step.tsx
@@ -2,9 +2,9 @@
 import type { Reducer } from 'react'
 import { useReducer } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { SimpleSelect } from '@/app/components/base/select'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { LICENSE_LINK } from '@/constants/link'
 import { languages, LanguagesSupported } from '@/i18n-config/language'
@@ -79,13 +79,13 @@ const OneMoreStep = () => {
     <>
       <div className="mx-auto w-full">
         <h2 className="title-4xl-semi-bold text-text-secondary">{t('oneMoreStep', { ns: 'login' })}</h2>
-        <p className="body-md-regular mt-1 text-text-tertiary">{t('createSample', { ns: 'login' })}</p>
+        <p className="mt-1 body-md-regular text-text-tertiary">{t('createSample', { ns: 'login' })}</p>
       </div>
 
       <div className="mx-auto mt-6 w-full">
         <div className="relative">
           <div className="mb-5">
-            <label className="system-md-semibold my-2 flex items-center justify-between text-text-secondary">
+            <label className="my-2 flex items-center justify-between system-md-semibold text-text-secondary">
               {t('invitationCode', { ns: 'login' })}
               <Tooltip
                 popupContent={(
@@ -113,7 +113,7 @@ const OneMoreStep = () => {
             </div>
           </div>
           <div className="mb-5">
-            <label htmlFor="name" className="system-md-semibold my-2 text-text-secondary">
+            <label htmlFor="name" className="my-2 system-md-semibold text-text-secondary">
               {t('interfaceLanguage', { ns: 'login' })}
             </label>
             <div className="mt-1">
@@ -150,7 +150,7 @@ const OneMoreStep = () => {
               {t('go', { ns: 'login' })}
             </Button>
           </div>
-          <div className="system-xs-regular mt-2 block w-full text-text-tertiary">
+          <div className="mt-2 block w-full system-xs-regular text-text-tertiary">
             {t('license.tip', { ns: 'login' })}
             &nbsp;
             <Link
diff --git a/web/app/signup/check-code/page.tsx b/web/app/signup/check-code/page.tsx
index 603038e6c1..a71d5289fe 100644
--- a/web/app/signup/check-code/page.tsx
+++ b/web/app/signup/check-code/page.tsx
@@ -3,8 +3,8 @@ import type { MailSendResponse, MailValidityResponse } from '@/service/use-commo
 import { RiArrowLeftLine, RiMailSendFill } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import Countdown from '@/app/components/signin/countdown'
 import { useLocale } from '@/context/i18n'
@@ -69,9 +69,9 @@ export default function CheckCode() {
       <div className="inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge shadow-lg">
         <RiMailSendFill className="h-6 w-6 text-2xl text-text-accent-light-mode-only" />
       </div>
-      <div className="pb-4 pt-2">
+      <div className="pt-2 pb-4">
         <h2 className="title-4xl-semi-bold text-text-primary">{t('checkCode.checkYourEmail', { ns: 'login' })}</h2>
-        <p className="body-md-regular mt-2 text-text-secondary">
+        <p className="mt-2 body-md-regular text-text-secondary">
           <span>
             {t('checkCode.tipsPrefix', { ns: 'login' })}
             <strong>{email}</strong>
@@ -82,7 +82,7 @@ export default function CheckCode() {
       </div>
 
       <form action="">
-        <label htmlFor="code" className="system-md-semibold mb-1 text-text-secondary">{t('checkCode.verificationCode', { ns: 'login' })}</label>
+        <label htmlFor="code" className="mb-1 system-md-semibold text-text-secondary">{t('checkCode.verificationCode', { ns: 'login' })}</label>
         <Input value={code} onChange={e => setVerifyCode(e.target.value)} maxLength={6} className="mt-1" placeholder={t('checkCode.verificationCodePlaceholder', { ns: 'login' }) as string} />
         <Button loading={loading} disabled={loading} className="my-3 w-full" variant="primary" onClick={verify}>{t('checkCode.verify', { ns: 'login' })}</Button>
         <Countdown onResend={resendCode} />
@@ -94,7 +94,7 @@ export default function CheckCode() {
         <div className="bg-background-default-dimm inline-block rounded-full p-1">
           <RiArrowLeftLine size={12} />
         </div>
-        <span className="system-xs-regular ml-2">{t('back', { ns: 'login' })}</span>
+        <span className="ml-2 system-xs-regular">{t('back', { ns: 'login' })}</span>
       </div>
     </div>
   )
diff --git a/web/app/signup/components/input-mail.tsx b/web/app/signup/components/input-mail.tsx
index d14665f8e1..ae7fbb986d 100644
--- a/web/app/signup/components/input-mail.tsx
+++ b/web/app/signup/components/input-mail.tsx
@@ -2,8 +2,8 @@
 import type { MailSendResponse } from '@/service/use-common'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import Split from '@/app/signin/split'
 import { emailRegex } from '@/config'
@@ -49,7 +49,7 @@ export default function Form({
     }}
     >
       <div className="mb-3">
-        <label htmlFor="email" className="system-md-semibold my-2 text-text-secondary">
+        <label htmlFor="email" className="my-2 system-md-semibold text-text-secondary">
           {t('email', { ns: 'login' })}
         </label>
         <div className="mt-1">
@@ -75,9 +75,9 @@ export default function Form({
           {t('signup.verifyMail', { ns: 'login' })}
         </Button>
       </div>
-      <Split className="mb-5 mt-4" />
+      <Split className="mt-4 mb-5" />
 
-      <div className="text-[13px] font-medium leading-4 text-text-secondary">
+      <div className="text-[13px] leading-4 font-medium text-text-secondary">
         <span>{t('signup.haveAccount', { ns: 'login' })}</span>
         <Link
           className="text-text-accent"
@@ -89,7 +89,7 @@ export default function Form({
 
       {!systemFeatures.branding.enabled && (
         <>
-          <div className="system-xs-regular mt-3 block w-full text-text-tertiary">
+          <div className="mt-3 block w-full system-xs-regular text-text-tertiary">
             {t('tosDesc', { ns: 'login' })}
             &nbsp;
             <Link
diff --git a/web/app/signup/set-password/page.tsx b/web/app/signup/set-password/page.tsx
index 39c15e6161..72a25d6ac2 100644
--- a/web/app/signup/set-password/page.tsx
+++ b/web/app/signup/set-password/page.tsx
@@ -4,8 +4,8 @@ import Cookies from 'js-cookie'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { trackEvent } from '@/app/components/base/amplitude'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { validPassword } from '@/config'
 import { useRouter, useSearchParams } from '@/next/navigation'
@@ -102,7 +102,7 @@ const ChangePasswordForm = () => {
           <h2 className="title-4xl-semi-bold text-text-primary">
             {t('changePassword', { ns: 'login' })}
           </h2>
-          <p className="body-md-regular mt-2 text-text-secondary">
+          <p className="mt-2 body-md-regular text-text-secondary">
             {t('changePasswordTip', { ns: 'login' })}
           </p>
         </div>
@@ -111,7 +111,7 @@ const ChangePasswordForm = () => {
           <div>
             {/* Password */}
             <div className="mb-5">
-              <label htmlFor="password" className="system-md-semibold my-2 text-text-secondary">
+              <label htmlFor="password" className="my-2 system-md-semibold text-text-secondary">
                 {t('account.newPassword', { ns: 'common' })}
               </label>
               <div className="relative mt-1">
@@ -124,11 +124,11 @@ const ChangePasswordForm = () => {
                 />
 
               </div>
-              <div className="body-xs-regular mt-1 text-text-secondary">{t('error.passwordInvalid', { ns: 'login' })}</div>
+              <div className="mt-1 body-xs-regular text-text-secondary">{t('error.passwordInvalid', { ns: 'login' })}</div>
             </div>
             {/* Confirm Password */}
             <div className="mb-5">
-              <label htmlFor="confirmPassword" className="system-md-semibold my-2 text-text-secondary">
+              <label htmlFor="confirmPassword" className="my-2 system-md-semibold text-text-secondary">
                 {t('account.confirmPassword', { ns: 'common' })}
               </label>
               <div className="relative mt-1">
diff --git a/web/app/styles/globals.css b/web/app/styles/globals.css
index a1a0130b87..ac6475a565 100644
--- a/web/app/styles/globals.css
+++ b/web/app/styles/globals.css
@@ -8,7 +8,7 @@
 
 @import '../components/base/action-button/index.css';
 @import '../components/base/badge/index.css';
-@import '../components/base/button/index.css';
+@import '../components/base/ui/button/index.css';
 @import '../components/base/modal/index.css' layer(base);
 @import '../components/base/premium-badge/index.css';
 @import '../components/base/segmented-control/index.css';
diff --git a/web/eslint-suppressions.json b/web/eslint-suppressions.json
index 65f06aeb22..4efdaf36eb 100644
--- a/web/eslint-suppressions.json
+++ b/web/eslint-suppressions.json
@@ -133,9 +133,6 @@
   "app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx": {
     "no-restricted-imports": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx": {
@@ -164,9 +161,6 @@
   "app/(humanInputLayout)/form/[token]/form.tsx": {
     "react/set-state-in-effect": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 9
     }
   },
   "app/(shareLayout)/components/authenticated-layout.tsx": {
@@ -182,11 +176,6 @@
       "count": 1
     }
   },
-  "app/(shareLayout)/webapp-reset-password/check-code/page.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "app/(shareLayout)/webapp-reset-password/layout.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -195,30 +184,7 @@
       "count": 1
     }
   },
-  "app/(shareLayout)/webapp-reset-password/page.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
-  "app/(shareLayout)/webapp-reset-password/set-password/page.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
-  "app/(shareLayout)/webapp-signin/check-code/page.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
-  "app/(shareLayout)/webapp-signin/components/mail-and-code-auth.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/(shareLayout)/webapp-signin/components/mail-and-password-auth.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -238,26 +204,15 @@
       "count": 1
     }
   },
-  "app/account/(commonLayout)/account-page/AvatarWithEdit.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/account/(commonLayout)/account-page/email-change-modal.tsx": {
     "erasable-syntax-only/enums": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 26
-    },
     "ts/no-explicit-any": {
       "count": 5
     }
   },
   "app/account/(commonLayout)/account-page/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 15
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -267,25 +222,14 @@
       "count": 1
     }
   },
-  "app/account/(commonLayout)/delete-account/components/check-email.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/account/(commonLayout)/delete-account/components/feed-back.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/account/(commonLayout)/delete-account/components/verify-email.tsx": {
     "react/set-state-in-effect": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/account/(commonLayout)/delete-account/index.tsx": {
@@ -293,11 +237,6 @@
       "count": 1
     }
   },
-  "app/account/(commonLayout)/header.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/account/oauth/authorize/layout.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -307,18 +246,10 @@
     }
   },
   "app/account/oauth/authorize/page.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
   },
-  "app/components/app-sidebar/app-info/app-info-detail-panel.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
-    }
-  },
   "app/components/app-sidebar/app-info/app-info-trigger.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 2
@@ -330,9 +261,6 @@
     },
     "react/set-state-in-effect": {
       "count": 4
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
     }
   },
   "app/components/app-sidebar/app-sidebar-dropdown.tsx": {
@@ -393,9 +321,6 @@
   "app/components/app-sidebar/toggle-button.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/app/annotation/add-annotation-modal/edit-item/index.tsx": {
@@ -409,11 +334,6 @@
       "count": 1
     }
   },
-  "app/components/app/annotation/add-annotation-modal/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/app/annotation/batch-action.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -427,11 +347,6 @@
       "count": 7
     }
   },
-  "app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/app/annotation/batch-add-annotation-modal/index.tsx": {
     "erasable-syntax-only/enums": {
       "count": 1
@@ -445,9 +360,6 @@
     "react/set-state-in-effect": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -466,9 +378,6 @@
     },
     "react/set-state-in-effect": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
     }
   },
   "app/components/app/annotation/edit-annotation-modal/index.tsx": {
@@ -494,9 +403,6 @@
     "react/no-nested-component-definitions": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 6
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -552,14 +458,6 @@
   "app/components/app/app-access-control/add-member-or-group-pop.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
-  "app/components/app/app-access-control/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/app/app-access-control/specific-groups-or-members.tsx": {
@@ -582,9 +480,6 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 5
     }
@@ -602,9 +497,6 @@
   "app/components/app/app-publisher/version-info-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
     }
   },
   "app/components/app/configuration/base/feature-panel/index.tsx": {
@@ -638,25 +530,14 @@
     }
   },
   "app/components/app/configuration/config-prompt/advanced-prompt-input.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
   },
-  "app/components/app/configuration/config-prompt/confirm-add-var/index.tsx": {
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
   "app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -771,9 +652,6 @@
     "react/set-state-in-effect": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 7
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -790,12 +668,6 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 9
     }
@@ -807,12 +679,6 @@
     "react/set-state-in-effect": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 7
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 4
     }
@@ -838,9 +704,6 @@
     "react/set-state-in-effect": {
       "count": 4
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -881,11 +744,6 @@
       "count": 1
     }
   },
-  "app/components/app/configuration/config/automatic/result.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/app/configuration/config/automatic/types.ts": {
     "erasable-syntax-only/enums": {
       "count": 1
@@ -909,9 +767,6 @@
     "react/set-state-in-effect": {
       "count": 4
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -932,11 +787,6 @@
       "count": 3
     }
   },
-  "app/components/app/configuration/ctrl-btn-group/index.tsx": {
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
   "app/components/app/configuration/dataset-config/card-item/index.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -993,18 +843,12 @@
   "app/components/app/configuration/dataset-config/select-dataset/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/app/configuration/dataset-config/settings-modal/index.tsx": {
     "react/set-state-in-effect": {
       "count": 2
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 7
-    },
     "ts/no-explicit-any": {
       "count": 3
     }
@@ -1070,9 +914,6 @@
     "react/set-state-in-effect": {
       "count": 2
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 7
-    },
     "ts/no-explicit-any": {
       "count": 11
     }
@@ -1085,9 +926,6 @@
   "app/components/app/configuration/prompt-value-panel/index.tsx": {
     "no-restricted-imports": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/components/app/configuration/prompt-value-panel/utils.ts": {
@@ -1095,19 +933,6 @@
       "count": 1
     }
   },
-  "app/components/app/configuration/tools/external-data-tool-modal.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
-  "app/components/app/create-app-dialog/app-card/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
   "app/components/app/create-app-dialog/app-list/index.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 2
@@ -1128,9 +953,6 @@
     "react/set-state-in-effect": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 18
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -1138,9 +960,6 @@
   "app/components/app/create-from-dsl-modal/dsl-confirm-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/app/create-from-dsl-modal/index.tsx": {
@@ -1155,9 +974,6 @@
     },
     "react/set-state-in-effect": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
     }
   },
   "app/components/app/create-from-dsl-modal/uploader.tsx": {
@@ -1168,14 +984,6 @@
   "app/components/app/duplicate-modal/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
-  "app/components/app/in-site-message/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
     }
   },
   "app/components/app/log/empty-element.tsx": {
@@ -1229,14 +1037,6 @@
       "count": 5
     }
   },
-  "app/components/app/overview/apikey-info-panel/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 3
-    }
-  },
   "app/components/app/overview/app-card.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -1248,9 +1048,6 @@
   "app/components/app/overview/customize/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 9
     }
   },
   "app/components/app/overview/embedded/index.tsx": {
@@ -1276,9 +1073,6 @@
     },
     "regexp/no-unused-capturing-group": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 22
     }
   },
   "app/components/app/overview/trigger-card.tsx": {
@@ -1295,9 +1089,6 @@
     },
     "react/set-state-in-effect": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/components/app/text-generate/item/index.tsx": {
@@ -1324,14 +1115,6 @@
       "count": 2
     }
   },
-  "app/components/app/text-generate/saved-items/no-data/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
   "app/components/app/type-selector/index.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 3
@@ -1486,11 +1269,6 @@
       "count": 1
     }
   },
-  "app/components/base/app-icon-picker/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/base/app-icon/index.stories.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -1584,39 +1362,6 @@
       "count": 1
     }
   },
-  "app/components/base/button/add-button.stories.tsx": {
-    "no-console": {
-      "count": 1
-    }
-  },
-  "app/components/base/button/add-button.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/base/button/index.stories.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/base/button/index.tsx": {
-    "react-refresh/only-export-components": {
-      "count": 1
-    }
-  },
-  "app/components/base/button/sync-button.stories.tsx": {
-    "no-console": {
-      "count": 1
-    }
-  },
-  "app/components/base/button/sync-button.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/base/carousel/index.tsx": {
     "react-hooks-extra/no-direct-set-state-in-use-effect": {
       "count": 1
@@ -1697,11 +1442,6 @@
       "count": 3
     }
   },
-  "app/components/base/chat/chat-with-history/inputs-form/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/base/chat/chat-with-history/inputs-form/view-form-dropdown.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -1710,9 +1450,6 @@
   "app/components/base/chat/chat-with-history/sidebar/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/base/chat/chat-with-history/sidebar/item.tsx": {
@@ -1736,9 +1473,6 @@
   "app/components/base/chat/chat-with-history/sidebar/rename-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/base/chat/chat/answer/agent-content.tsx": {
@@ -1868,16 +1602,6 @@
       "count": 3
     }
   },
-  "app/components/base/chat/chat/question.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
-  "app/components/base/chat/chat/try-to-ask.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/base/chat/chat/type.ts": {
     "ts/no-explicit-any": {
       "count": 5
@@ -1928,11 +1652,6 @@
       "count": 3
     }
   },
-  "app/components/base/chat/embedded-chatbot/inputs-form/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -1948,11 +1667,6 @@
       "count": 10
     }
   },
-  "app/components/base/checkbox-list/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 6
-    }
-  },
   "app/components/base/checkbox/index.stories.tsx": {
     "no-console": {
       "count": 1
@@ -1980,9 +1694,6 @@
   "app/components/base/confirm/index.tsx": {
     "react/set-state-in-effect": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
     }
   },
   "app/components/base/content-dialog/index.stories.tsx": {
@@ -2025,11 +1736,6 @@
       "count": 1
     }
   },
-  "app/components/base/date-and-time-picker/date-picker/footer.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/base/date-and-time-picker/date-picker/header.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -2096,11 +1802,6 @@
       "count": 3
     }
   },
-  "app/components/base/drawer/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/base/effect/index.stories.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 2
@@ -2117,9 +1818,6 @@
   "app/components/base/emoji-picker/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/base/encrypted-bottom/index.tsx": {
@@ -2134,9 +1832,6 @@
     "react/component-hook-factories": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -2159,9 +1854,6 @@
   "app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/base/features/new-feature-panel/annotation-reply/config-param.tsx": {
@@ -2173,9 +1865,6 @@
     }
   },
   "app/components/base/features/new-feature-panel/annotation-reply/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
-    },
     "ts/no-explicit-any": {
       "count": 3
     }
@@ -2195,20 +1884,12 @@
       "count": 2
     }
   },
-  "app/components/base/features/new-feature-panel/conversation-opener/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/base/features/new-feature-panel/conversation-opener/modal.tsx": {
     "no-restricted-imports": {
       "count": 1
     },
     "react/set-state-in-effect": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
     }
   },
   "app/components/base/features/new-feature-panel/dialog-wrapper.tsx": {
@@ -2219,9 +1900,6 @@
   "app/components/base/features/new-feature-panel/feature-bar.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/base/features/new-feature-panel/feature-card.tsx": {
@@ -2235,26 +1913,11 @@
       "count": 5
     }
   },
-  "app/components/base/features/new-feature-panel/file-upload/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
-  "app/components/base/features/new-feature-panel/file-upload/setting-content.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/base/features/new-feature-panel/file-upload/setting-modal.tsx": {
     "ts/no-explicit-any": {
       "count": 1
     }
   },
-  "app/components/base/features/new-feature-panel/image-upload/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/base/features/new-feature-panel/index.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 2
@@ -2266,9 +1929,6 @@
     }
   },
   "app/components/base/features/new-feature-panel/moderation/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -2282,18 +1942,10 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 8
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
   },
-  "app/components/base/features/new-feature-panel/text-to-speech/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx": {
     "no-restricted-imports": {
       "count": 2
@@ -2335,11 +1987,6 @@
       "count": 1
     }
   },
-  "app/components/base/file-uploader/file-from-link-or-local/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/base/file-uploader/file-list-in-log.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -2359,19 +2006,6 @@
       "count": 3
     }
   },
-  "app/components/base/file-uploader/file-uploader-in-chat-input/file-image-item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
-  "app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "app/components/base/file-uploader/hooks.ts": {
     "react/no-unnecessary-use-prefix": {
       "count": 1
@@ -2832,9 +2466,6 @@
   "app/components/base/image-uploader/image-link-input.tsx": {
     "regexp/no-unused-capturing-group": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/base/image-uploader/image-list.stories.tsx": {
@@ -2876,11 +2507,6 @@
       "count": 2
     }
   },
-  "app/components/base/inline-delete-confirm/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/base/input-with-copy/index.tsx": {
     "react/unsupported-syntax": {
       "count": 1
@@ -2939,9 +2565,6 @@
     }
   },
   "app/components/base/markdown-blocks/button.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -2962,9 +2585,6 @@
   "app/components/base/markdown-blocks/form.tsx": {
     "erasable-syntax-only/enums": {
       "count": 3
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/base/markdown-blocks/index.ts": {
@@ -3087,11 +2707,6 @@
       "count": 2
     }
   },
-  "app/components/base/modal-like-wrap/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/base/modal/index.stories.tsx": {
     "react/set-state-in-effect": {
       "count": 1
@@ -3105,11 +2720,6 @@
       "count": 1
     }
   },
-  "app/components/base/modal/modal.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/base/new-audio-button/index.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -3131,11 +2741,6 @@
       "count": 1
     }
   },
-  "app/components/base/notion-connector/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/base/notion-page-selector/credential-selector/index.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 2
@@ -3162,9 +2767,6 @@
     }
   },
   "app/components/base/pagination/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 6
-    },
     "unicorn/prefer-number-properties": {
       "count": 1
     }
@@ -3346,11 +2948,6 @@
       "count": 2
     }
   },
-  "app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
-    }
-  },
   "app/components/base/prompt-editor/plugins/hitl-input-block/pre-populate.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -3708,9 +3305,6 @@
   "app/components/base/tag-management/tag-remove-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/base/tag-management/trigger.tsx": {
@@ -3761,11 +3355,6 @@
       "count": 1
     }
   },
-  "app/components/base/ui/alert-dialog/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/base/ui/avatar/index.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -3831,17 +3420,9 @@
       "count": 1
     }
   },
-  "app/components/billing/apps-full-in-dialog/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/billing/plan-upgrade-modal/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/billing/plan/assets/index.tsx": {
@@ -3859,11 +3440,6 @@
       "count": 12
     }
   },
-  "app/components/billing/pricing/header.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/billing/pricing/index.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 2
@@ -3956,26 +3532,11 @@
       "count": 1
     }
   },
-  "app/components/custom/custom-web-app-brand/components/chat-preview-card.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
-    }
-  },
   "app/components/custom/custom-web-app-brand/components/powered-by-brand.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
     }
   },
-  "app/components/custom/custom-web-app-brand/components/workflow-preview-card.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
-  "app/components/custom/custom-web-app-brand/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 7
-    }
-  },
   "app/components/datasets/chunk.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 2
@@ -4015,9 +3576,6 @@
   "app/components/datasets/common/image-previewer/index.tsx": {
     "no-irregular-whitespace": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
     }
   },
   "app/components/datasets/common/image-uploader/__tests__/store.spec.tsx": {
@@ -4035,21 +3593,11 @@
       "count": 1
     }
   },
-  "app/components/datasets/common/image-uploader/image-uploader-in-chunk/image-item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/datasets/common/image-uploader/image-uploader-in-retrieval-testing/image-input.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "app/components/datasets/common/image-uploader/image-uploader-in-retrieval-testing/image-item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/datasets/common/image-uploader/store.tsx": {
     "react-refresh/only-export-components": {
       "count": 3
@@ -4074,9 +3622,6 @@
   "app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/dsl-confirm-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/header.tsx": {
@@ -4095,9 +3640,6 @@
     },
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/tab/index.tsx": {
@@ -4120,14 +3662,6 @@
       "count": 2
     }
   },
-  "app/components/datasets/create-from-pipeline/header.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
   "app/components/datasets/create-from-pipeline/index.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -4166,9 +3700,6 @@
   "app/components/datasets/create-from-pipeline/list/template-card/details/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
     }
   },
   "app/components/datasets/create-from-pipeline/list/template-card/details/types.ts": {
@@ -4176,11 +3707,6 @@
       "count": 1
     }
   },
-  "app/components/datasets/create-from-pipeline/list/template-card/edit-pipeline-info.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "app/components/datasets/create-from-pipeline/list/template-card/index.tsx": {
     "no-restricted-imports": {
       "count": 2
@@ -4191,11 +3717,6 @@
       "count": 3
     }
   },
-  "app/components/datasets/create/embedding-process/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/datasets/create/embedding-process/indexing-progress-item.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -4255,9 +3776,6 @@
   "app/components/datasets/create/step-two/components/general-chunking-options.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
     }
   },
   "app/components/datasets/create/step-two/components/index.ts": {
@@ -4268,9 +3786,6 @@
   "app/components/datasets/create/step-two/components/indexing-mode-section.tsx": {
     "no-restricted-imports": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 9
     }
   },
   "app/components/datasets/create/step-two/components/inputs.tsx": {
@@ -4283,11 +3798,6 @@
       "count": 3
     }
   },
-  "app/components/datasets/create/step-two/components/parent-child-options.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/datasets/create/step-two/hooks/index.ts": {
     "no-barrel-files/no-barrel-files": {
       "count": 6
@@ -4351,11 +3861,6 @@
       "count": 1
     }
   },
-  "app/components/datasets/create/website/base/crawled-result-item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/datasets/create/website/base/error-message.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -4366,11 +3871,6 @@
       "count": 1
     }
   },
-  "app/components/datasets/create/website/base/header.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/datasets/create/website/base/input.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -4427,11 +3927,6 @@
       "count": 1
     }
   },
-  "app/components/datasets/create/website/no-data.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/datasets/create/website/preview.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -4484,11 +3979,6 @@
       "count": 1
     }
   },
-  "app/components/datasets/documents/components/empty-element.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/datasets/documents/components/list.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 2
@@ -4505,14 +3995,6 @@
   "app/components/datasets/documents/components/rename-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/datasets/documents/create-from-pipeline/actions/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/datasets/documents/create-from-pipeline/data-source-options/option-card.tsx": {
@@ -4543,9 +4025,6 @@
   "app/components/datasets/documents/create-from-pipeline/data-source/base/header.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/datasets/documents/create-from-pipeline/data-source/local-file/components/upload-dropzone.tsx": {
@@ -4563,11 +4042,6 @@
       "count": 1
     }
   },
-  "app/components/datasets/documents/create-from-pipeline/data-source/online-drive/connect/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/bucket.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -4604,11 +4078,6 @@
       "count": 2
     }
   },
-  "app/components/datasets/documents/create-from-pipeline/data-source/online-drive/header.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/datasets/documents/create-from-pipeline/data-source/online-drive/index.tsx": {
     "react/set-state-in-effect": {
       "count": 5
@@ -4634,20 +4103,12 @@
       "count": 1
     }
   },
-  "app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result-item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
     }
   },
   "app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -4662,14 +4123,6 @@
       "count": 5
     }
   },
-  "app/components/datasets/documents/create-from-pipeline/left-header.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
   "app/components/datasets/documents/create-from-pipeline/preview/file-preview.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 5
@@ -4693,11 +4146,6 @@
       "count": 3
     }
   },
-  "app/components/datasets/documents/create-from-pipeline/process-documents/header.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/datasets/documents/create-from-pipeline/process-documents/index.tsx": {
     "ts/no-explicit-any": {
       "count": 2
@@ -4706,9 +4154,6 @@
   "app/components/datasets/documents/create-from-pipeline/processing/embedding-process/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
     }
   },
   "app/components/datasets/documents/create-from-pipeline/processing/index.tsx": {
@@ -4736,20 +4181,12 @@
       "count": 9
     }
   },
-  "app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/datasets/documents/detail/batch-modal/index.tsx": {
     "no-restricted-imports": {
       "count": 1
     },
     "react/set-state-in-effect": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/datasets/documents/detail/completed/child-segment-detail.tsx": {
@@ -4765,9 +4202,6 @@
   "app/components/datasets/documents/detail/completed/common/batch-action.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/datasets/documents/detail/completed/common/chunk-content.tsx": {
@@ -4975,14 +4409,6 @@
       "count": 6
     }
   },
-  "app/components/datasets/documents/detail/settings/pipeline-settings/left-header.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
   "app/components/datasets/documents/detail/settings/pipeline-settings/process-documents/index.tsx": {
     "ts/no-explicit-any": {
       "count": 3
@@ -5004,14 +4430,6 @@
     },
     "react/set-state-in-effect": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 8
-    }
-  },
-  "app/components/datasets/external-api/external-api-panel/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
     }
   },
   "app/components/datasets/external-api/external-knowledge-api-card/index.tsx": {
@@ -5040,11 +4458,6 @@
       "count": 4
     }
   },
-  "app/components/datasets/external-knowledge-base/create/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "app/components/datasets/extra-info/api-access/card.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -5058,11 +4471,6 @@
       "count": 2
     }
   },
-  "app/components/datasets/extra-info/service-api/card.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "app/components/datasets/extra-info/service-api/index.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -5110,11 +4518,6 @@
       "count": 1
     }
   },
-  "app/components/datasets/hit-testing/components/query-input/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/datasets/hit-testing/components/query-input/textarea.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -5165,16 +4568,6 @@
       "count": 3
     }
   },
-  "app/components/datasets/hit-testing/modify-external-retrieval-modal.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
-  "app/components/datasets/hit-testing/modify-retrieval-modal.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/datasets/list/dataset-card/components/corner-labels.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 2
@@ -5231,11 +4624,6 @@
       "count": 2
     }
   },
-  "app/components/datasets/list/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/datasets/list/new-dataset-card/option.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -5280,9 +4668,6 @@
   "app/components/datasets/metadata/edit-metadata-batch/modal.tsx": {
     "no-restricted-imports": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
     }
   },
   "app/components/datasets/metadata/hooks/use-edit-dataset-metadata.ts": {
@@ -5311,12 +4696,6 @@
   "app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx": {
     "no-restricted-imports": {
       "count": 3
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
     }
   },
   "app/components/datasets/metadata/metadata-dataset/field.tsx": {
@@ -5356,11 +4735,6 @@
       "count": 2
     }
   },
-  "app/components/datasets/metadata/metadata-document/no-data.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/datasets/metadata/types.ts": {
     "erasable-syntax-only/enums": {
       "count": 2
@@ -5379,9 +4753,6 @@
   "app/components/datasets/rename-modal/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/components/datasets/settings/chunk-structure/types.ts": {
@@ -5486,25 +4857,14 @@
       "count": 1
     }
   },
-  "app/components/develop/secret-key/secret-key-button.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/develop/secret-key/secret-key-generate.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/develop/secret-key/secret-key-modal.tsx": {
     "no-restricted-imports": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/develop/tag.tsx": {
@@ -5517,16 +4877,6 @@
       "count": 4
     }
   },
-  "app/components/explore/app-card/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
-    }
-  },
-  "app/components/explore/app-list/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/explore/banner/banner-item.tsx": {
     "react-hooks-extra/no-direct-set-state-in-use-effect": {
       "count": 1
@@ -5561,9 +4911,6 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 8
-    },
     "ts/no-explicit-any": {
       "count": 1
     },
@@ -5599,11 +4946,6 @@
       "count": 2
     }
   },
-  "app/components/explore/try-app/app-info/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 6
-    }
-  },
   "app/components/explore/try-app/app/chat.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -5623,9 +4965,6 @@
   "app/components/explore/try-app/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/explore/try-app/preview/basic-app-preview.tsx": {
@@ -5728,17 +5067,11 @@
   "app/components/header/account-about/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/header/account-dropdown/compliance.tsx": {
     "erasable-syntax-only/enums": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
     }
   },
   "app/components/header/account-dropdown/index.tsx": {
@@ -5769,9 +5102,6 @@
   "app/components/header/account-setting/api-based-extension-page/modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/header/account-setting/api-based-extension-page/selector.tsx": {
@@ -5801,9 +5131,6 @@
   "app/components/header/account-setting/data-source-page-new/configure.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/header/account-setting/data-source-page-new/hooks/index.ts": {
@@ -5825,9 +5152,6 @@
     }
   },
   "app/components/header/account-setting/data-source-page-new/item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -5845,11 +5169,6 @@
       "count": 2
     }
   },
-  "app/components/header/account-setting/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 10
-    }
-  },
   "app/components/header/account-setting/key-validator/KeyInput.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -5868,11 +5187,6 @@
       "count": 2
     }
   },
-  "app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/header/account-setting/members-page/index.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 14
@@ -5881,9 +5195,6 @@
   "app/components/header/account-setting/members-page/invite-modal/index.tsx": {
     "react/set-state-in-effect": {
       "count": 3
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
     }
   },
   "app/components/header/account-setting/members-page/invite-modal/role-selector.tsx": {
@@ -5891,11 +5202,6 @@
       "count": 4
     }
   },
-  "app/components/header/account-setting/members-page/invited-modal/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/header/account-setting/members-page/invited-modal/invitation-link.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -5921,9 +5227,6 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 20
-    },
     "ts/no-explicit-any": {
       "count": 3
     }
@@ -5981,9 +5284,6 @@
   "app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx": {
     "no-restricted-imports": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/header/account-setting/model-provider-page/model-auth/authorized/authorized-item.tsx": {
@@ -6000,18 +5300,10 @@
     "no-restricted-imports": {
       "count": 3
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
   },
-  "app/components/header/account-setting/model-provider-page/model-auth/config-model.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/header/account-setting/model-provider-page/model-auth/config-provider.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -6083,9 +5375,6 @@
     }
   },
   "app/components/header/account-setting/model-provider-page/model-modal/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 9
-    },
     "ts/no-explicit-any": {
       "count": 5
     }
@@ -6123,11 +5412,6 @@
       "count": 6
     }
   },
-  "app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -6159,11 +5443,6 @@
       "count": 4
     }
   },
-  "app/components/header/account-setting/model-provider-page/model-selector/popup.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 13
-    }
-  },
   "app/components/header/account-setting/model-provider-page/provider-added-card/cooldown-timer.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -6177,11 +5456,6 @@
       "count": 8
     }
   },
-  "app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/api-key-section.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/credits-exhausted-alert.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 6
@@ -6197,11 +5471,6 @@
       "count": 2
     }
   },
-  "app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/usage-priority-section.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 4
@@ -6238,18 +5507,10 @@
     "react/set-state-in-effect": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 3
     }
   },
-  "app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/header/account-setting/model-provider-page/provider-added-card/priority-use-tip.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -6258,11 +5519,6 @@
       "count": 1
     }
   },
-  "app/components/header/account-setting/model-provider-page/provider-added-card/provider-card-actions.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 4
@@ -6273,11 +5529,6 @@
       "count": 1
     }
   },
-  "app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 6
-    }
-  },
   "app/components/header/account-setting/model-provider-page/utils.ts": {
     "no-barrel-files/no-barrel-files": {
       "count": 2
@@ -6430,11 +5681,6 @@
       "count": 1
     }
   },
-  "app/components/plugins/install-plugin/install-bundle/steps/install.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/plugins/install-plugin/install-from-github/index.tsx": {
     "no-restricted-imports": {
       "count": 2
@@ -6454,11 +5700,6 @@
       "count": 1
     }
   },
-  "app/components/plugins/install-plugin/install-from-github/steps/setURL.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/plugins/install-plugin/install-from-local-package/index.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -6467,11 +5708,6 @@
       "count": 2
     }
   },
-  "app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx": {
     "ts/no-explicit-any": {
       "count": 2
@@ -6485,11 +5721,6 @@
       "count": 2
     }
   },
-  "app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/plugins/marketplace/description/index.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 9
@@ -6505,14 +5736,6 @@
       "count": 1
     }
   },
-  "app/components/plugins/marketplace/list/card-wrapper.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
   "app/components/plugins/marketplace/list/list-with-collection.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -6563,9 +5786,6 @@
     }
   },
   "app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -6603,9 +5823,6 @@
     "no-restricted-imports": {
       "count": 3
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -6614,9 +5831,6 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -6706,9 +5920,6 @@
     }
   },
   "app/components/plugins/plugin-detail-panel/datasource-action-list.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -6741,11 +5952,6 @@
       "count": 3
     }
   },
-  "app/components/plugins/plugin-detail-panel/detail-header/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/plugins/plugin-detail-panel/endpoint-card.tsx": {
     "no-restricted-imports": {
       "count": 2
@@ -6769,9 +5975,6 @@
     }
   },
   "app/components/plugins/plugin-detail-panel/endpoint-modal.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
     "ts/no-explicit-any": {
       "count": 7
     }
@@ -6860,17 +6063,11 @@
     },
     "no-restricted-imports": {
       "count": 3
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/plugins/plugin-detail-panel/subscription-list/create/oauth-client.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/components/plugins/plugin-detail-panel/subscription-list/create/types.ts": {
@@ -6980,9 +6177,6 @@
   "app/components/plugins/plugin-detail-panel/tool-selector/components/tool-item.tsx": {
     "no-restricted-imports": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/plugins/plugin-detail-panel/tool-selector/components/tool-trigger.tsx": {
@@ -7035,9 +6229,6 @@
   "app/components/plugins/plugin-mutation-model/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/plugins/plugin-page/context.ts": {
@@ -7048,17 +6239,11 @@
   "app/components/plugins/plugin-page/debug-info.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/plugins/plugin-page/empty/index.tsx": {
     "react/set-state-in-effect": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
     }
   },
   "app/components/plugins/plugin-page/filter-management/category-filter.tsx": {
@@ -7080,9 +6265,6 @@
   "app/components/plugins/plugin-page/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/plugins/plugin-page/install-plugin-dropdown.tsx": {
@@ -7091,9 +6273,6 @@
     },
     "react/set-state-in-effect": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/plugins/plugin-page/plugin-info.tsx": {
@@ -7111,11 +6290,6 @@
       "count": 1
     }
   },
-  "app/components/plugins/plugin-page/plugin-tasks/components/plugin-task-list.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/plugins/plugin-page/plugin-tasks/components/task-status-indicator.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -7129,16 +6303,6 @@
       "count": 1
     }
   },
-  "app/components/plugins/plugin-page/plugins-panel.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/plugins/provider-card.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/plugins/readme-panel/entrance.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 2
@@ -7172,17 +6336,9 @@
       "count": 1
     }
   },
-  "app/components/plugins/reference-setting-modal/auto-update-setting/plugins-picker.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/plugins/reference-setting-modal/auto-update-setting/strategy-picker.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/plugins/reference-setting-modal/auto-update-setting/tool-item.tsx": {
@@ -7206,9 +6362,6 @@
   "app/components/plugins/reference-setting-modal/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/plugins/reference-setting-modal/label.tsx": {
@@ -7224,17 +6377,9 @@
       "count": 25
     }
   },
-  "app/components/plugins/update-plugin/downgrade-warning.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/plugins/update-plugin/from-market-place.tsx": {
     "erasable-syntax-only/enums": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/plugins/update-plugin/plugin-version-picker.tsx": {
@@ -7250,9 +6395,6 @@
   "app/components/rag-pipeline/components/conversion.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/rag-pipeline/components/panel/input-field/editor/form/hidden-fields.tsx": {
@@ -7310,9 +6452,6 @@
   "app/components/rag-pipeline/components/panel/input-field/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/rag-pipeline/components/panel/input-field/label-right-content/global-inputs.tsx": {
@@ -7369,9 +6508,6 @@
     }
   },
   "app/components/rag-pipeline/components/panel/test-run/result/result-preview/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -7389,12 +6525,6 @@
   "app/components/rag-pipeline/components/publish-as-knowledge-pipeline-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
     }
   },
   "app/components/rag-pipeline/components/publish-toast.tsx": {
@@ -7415,9 +6545,6 @@
   "app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 7
     }
   },
   "app/components/rag-pipeline/components/rag-pipeline-header/run-mode.tsx": {
@@ -7436,17 +6563,11 @@
   "app/components/rag-pipeline/components/update-dsl-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/components/rag-pipeline/components/version-mismatch-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/rag-pipeline/hooks/index.ts": {
@@ -7532,9 +6653,6 @@
     }
   },
   "app/components/share/text-generation/result/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -7552,11 +6670,6 @@
       "count": 2
     }
   },
-  "app/components/share/text-generation/run-batch/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/share/text-generation/run-once/index.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -7564,9 +6677,6 @@
     "react/set-state-in-effect": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    },
     "ts/no-explicit-any": {
       "count": 3
     }
@@ -7599,18 +6709,9 @@
   "app/components/tools/edit-custom-collection-modal/config-credentials.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 6
     }
   },
   "app/components/tools/edit-custom-collection-modal/get-schema.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -7619,23 +6720,11 @@
     "react/set-state-in-effect": {
       "count": 4
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 9
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
   },
   "app/components/tools/edit-custom-collection-modal/test-api.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 6
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -7673,9 +6762,6 @@
     "no-restricted-imports": {
       "count": 2
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 9
-    },
     "ts/no-explicit-any": {
       "count": 3
     }
@@ -7701,11 +6787,6 @@
       "count": 5
     }
   },
-  "app/components/tools/mcp/headers-input.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/tools/mcp/index.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -7715,9 +6796,6 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
     "ts/no-explicit-any": {
       "count": 5
     }
@@ -7730,17 +6808,11 @@
   "app/components/tools/mcp/mcp-service-card.tsx": {
     "no-restricted-imports": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
     }
   },
   "app/components/tools/mcp/modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/components/tools/mcp/provider-card.tsx": {
@@ -7783,9 +6855,6 @@
   "app/components/tools/provider/detail.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/components/tools/provider/empty.tsx": {
@@ -7802,9 +6871,6 @@
     }
   },
   "app/components/tools/setting/build-in/config-credentials.tsx": {
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 3
     }
@@ -7817,17 +6883,9 @@
       "count": 4
     }
   },
-  "app/components/tools/workflow-tool/configure-button.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/tools/workflow-tool/confirm-modal/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/tools/workflow-tool/index.tsx": {
@@ -7914,14 +6972,6 @@
   "app/components/workflow/block-selector/all-start-blocks.tsx": {
     "react/set-state-in-effect": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
-  "app/components/workflow/block-selector/all-tools.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/workflow/block-selector/blocks.tsx": {
@@ -7995,9 +7045,6 @@
     },
     "react/set-state-in-effect": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/workflow/block-selector/market-place-plugin/item.tsx": {
@@ -8137,9 +7184,6 @@
   "app/components/workflow/dsl-export-confirm-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 7
     }
   },
   "app/components/workflow/header/checklist/index.tsx": {
@@ -8152,21 +7196,11 @@
       "count": 2
     }
   },
-  "app/components/workflow/header/checklist/plugin-group.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/workflow/header/editing-title.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
     }
   },
-  "app/components/workflow/header/header-in-restoring.tsx": {
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
   "app/components/workflow/header/index.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -8222,9 +7256,6 @@
   "app/components/workflow/header/version-history-button.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/workflow/header/view-history.tsx": {
@@ -8388,9 +7419,6 @@
     }
   },
   "app/components/workflow/nodes/_base/components/before-run-form/form.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 3
     }
@@ -8492,9 +7520,6 @@
   "app/components/workflow/nodes/_base/components/error-handle/error-handle-type-selector.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/workflow/nodes/_base/components/error-handle/fail-branch-card.tsx": {
@@ -8636,17 +7661,9 @@
       "count": 1
     }
   },
-  "app/components/workflow/nodes/_base/components/next-step/item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/workflow/nodes/_base/components/next-step/operator.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/workflow/nodes/_base/components/node-control.tsx": {
@@ -8816,11 +7833,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/nodes/_base/components/variable/var-reference-picker.trigger.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 9
-    }
-  },
   "app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -8901,11 +7913,6 @@
       "count": 5
     }
   },
-  "app/components/workflow/nodes/_base/components/workflow-panel/last-run/no-data.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/workflow/nodes/_base/components/workflow-panel/last-run/use-last-run.ts": {
     "react/no-unnecessary-use-prefix": {
       "count": 2
@@ -9096,11 +8103,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/nodes/code/panel.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/workflow/nodes/code/types.ts": {
     "erasable-syntax-only/enums": {
       "count": 1
@@ -9132,11 +8134,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/nodes/data-source-empty/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/workflow/nodes/data-source/default.ts": {
     "ts/no-explicit-any": {
       "count": 5
@@ -9219,9 +8216,6 @@
   "app/components/workflow/nodes/http/components/authorization/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/workflow/nodes/http/components/authorization/radio-group.tsx": {
@@ -9309,9 +8303,6 @@
   "app/components/workflow/nodes/human-input/components/delivery-method/email-configure-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
     }
   },
   "app/components/workflow/nodes/human-input/components/delivery-method/index.tsx": {
@@ -9325,9 +8316,6 @@
   "app/components/workflow/nodes/human-input/components/delivery-method/method-item.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/workflow/nodes/human-input/components/delivery-method/method-selector.tsx": {
@@ -9370,9 +8358,6 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -9380,17 +8365,11 @@
   "app/components/workflow/nodes/human-input/components/delivery-method/upgrade-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/workflow/nodes/human-input/components/form-content-preview.tsx": {
     "react/unsupported-syntax": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/workflow/nodes/human-input/components/form-content.tsx": {
@@ -9413,11 +8392,6 @@
       "count": 3
     }
   },
-  "app/components/workflow/nodes/human-input/components/single-run-form.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/workflow/nodes/human-input/components/timeout.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 2
@@ -9436,12 +8410,6 @@
   "app/components/workflow/nodes/human-input/panel.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
     }
   },
   "app/components/workflow/nodes/human-input/types.ts": {
@@ -9493,23 +8461,11 @@
   "app/components/workflow/nodes/if-else/components/condition-number-input.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
     }
   },
   "app/components/workflow/nodes/if-else/components/condition-wrap.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 2
     }
   },
   "app/components/workflow/nodes/if-else/default.ts": {
@@ -9522,11 +8478,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/nodes/if-else/panel.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/workflow/nodes/if-else/types.ts": {
     "erasable-syntax-only/enums": {
       "count": 2
@@ -9578,11 +8529,6 @@
       "count": 6
     }
   },
-  "app/components/workflow/nodes/knowledge-base/components/chunk-structure/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/workflow/nodes/knowledge-base/components/chunk-structure/instruction/index.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 2
@@ -9591,9 +8537,6 @@
   "app/components/workflow/nodes/knowledge-base/components/chunk-structure/selector.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/workflow/nodes/knowledge-base/components/index-method.tsx": {
@@ -9679,9 +8622,6 @@
   "app/components/workflow/nodes/knowledge-retrieval/components/metadata/add-condition.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-common-variable-selector.tsx": {
@@ -9759,20 +8699,11 @@
   "app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-trigger.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 2
     }
   },
   "app/components/workflow/nodes/knowledge-retrieval/default.ts": {
@@ -9890,9 +8821,6 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
     "ts/no-explicit-any": {
       "count": 3
     }
@@ -9900,9 +8828,6 @@
   "app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx": {
     "erasable-syntax-only/enums": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
     }
   },
   "app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/assets/index.tsx": {
@@ -9913,9 +8838,6 @@
   "app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/generated-result.tsx": {
     "style/multiline-ternary": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
     }
   },
   "app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx": {
@@ -9932,9 +8854,6 @@
   "app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/prompt-editor.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 6
     }
   },
   "app/components/workflow/nodes/llm/components/json-schema-config-modal/schema-editor.tsx": {
@@ -9994,9 +8913,6 @@
     }
   },
   "app/components/workflow/nodes/llm/components/structure-output.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -10006,11 +8922,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/nodes/llm/panel.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/workflow/nodes/llm/types.ts": {
     "erasable-syntax-only/enums": {
       "count": 2
@@ -10094,20 +9005,11 @@
   "app/components/workflow/nodes/loop/components/condition-number-input.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
     }
   },
   "app/components/workflow/nodes/loop/components/condition-wrap.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
     }
   },
   "app/components/workflow/nodes/loop/components/loop-variables/empty.tsx": {
@@ -10175,9 +9077,6 @@
     "no-restricted-imports": {
       "count": 2
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -10338,9 +9237,6 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -10392,9 +9288,6 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -10563,9 +9456,6 @@
   "app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/component.tsx": {
     "react/set-state-in-effect": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/workflow/note-node/note-editor/toolbar/color-picker.tsx": {
@@ -10696,16 +9586,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/panel/chat-variable-panel/components/variable-modal.sections.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
-    }
-  },
-  "app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/workflow/panel/chat-variable-panel/components/variable-type-select.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -10783,9 +9663,6 @@
     "react/set-state-in-effect": {
       "count": 4
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 11
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -10816,9 +9693,6 @@
     }
   },
   "app/components/workflow/panel/inputs-panel.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 4
     }
@@ -10844,14 +9718,6 @@
   "app/components/workflow/panel/version-history-panel/delete-confirm-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
-  "app/components/workflow/panel/version-history-panel/empty.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/workflow/panel/version-history-panel/filter/filter-item.tsx": {
@@ -10893,9 +9759,6 @@
   "app/components/workflow/panel/version-history-panel/restore-confirm-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
     }
   },
   "app/components/workflow/panel/version-history-panel/version-history-item.tsx": {
@@ -10907,29 +9770,13 @@
     }
   },
   "app/components/workflow/panel/workflow-preview.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
   },
-  "app/components/workflow/run/agent-log/agent-log-item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/workflow/run/agent-log/agent-log-nav-more.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/workflow/run/agent-log/agent-log-nav.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
     }
   },
   "app/components/workflow/run/agent-log/agent-log-trigger.tsx": {
@@ -10961,9 +9808,6 @@
     }
   },
   "app/components/workflow/run/iteration-log/iteration-log-trigger.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "unicorn/prefer-number-properties": {
       "count": 1
     }
@@ -10979,9 +9823,6 @@
     }
   },
   "app/components/workflow/run/loop-log/loop-log-trigger.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "unicorn/prefer-number-properties": {
       "count": 1
     }
@@ -11145,9 +9986,6 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 7
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -11209,9 +10047,6 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -11222,9 +10057,6 @@
     }
   },
   "app/components/workflow/variable-inspect/left.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -11233,9 +10065,6 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -11351,17 +10180,9 @@
       "count": 2
     }
   },
-  "app/education-apply/education-apply-page.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 11
-    }
-  },
   "app/education-apply/expire-notice-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
     }
   },
   "app/education-apply/hooks.ts": {
@@ -11388,17 +10209,9 @@
       "count": 1
     }
   },
-  "app/education-apply/user-info.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/education-apply/verify-state-modal.tsx": {
     "react/set-state-in-effect": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
     }
   },
   "app/forgot-password/ForgotPasswordForm.spec.tsx": {
@@ -11407,9 +10220,6 @@
     }
   },
   "app/init/InitPasswordPopup.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -11419,11 +10229,6 @@
       "count": 7
     }
   },
-  "app/reset-password/check-code/page.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "app/reset-password/layout.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -11432,35 +10237,12 @@
       "count": 1
     }
   },
-  "app/reset-password/page.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
-  "app/reset-password/set-password/page.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "app/signin/_header.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "app/signin/check-code/page.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
-  "app/signin/components/mail-and-code-auth.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/signin/components/mail-and-password-auth.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -11468,9 +10250,6 @@
   "app/signin/invite-settings/page.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 8
     }
   },
   "app/signin/layout.tsx": {
@@ -11485,23 +10264,10 @@
     "no-restricted-imports": {
       "count": 2
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
   },
-  "app/signup/check-code/page.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
-  "app/signup/components/input-mail.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "app/signup/layout.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -11515,11 +10281,6 @@
       "count": 1
     }
   },
-  "app/signup/set-password/page.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "context/app-context-provider.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1