diff --git a/.agents/skills/frontend-testing/references/mocking.md b/.agents/skills/frontend-testing/references/mocking.md
index f58377c4a5..82d9c21cbb 100644
--- a/.agents/skills/frontend-testing/references/mocking.md
+++ b/.agents/skills/frontend-testing/references/mocking.md
@@ -20,11 +20,11 @@
 ```typescript
 // ❌ WRONG: Don't mock base components
 vi.mock('@/app/components/base/loading', () => () => <div>Loading</div>)
-vi.mock('@/app/components/base/button', () => ({ children }: any) => <button>{children}</button>)
+vi.mock('@/app/components/base/ui/button', () => ({ children }: any) => <button>{children}</button>)
 
 // ✅ CORRECT: Import and use real base components
 import Loading from '@/app/components/base/loading'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 // They will render normally in tests
 ```
 
diff --git a/web/app/components/app/app-publisher/sections.tsx b/web/app/components/app/app-publisher/sections.tsx
index 6d02c67e92..54fbcee672 100644
--- a/web/app/components/app/app-publisher/sections.tsx
+++ b/web/app/components/app/app-publisher/sections.tsx
@@ -234,7 +234,7 @@ export const PublisherSummarySection = ({
                       />
                       <TooltipContent
                         placement="top"
-                        popupClassName="w-[180px]"
+                        className="w-[180px]"
                       >
                         {t(workflowTypeSwitchConfig.tipKey, { ns: 'workflow' })}
                       </TooltipContent>
diff --git a/web/app/components/evaluation/components/batch-test-panel/index.tsx b/web/app/components/evaluation/components/batch-test-panel/index.tsx
index 11af19f4d5..895eeb3f59 100644
--- a/web/app/components/evaluation/components/batch-test-panel/index.tsx
+++ b/web/app/components/evaluation/components/batch-test-panel/index.tsx
@@ -2,7 +2,7 @@
 
 import type { BatchTestTab, EvaluationResourceProps } from '../../types'
 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 { useSaveEvaluationConfigMutation } from '@/service/use-evaluation'
 import { cn } from '@/utils/classnames'
diff --git a/web/app/components/evaluation/components/batch-test-panel/input-fields-tab.tsx b/web/app/components/evaluation/components/batch-test-panel/input-fields-tab.tsx
index 8d147dbedf..27b1b062cb 100644
--- a/web/app/components/evaluation/components/batch-test-panel/input-fields-tab.tsx
+++ b/web/app/components/evaluation/components/batch-test-panel/input-fields-tab.tsx
@@ -1,6 +1,6 @@
 import type { EvaluationResourceProps } from '../../types'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { getEvaluationMockConfig } from '../../mock'
 import InputFieldsRequirements from './input-fields/input-fields-requirements'
 import UploadRunPopover from './input-fields/upload-run-popover'
diff --git a/web/app/components/evaluation/components/batch-test-panel/input-fields/upload-run-popover.tsx b/web/app/components/evaluation/components/batch-test-panel/input-fields/upload-run-popover.tsx
index 3a54d9af0a..0be65bd654 100644
--- a/web/app/components/evaluation/components/batch-test-panel/input-fields/upload-run-popover.tsx
+++ b/web/app/components/evaluation/components/batch-test-panel/input-fields/upload-run-popover.tsx
@@ -2,7 +2,7 @@ import type { ChangeEvent, DragEvent } from 'react'
 import type { InputField } from './input-fields-utils'
 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 {
   Popover,
   PopoverContent,
diff --git a/web/app/components/evaluation/components/conditions-section/condition-group.tsx b/web/app/components/evaluation/components/conditions-section/condition-group.tsx
index 7cb73f1ca7..1f2ac8de43 100644
--- a/web/app/components/evaluation/components/conditions-section/condition-group.tsx
+++ b/web/app/components/evaluation/components/conditions-section/condition-group.tsx
@@ -8,7 +8,7 @@ import type {
 } from '../../types'
 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 Input from '@/app/components/base/input'
 import {
   Select,
diff --git a/web/app/components/evaluation/components/metric-section/builtin-metric-card.tsx b/web/app/components/evaluation/components/metric-section/builtin-metric-card.tsx
index 8bdba64d21..3fa84c946a 100644
--- a/web/app/components/evaluation/components/metric-section/builtin-metric-card.tsx
+++ b/web/app/components/evaluation/components/metric-section/builtin-metric-card.tsx
@@ -4,7 +4,7 @@ import type { EvaluationMetric, EvaluationResourceProps } from '../../types'
 import type { NodeInfo } from '@/types/evaluation'
 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 {
   DropdownMenu,
   DropdownMenuContent,
diff --git a/web/app/components/evaluation/components/metric-section/custom-metric-card.tsx b/web/app/components/evaluation/components/metric-section/custom-metric-card.tsx
index bf86f0e0ba..3e06b0a637 100644
--- a/web/app/components/evaluation/components/metric-section/custom-metric-card.tsx
+++ b/web/app/components/evaluation/components/metric-section/custom-metric-card.tsx
@@ -3,7 +3,7 @@
 import type { EvaluationMetric, EvaluationResourceProps } from '../../types'
 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 { cn } from '@/utils/classnames'
 import { isCustomMetricConfigured, useEvaluationStore } from '../../store'
 import CustomMetricEditorCard from '../custom-metric-editor'
diff --git a/web/app/components/evaluation/components/metric-selector/index.tsx b/web/app/components/evaluation/components/metric-selector/index.tsx
index 4870952b9b..2b690ee94c 100644
--- a/web/app/components/evaluation/components/metric-selector/index.tsx
+++ b/web/app/components/evaluation/components/metric-selector/index.tsx
@@ -4,8 +4,8 @@ import type { ChangeEvent } from 'react'
 import type { MetricSelectorProps } from './types'
 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 {
   Popover,
   PopoverContent,
@@ -21,7 +21,6 @@ import { useMetricSelectorData } from './use-metric-selector-data'
 const MetricSelector = ({
   resourceType,
   resourceId,
-  triggerVariant = 'ghost-accent',
   triggerClassName,
   triggerStyle = 'button',
 }: MetricSelectorProps) => {
@@ -69,14 +68,14 @@ const MetricSelector = ({
         render={(
           triggerStyle === 'text'
             ? (
-                <button type="button" className={cn('inline-flex items-center text-text-accent system-sm-medium', triggerClassName)}>
-                  <span aria-hidden="true" className="i-ri-add-line mr-1 h-4 w-4" />
+                <button type="button" className={cn('inline-flex items-center system-sm-medium text-text-accent', triggerClassName)}>
+                  <span aria-hidden="true" className="mr-1 i-ri-add-line h-4 w-4" />
                   {t('metrics.add')}
                 </button>
               )
             : (
-                <Button variant={triggerVariant} className={triggerClassName}>
-                  <span aria-hidden="true" className="i-ri-add-line mr-1 h-4 w-4" />
+                <Button variant="ghost-accent" className={triggerClassName}>
+                  <span aria-hidden="true" className="mr-1 i-ri-add-line h-4 w-4" />
                   {t('metrics.add')}
                 </Button>
               )
diff --git a/web/app/components/evaluation/components/metric-selector/types.ts b/web/app/components/evaluation/components/metric-selector/types.ts
index ff51bd57af..102329701e 100644
--- a/web/app/components/evaluation/components/metric-selector/types.ts
+++ b/web/app/components/evaluation/components/metric-selector/types.ts
@@ -2,7 +2,6 @@ import type { EvaluationMetric, EvaluationResourceProps, MetricOption } from '..
 import type { NodeInfo } from '@/types/evaluation'
 
 export type MetricSelectorProps = EvaluationResourceProps & {
-  triggerVariant?: 'primary' | 'warning' | 'secondary' | 'secondary-accent' | 'ghost' | 'ghost-accent' | 'tertiary'
   triggerClassName?: string
   triggerStyle?: 'button' | 'text'
 }
diff --git a/web/app/components/evaluation/components/pipeline/pipeline-batch-actions.tsx b/web/app/components/evaluation/components/pipeline/pipeline-batch-actions.tsx
index 086de8f8da..2cc673aa2c 100644
--- a/web/app/components/evaluation/components/pipeline/pipeline-batch-actions.tsx
+++ b/web/app/components/evaluation/components/pipeline/pipeline-batch-actions.tsx
@@ -3,7 +3,7 @@
 import type { EvaluationResourceProps } from '../../types'
 import type { InputField } from '../batch-test-panel/input-fields/input-fields-utils'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { getEvaluationMockConfig } from '../../mock'
 import { isEvaluationRunnable, useEvaluationResource } from '../../store'
 import UploadRunPopover from '../batch-test-panel/input-fields/upload-run-popover'
diff --git a/web/app/components/snippets/components/panel/index.tsx b/web/app/components/snippets/components/panel/index.tsx
index 96de81d2ee..a87d59e03a 100644
--- a/web/app/components/snippets/components/panel/index.tsx
+++ b/web/app/components/snippets/components/panel/index.tsx
@@ -4,7 +4,7 @@ import type { SortableItem } from '@/app/components/rag-pipeline/components/pane
 import type { SnippetInputField } from '@/models/snippet'
 import { memo, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import FieldListContainer from '@/app/components/rag-pipeline/components/panel/input-field/field-list/field-list-container'
 
 type SnippetInputFieldPanelProps = {
diff --git a/web/app/components/snippets/components/publish-menu.tsx b/web/app/components/snippets/components/publish-menu.tsx
index 7ef3d43c86..0a10f7606c 100644
--- a/web/app/components/snippets/components/publish-menu.tsx
+++ b/web/app/components/snippets/components/publish-menu.tsx
@@ -2,7 +2,7 @@
 
 import type { SnippetDetailUIModel } from '@/models/snippet'
 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'
 
 const PublishMenu = ({
diff --git a/web/app/components/snippets/components/snippet-import-dsl-dialog.tsx b/web/app/components/snippets/components/snippet-import-dsl-dialog.tsx
index b9c8dc88ad..832372315e 100644
--- a/web/app/components/snippets/components/snippet-import-dsl-dialog.tsx
+++ b/web/app/components/snippets/components/snippet-import-dsl-dialog.tsx
@@ -4,8 +4,8 @@ import { useDebounceFn, useKeyPress } from 'ahooks'
 import { useMemo, useState } 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 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 {
@@ -163,14 +163,14 @@ const SnippetImportDSLDialog = ({
     <>
       <Dialog open={show} onOpenChange={open => !open && onClose()}>
         <DialogContent className="w-[520px] p-0">
-          <div className="flex items-center justify-between pb-3 pl-6 pr-5 pt-6">
-            <DialogTitle className="text-text-primary title-2xl-semi-bold">
+          <div className="flex items-center justify-between pt-6 pr-5 pb-3 pl-6">
+            <DialogTitle className="title-2xl-semi-bold text-text-primary">
               {t('importFromDSL', { ns: 'app' })}
             </DialogTitle>
-            <DialogCloseButton className="right-5 top-6 h-8 w-8" />
+            <DialogCloseButton className="top-6 right-5 h-8 w-8" />
           </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">
             {[
               { key: SnippetImportDSLTab.FromFile, label: t('importFromDSLFile', { ns: 'app' }) },
               { key: SnippetImportDSLTab.FromURL, label: t('importFromDSLUrl', { ns: 'app' }) },
@@ -202,7 +202,7 @@ const SnippetImportDSLDialog = ({
             )}
             {currentTab === SnippetImportDSLTab.FromURL && (
               <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}
@@ -232,10 +232,10 @@ const SnippetImportDSLDialog = ({
       <Dialog open={showVersionMismatchDialog} onOpenChange={open => !open && setShowVersionMismatchDialog(false)}>
         <DialogContent className="w-[480px]">
           <div className="flex flex-col items-start gap-2 self-stretch pb-4">
-            <DialogTitle className="text-text-primary title-2xl-semi-bold">
+            <DialogTitle className="title-2xl-semi-bold text-text-primary">
               {t('newApp.appCreateDSLErrorTitle', { ns: 'app' })}
             </DialogTitle>
-            <div className="flex grow flex-col text-text-secondary system-md-regular">
+            <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 />
@@ -253,7 +253,7 @@ const SnippetImportDSLDialog = ({
             <Button variant="secondary" disabled={isImporting} onClick={() => setShowVersionMismatchDialog(false)}>
               {t('newApp.Cancel', { ns: 'app' })}
             </Button>
-            <Button variant="primary" destructive disabled={isImporting} onClick={handleConfirmImport}>
+            <Button variant="primary" tone="destructive" disabled={isImporting} onClick={handleConfirmImport}>
               {t('newApp.Confirm', { ns: 'app' })}
             </Button>
           </div>
diff --git a/web/app/components/snippets/components/snippet-run-panel.tsx b/web/app/components/snippets/components/snippet-run-panel.tsx
index 912342d732..cf9d91496c 100644
--- a/web/app/components/snippets/components/snippet-run-panel.tsx
+++ b/web/app/components/snippets/components/snippet-run-panel.tsx
@@ -12,7 +12,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 { useCheckInputsForms } from '@/app/components/base/chat/chat/check-input-forms-hooks'
 import { getProcessedInputs } from '@/app/components/base/chat/chat/utils'
 import Loading from '@/app/components/base/loading'
diff --git a/web/app/components/workflow/block-selector/snippets/index.tsx b/web/app/components/workflow/block-selector/snippets/index.tsx
index bf63f3b30e..b936ee7257 100644
--- a/web/app/components/workflow/block-selector/snippets/index.tsx
+++ b/web/app/components/workflow/block-selector/snippets/index.tsx
@@ -52,7 +52,7 @@ const LoadingSkeleton = () => {
           </div>
         ))}
       </div>
-      <div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-components-panel-bg-transparent to-background-default-subtle" />
+      <div className="pointer-events-none absolute inset-0 bg-linear-to-b from-components-panel-bg-transparent to-background-default-subtle" />
     </div>
   )
 }
@@ -147,7 +147,7 @@ const Snippets = ({
                         <TooltipContent
                           placement="left-start"
                           variant="plain"
-                          popupClassName="!bg-transparent !p-0"
+                          className="bg-transparent! p-0!"
                         >
                           <SnippetDetailCard snippet={item} />
                         </TooltipContent>
diff --git a/web/app/components/workflow/block-selector/snippets/snippet-empty-state.tsx b/web/app/components/workflow/block-selector/snippets/snippet-empty-state.tsx
index f0c00115c8..91ae9ae1ae 100644
--- a/web/app/components/workflow/block-selector/snippets/snippet-empty-state.tsx
+++ b/web/app/components/workflow/block-selector/snippets/snippet-empty-state.tsx
@@ -1,6 +1,6 @@
 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'
 
 type SnippetEmptyStateProps = {
   onCreate: () => void
diff --git a/web/app/components/workflow/create-snippet-dialog.tsx b/web/app/components/workflow/create-snippet-dialog.tsx
index edd362d7d1..182fddfcf4 100644
--- a/web/app/components/workflow/create-snippet-dialog.tsx
+++ b/web/app/components/workflow/create-snippet-dialog.tsx
@@ -8,7 +8,7 @@ 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 { Button } from '@/app/components/base/ui/button'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
 import { Dialog, DialogCloseButton, DialogContent, DialogPortal, DialogTitle } from '@/app/components/base/ui/dialog'