From beb1448441708b8f03254f886c115a202d02540e Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Sun, 28 Sep 2025 13:43:43 +0800
Subject: [PATCH] [Chore/Refactor] Add missing 'type' attribute on 'button'
 components (#26249)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: asukaminato0721 <30024051+asukaminato0721@users.noreply.github.com>
---
 .../document-detail-navigation-fix.test.tsx          |  2 +-
 web/app/components/app-sidebar/app-info.tsx          |  2 +-
 .../app-sidebar/sidebar-animation-issues.spec.tsx    |  4 ++--
 .../components/app/annotation/header-opts/index.tsx  |  8 ++++----
 web/app/components/app/create-app-modal/index.tsx    |  2 +-
 web/app/components/apps/app-card.tsx                 | 12 +++++++-----
 web/app/components/apps/new-app-card.tsx             |  5 +++--
 .../components/base/app-icon-picker/ImageInput.tsx   |  2 +-
 web/app/components/base/app-icon-picker/index.tsx    |  2 +-
 web/app/components/base/audio-btn/index.tsx          |  2 +-
 .../components/base/audio-gallery/AudioPlayer.tsx    |  2 +-
 web/app/components/base/chat/chat/content-switch.tsx |  4 ++--
 .../base/date-and-time-picker/calendar/item.tsx      |  2 +-
 .../base/date-and-time-picker/date-picker/header.tsx |  6 +++---
 .../year-and-month-picker/header.tsx                 |  2 +-
 web/app/components/base/mermaid/index.tsx            |  2 +-
 web/app/components/base/pagination/pagination.tsx    |  4 ++--
 web/app/components/base/select/locale-signin.tsx     |  2 +-
 web/app/components/base/select/locale.tsx            |  2 +-
 web/app/components/base/theme-selector.tsx           |  6 +++---
 web/app/components/base/toast/index.spec.tsx         |  4 ++--
 .../components/base/video-gallery/VideoPlayer.tsx    |  6 +++---
 .../pricing/plans/self-hosted-plan-item/button.tsx   |  2 +-
 .../list/template-card/edit-pipeline-info.tsx        |  2 +-
 web/app/components/datasets/create/website/index.tsx |  6 +++---
 .../components/datasets/documents/detail/index.tsx   |  2 +-
 .../datasets/documents/detail/metadata/index.tsx     |  2 +-
 web/app/components/datasets/documents/operations.tsx |  2 +-
 web/app/components/develop/doc.tsx                   |  4 ++--
 .../visual-editor/schema-node.tsx                    |  1 +
 web/app/components/workflow/run/tracing-panel.tsx    |  2 +-
 web/service/demo/index.tsx                           |  2 +-
 32 files changed, 56 insertions(+), 52 deletions(-)

diff --git a/web/__tests__/document-detail-navigation-fix.test.tsx b/web/__tests__/document-detail-navigation-fix.test.tsx
index 200ed09ea9..a358744998 100644
--- a/web/__tests__/document-detail-navigation-fix.test.tsx
+++ b/web/__tests__/document-detail-navigation-fix.test.tsx
@@ -54,7 +54,7 @@ const DocumentDetailWithFix = ({ datasetId, documentId }: { datasetId: string; d
 
   return (
     <div data-testid="document-detail-fixed">
-      <button data-testid="back-button-fixed" onClick={backToPrev}>
+      <button type="button" data-testid="back-button-fixed" onClick={backToPrev}>
         Back to Documents
       </button>
       <div data-testid="document-info">
diff --git a/web/app/components/app-sidebar/app-info.tsx b/web/app/components/app-sidebar/app-info.tsx
index d22577c9ad..baf52946df 100644
--- a/web/app/components/app-sidebar/app-info.tsx
+++ b/web/app/components/app-sidebar/app-info.tsx
@@ -260,7 +260,7 @@ const AppInfo = ({ expand, onlyShowDetail = false, openState = false, onDetailEx
   return (
     <div>
       {!onlyShowDetail && (
-        <button
+        <button type="button"
           onClick={() => {
             if (isCurrentWorkspaceEditor)
               setOpen(v => !v)
diff --git a/web/app/components/app-sidebar/sidebar-animation-issues.spec.tsx b/web/app/components/app-sidebar/sidebar-animation-issues.spec.tsx
index 7c5a7ec21f..54dde5fbd4 100644
--- a/web/app/components/app-sidebar/sidebar-animation-issues.spec.tsx
+++ b/web/app/components/app-sidebar/sidebar-animation-issues.spec.tsx
@@ -51,7 +51,7 @@ const MockSidebarToggleButton = ({ expand, onToggle }: { expand: boolean; onTogg
         className="shrink-0 px-4 py-3"
         data-testid="toggle-section"
       >
-        <button
+        <button type="button"
           className='flex h-6 w-6 cursor-pointer items-center justify-center'
           onClick={onToggle}
           data-testid="toggle-button"
@@ -66,7 +66,7 @@ const MockSidebarToggleButton = ({ expand, onToggle }: { expand: boolean; onTogg
 const MockAppInfo = ({ expand }: { expand: boolean }) => {
   return (
     <div data-testid="app-info" data-expand={expand}>
-      <button className='block w-full'>
+      <button type="button" className='block w-full'>
         {/* Container with layout mode switching - reproduces issue #3 */}
         <div className={`flex rounded-lg ${expand ? 'flex-col gap-2 p-2 pb-2.5' : 'items-start justify-center gap-1 p-1'}`}>
           {/* Icon container with justify-between to flex-col switch - reproduces issue #3 */}
diff --git a/web/app/components/app/annotation/header-opts/index.tsx b/web/app/components/app/annotation/header-opts/index.tsx
index 8c0ae37c8e..024f75867c 100644
--- a/web/app/components/app/annotation/header-opts/index.tsx
+++ b/web/app/components/app/annotation/header-opts/index.tsx
@@ -100,7 +100,7 @@ const HeaderOptions: FC<Props> = ({
   const Operations = () => {
     return (
       <div className="w-full py-1">
-        <button 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' onClick={() => {
+        <button type="button" 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' onClick={() => {
           setShowBulkImportModal(true)
         }}>
           <FilePlus02 className='h-4 w-4 text-text-tertiary' />
@@ -135,17 +135,17 @@ const HeaderOptions: FC<Props> = ({
                   ...list.map(item => [item.question, item.answer]),
                 ]}
               >
-                <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'>
+                <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>
                 </button>
               </CSVDownloader>
-              <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}>
+              <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>
               </button>
             </MenuItems>
           </Transition>
         </Menu>
-        <button
+        <button type="button"
           onClick={handleClearAll}
           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'
         >
diff --git a/web/app/components/app/create-app-modal/index.tsx b/web/app/components/app/create-app-modal/index.tsx
index cd73874c2c..3a07e6e0a1 100644
--- a/web/app/components/app/create-app-modal/index.tsx
+++ b/web/app/components/app/create-app-modal/index.tsx
@@ -141,7 +141,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
             </div>
             <div>
               <div className='mb-2 flex items-center'>
-                <button
+                <button type="button"
                   className='flex cursor-pointer items-center border-0 bg-transparent p-0'
                   onClick={() => setIsAppTypeExpanded(!isAppTypeExpanded)}
                 >
diff --git a/web/app/components/apps/app-card.tsx b/web/app/components/apps/app-card.tsx
index e96793ff72..cd3495e3c6 100644
--- a/web/app/components/apps/app-card.tsx
+++ b/web/app/components/apps/app-card.tsx
@@ -263,16 +263,17 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
           <span className='system-sm-regular text-text-secondary'>{t('app.editApp')}</span>
         </button>
         <Divider className="my-1" />
-        <button className='mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 hover:bg-state-base-hover' onClick={onClickDuplicate}>
+        <button type="button" className='mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 hover:bg-state-base-hover' onClick={onClickDuplicate}>
           <span className='system-sm-regular text-text-secondary'>{t('app.duplicate')}</span>
         </button>
-        <button className='mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 hover:bg-state-base-hover' onClick={onClickExport}>
+        <button type="button" className='mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 hover:bg-state-base-hover' onClick={onClickExport}>
           <span className='system-sm-regular text-text-secondary'>{t('app.export')}</span>
         </button>
         {(app.mode === 'completion' || app.mode === 'chat') && (
           <>
             <Divider className="my-1" />
             <button
+              type="button"
               className='mx-1 flex h-8 cursor-pointer items-center rounded-lg px-3 hover:bg-state-base-hover'
               onClick={onClickSwitch}
             >
@@ -284,14 +285,14 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
           (!systemFeatures.webapp_auth.enabled)
             ? <>
               <Divider className="my-1" />
-              <button className='mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 hover:bg-state-base-hover' onClick={onClickInstalledApp}>
+              <button type="button" className='mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 hover:bg-state-base-hover' onClick={onClickInstalledApp}>
                 <span className='system-sm-regular text-text-secondary'>{t('app.openInExplore')}</span>
               </button>
             </>
             : !(isGettingUserCanAccessApp || !userCanAccessApp?.result) && (
               <>
                 <Divider className="my-1" />
-                <button className='mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 hover:bg-state-base-hover' onClick={onClickInstalledApp}>
+                <button type="button" className='mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 hover:bg-state-base-hover' onClick={onClickInstalledApp}>
                   <span className='system-sm-regular text-text-secondary'>{t('app.openInExplore')}</span>
                 </button>
               </>
@@ -300,13 +301,14 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
         <Divider className="my-1" />
         {
           systemFeatures.webapp_auth.enabled && isCurrentWorkspaceEditor && <>
-            <button className='mx-1 flex h-8 cursor-pointer items-center rounded-lg px-3 hover:bg-state-base-hover' onClick={onClickAccessControl}>
+            <button type="button" className='mx-1 flex h-8 cursor-pointer items-center rounded-lg px-3 hover:bg-state-base-hover' onClick={onClickAccessControl}>
               <span className='text-sm leading-5 text-text-secondary'>{t('app.accessControl')}</span>
             </button>
             <Divider className='my-1' />
           </>
         }
         <button
+          type="button"
           className='group mx-1 flex h-8 cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-destructive-hover'
           onClick={onClickDelete}
         >
diff --git a/web/app/components/apps/new-app-card.tsx b/web/app/components/apps/new-app-card.tsx
index 6ceeb47982..7a10bc8527 100644
--- a/web/app/components/apps/new-app-card.tsx
+++ b/web/app/components/apps/new-app-card.tsx
@@ -59,15 +59,16 @@ const CreateAppCard = ({
     >
       <div className='grow rounded-t-xl p-2'>
         <div className='px-6 pb-1 pt-2 text-xs font-medium leading-[18px] text-text-tertiary'>{t('app.createApp')}</div>
-        <button className='mb-1 flex w-full cursor-pointer items-center rounded-lg px-6 py-[7px] text-[13px] font-medium leading-[18px] text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary' onClick={() => setShowNewAppModal(true)}>
+        <button type="button" className='mb-1 flex w-full cursor-pointer items-center rounded-lg px-6 py-[7px] text-[13px] font-medium leading-[18px] text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary' onClick={() => setShowNewAppModal(true)}>
           <FilePlus01 className='mr-2 h-4 w-4 shrink-0' />
           {t('app.newApp.startFromBlank')}
         </button>
-        <button className='flex w-full cursor-pointer items-center rounded-lg px-6 py-[7px] text-[13px] font-medium leading-[18px] text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary' onClick={() => setShowNewAppTemplateDialog(true)}>
+        <button type="button" className='flex w-full cursor-pointer items-center rounded-lg px-6 py-[7px] text-[13px] font-medium leading-[18px] text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary' onClick={() => setShowNewAppTemplateDialog(true)}>
           <FilePlus02 className='mr-2 h-4 w-4 shrink-0' />
           {t('app.newApp.startFromTemplate')}
         </button>
         <button
+          type="button"
           onClick={() => setShowCreateFromDSLModal(true)}
           className='flex w-full cursor-pointer items-center rounded-lg px-6 py-[7px] text-[13px] font-medium leading-[18px] text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary'>
           <FileArrow01 className='mr-2 h-4 w-4 shrink-0' />
diff --git a/web/app/components/base/app-icon-picker/ImageInput.tsx b/web/app/components/base/app-icon-picker/ImageInput.tsx
index 8d9ca50763..a074c8afac 100644
--- a/web/app/components/base/app-icon-picker/ImageInput.tsx
+++ b/web/app/components/base/app-icon-picker/ImageInput.tsx
@@ -106,7 +106,7 @@ const ImageInput: FC<UploaderProps> = ({
               <ImagePlus className="pointer-events-none mb-3 h-[30px] w-[30px]" />
               <div className="mb-[2px] text-sm font-medium">
                 <span className="pointer-events-none">{t('common.imageInput.dropImageHere')}&nbsp;</span>
-                <button className="text-components-button-primary-bg" onClick={() => inputRef.current?.click()}>{t('common.imageInput.browse')}</button>
+                <button type="button" className="text-components-button-primary-bg" onClick={() => inputRef.current?.click()}>{t('common.imageInput.browse')}</button>
                 <input
                   ref={inputRef} type="file" className="hidden"
                   onClick={e => ((e.target as HTMLInputElement).value = '')}
diff --git a/web/app/components/base/app-icon-picker/index.tsx b/web/app/components/base/app-icon-picker/index.tsx
index a8de07bf6b..3deb6a6c8f 100644
--- a/web/app/components/base/app-icon-picker/index.tsx
+++ b/web/app/components/base/app-icon-picker/index.tsx
@@ -117,7 +117,7 @@ const AppIconPicker: FC<AppIconPickerProps> = ({
     {!DISABLE_UPLOAD_IMAGE_AS_ICON && <div className="w-full p-2 pb-0">
       <div className='flex items-center justify-center gap-2 rounded-xl bg-background-body p-1 text-text-primary'>
         {tabs.map(tab => (
-          <button
+          <button 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',
diff --git a/web/app/components/base/audio-btn/index.tsx b/web/app/components/base/audio-btn/index.tsx
index 2a54a8ed73..d83a2beb91 100644
--- a/web/app/components/base/audio-btn/index.tsx
+++ b/web/app/components/base/audio-btn/index.tsx
@@ -85,7 +85,7 @@ const AudioBtn = ({
       <Tooltip
         popupContent={tooltipContent}
       >
-        <button
+        <button type="button"
           disabled={audioState === 'loading'}
           className={`box-border flex h-6 w-6 cursor-pointer items-center justify-center ${isAudition ? 'p-0.5' : 'rounded-md bg-white p-0'}`}
           onClick={handleToggle}
diff --git a/web/app/components/base/audio-gallery/AudioPlayer.tsx b/web/app/components/base/audio-gallery/AudioPlayer.tsx
index 67ded638a1..cad7adac02 100644
--- a/web/app/components/base/audio-gallery/AudioPlayer.tsx
+++ b/web/app/components/base/audio-gallery/AudioPlayer.tsx
@@ -288,7 +288,7 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({ src }) => {
   return (
     <div className='flex h-9 min-w-[240px] max-w-[420px] items-end gap-2 rounded-[10px] border border-components-panel-border-subtle bg-components-chat-input-audio-bg-alt p-2 shadow-xs backdrop-blur-sm'>
       <audio ref={audioRef} src={src} preload="auto"/>
-      <button className='inline-flex shrink-0 cursor-pointer items-center justify-center border-none text-text-accent transition-all hover:text-text-accent-secondary disabled:text-components-button-primary-bg-disabled' onClick={togglePlay} disabled={!isAudioAvailable}>
+      <button type="button" className='inline-flex shrink-0 cursor-pointer items-center justify-center border-none text-text-accent transition-all hover:text-text-accent-secondary disabled:text-components-button-primary-bg-disabled' onClick={togglePlay} disabled={!isAudioAvailable}>
         {isPlaying
           ? (
             <RiPauseCircleFill className='h-5 w-5' />
diff --git a/web/app/components/base/chat/chat/content-switch.tsx b/web/app/components/base/chat/chat/content-switch.tsx
index cf428f4cb4..948c08186f 100644
--- a/web/app/components/base/chat/chat/content-switch.tsx
+++ b/web/app/components/base/chat/chat/content-switch.tsx
@@ -16,7 +16,7 @@ export default function ContentSwitch({
   return (
     count && count > 1 && currentIndex !== undefined && (
       <div className="flex items-center justify-center pt-3.5 text-sm">
-        <button
+        <button type="button"
           className={`${prevDisabled ? 'opacity-30' : 'opacity-100'}`}
           disabled={prevDisabled}
           onClick={() => !prevDisabled && switchSibling('prev')}
@@ -26,7 +26,7 @@ export default function ContentSwitch({
         <span className="px-2 text-xs text-text-primary">
           {currentIndex + 1} / {count}
         </span>
-        <button
+        <button type="button"
           className={`${nextDisabled ? 'opacity-30' : 'opacity-100'}`}
           disabled={nextDisabled}
           onClick={() => !nextDisabled && switchSibling('next')}
diff --git a/web/app/components/base/date-and-time-picker/calendar/item.tsx b/web/app/components/base/date-and-time-picker/calendar/item.tsx
index 20e0b84aa4..1da8b9b3b5 100644
--- a/web/app/components/base/date-and-time-picker/calendar/item.tsx
+++ b/web/app/components/base/date-and-time-picker/calendar/item.tsx
@@ -13,7 +13,7 @@ const Item: FC<CalendarItemProps> = ({
   const isToday = date.isSame(dayjs(), 'date')
 
   return (
-    <button
+    <button type="button"
       onClick={() => onClick(date)}
       className={cn(
         'system-sm-medium relative flex items-center justify-center rounded-lg px-1 py-2',
diff --git a/web/app/components/base/date-and-time-picker/date-picker/header.tsx b/web/app/components/base/date-and-time-picker/date-picker/header.tsx
index 2631cdb5bc..80b7110e50 100644
--- a/web/app/components/base/date-and-time-picker/date-picker/header.tsx
+++ b/web/app/components/base/date-and-time-picker/date-picker/header.tsx
@@ -14,7 +14,7 @@ const Header: FC<DatePickerHeaderProps> = ({
   return (
     <div className='mx-2 mt-2 flex items-center'>
       <div className='flex-1'>
-        <button
+        <button type="button"
           onClick={handleOpenYearMonthPicker}
           className='system-md-semibold flex items-center gap-x-0.5 rounded-lg px-2 py-1.5 text-text-primary hover:bg-state-base-hover'
         >
@@ -22,13 +22,13 @@ const Header: FC<DatePickerHeaderProps> = ({
           <RiArrowDownSLine className='h-4 w-4 text-text-tertiary' />
         </button>
       </div>
-      <button
+      <button type="button"
         onClick={onClickPrevMonth}
         className='rounded-lg p-1.5 hover:bg-state-base-hover'
       >
         <RiArrowUpSLine className='h-[18px] w-[18px] text-text-secondary' />
       </button>
-      <button
+      <button type="button"
         onClick={onClickNextMonth}
         className='rounded-lg p-1.5 hover:bg-state-base-hover'
       >
diff --git a/web/app/components/base/date-and-time-picker/year-and-month-picker/header.tsx b/web/app/components/base/date-and-time-picker/year-and-month-picker/header.tsx
index 63923e6f5c..86407d2326 100644
--- a/web/app/components/base/date-and-time-picker/year-and-month-picker/header.tsx
+++ b/web/app/components/base/date-and-time-picker/year-and-month-picker/header.tsx
@@ -13,7 +13,7 @@ const Header: FC<YearAndMonthPickerHeaderProps> = ({
   return (
     <div className='flex border-b-[0.5px] border-divider-regular p-2 pb-1'>
       {/* Year and Month */}
-      <button
+      <button type="button"
         onClick={onClick}
         className='system-md-semibold flex items-center gap-x-0.5 rounded-lg px-2 py-1.5 text-text-primary hover:bg-state-base-hover'
       >
diff --git a/web/app/components/base/mermaid/index.tsx b/web/app/components/base/mermaid/index.tsx
index c1deab6e09..9b324349f8 100644
--- a/web/app/components/base/mermaid/index.tsx
+++ b/web/app/components/base/mermaid/index.tsx
@@ -541,7 +541,7 @@ const Flowchart = (props: FlowchartProps) => {
       {svgString && (
         <div className={themeClasses.mermaidDiv} style={{ objectFit: 'cover' }} onClick={handlePreviewClick}>
           <div className="absolute bottom-2 left-2 z-[100]">
-            <button
+            <button type="button"
               onClick={(e) => {
                 e.stopPropagation()
                 toggleTheme()
diff --git a/web/app/components/base/pagination/pagination.tsx b/web/app/components/base/pagination/pagination.tsx
index 6b99dcf9c0..07ace7bcf2 100644
--- a/web/app/components/base/pagination/pagination.tsx
+++ b/web/app/components/base/pagination/pagination.tsx
@@ -30,7 +30,7 @@ export const PrevButton = ({
   className,
   children,
   dataTestId,
-  as = <button />,
+  as = <button type="button" />,
   ...buttonProps
 }: ButtonProps) => {
   const pagination = React.useContext(PaginationContext)
@@ -65,7 +65,7 @@ export const NextButton = ({
   className,
   children,
   dataTestId,
-  as = <button />,
+  as = <button type="button" />,
   ...buttonProps
 }: ButtonProps) => {
   const pagination = React.useContext(PaginationContext)
diff --git a/web/app/components/base/select/locale-signin.tsx b/web/app/components/base/select/locale-signin.tsx
index 4ce6025edd..2d487c4be3 100644
--- a/web/app/components/base/select/locale-signin.tsx
+++ b/web/app/components/base/select/locale-signin.tsx
@@ -39,7 +39,7 @@ export default function LocaleSigninSelect({
             <div className="max-h-96 overflow-y-auto px-1 py-1 [mask-image:linear-gradient(to_bottom,transparent_0px,black_8px,black_calc(100%-8px),transparent_100%)]">
               {items.map((item) => {
                 return <MenuItem key={item.value}>
-                  <button
+                  <button type="button"
                     className={'group flex w-full items-center rounded-lg px-3 py-2 text-sm text-text-secondary data-[active]:bg-state-base-hover'}
                     onClick={(evt) => {
                       evt.preventDefault()
diff --git a/web/app/components/base/select/locale.tsx b/web/app/components/base/select/locale.tsx
index 8981f09ce3..cc5662f53b 100644
--- a/web/app/components/base/select/locale.tsx
+++ b/web/app/components/base/select/locale.tsx
@@ -39,7 +39,7 @@ export default function Select({
             <div className="px-1 py-1 ">
               {items.map((item) => {
                 return <MenuItem key={item.value}>
-                  <button
+                  <button type="button"
                     className={'group flex w-full items-center rounded-lg px-3 py-2 text-sm text-text-secondary data-[active]:bg-state-base-hover'}
                     onClick={(evt) => {
                       evt.preventDefault()
diff --git a/web/app/components/base/theme-selector.tsx b/web/app/components/base/theme-selector.tsx
index 8dfe1d2602..c6978960be 100644
--- a/web/app/components/base/theme-selector.tsx
+++ b/web/app/components/base/theme-selector.tsx
@@ -54,7 +54,7 @@ export default function ThemeSelector() {
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-[1000]'>
         <div className='flex w-[144px] flex-col items-start rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg'>
-          <button
+          <button type="button"
             className='flex w-full items-center gap-1 rounded-lg px-2 py-1.5 text-text-secondary hover:bg-state-base-hover'
             onClick={() => handleThemeChange('light')}
           >
@@ -66,7 +66,7 @@ export default function ThemeSelector() {
               <RiCheckLine className='h-4 w-4 text-text-accent' />
             </div>}
           </button>
-          <button
+          <button type="button"
             className='flex w-full items-center gap-1 rounded-lg px-2 py-1.5 text-text-secondary hover:bg-state-base-hover'
             onClick={() => handleThemeChange('dark')}
           >
@@ -78,7 +78,7 @@ export default function ThemeSelector() {
               <RiCheckLine className='h-4 w-4 text-text-accent' />
             </div>}
           </button>
-          <button
+          <button type="button"
             className='flex w-full items-center gap-1 rounded-lg px-2 py-1.5 text-text-secondary hover:bg-state-base-hover'
             onClick={() => handleThemeChange('system')}
           >
diff --git a/web/app/components/base/toast/index.spec.tsx b/web/app/components/base/toast/index.spec.tsx
index 2dac8d27ff..97540cf5b1 100644
--- a/web/app/components/base/toast/index.spec.tsx
+++ b/web/app/components/base/toast/index.spec.tsx
@@ -13,10 +13,10 @@ const TestComponent = () => {
 
   return (
     <div>
-      <button onClick={() => notify({ message: 'Notification message', type: 'info' })}>
+      <button type="button" onClick={() => notify({ message: 'Notification message', type: 'info' })}>
         Show Toast
       </button>
-      <button onClick={close}>Close Toast</button>
+      <button type="button" onClick={close}>Close Toast</button>
     </div>
   )
 }
diff --git a/web/app/components/base/video-gallery/VideoPlayer.tsx b/web/app/components/base/video-gallery/VideoPlayer.tsx
index d7c86a1af9..c2fcd6ee8d 100644
--- a/web/app/components/base/video-gallery/VideoPlayer.tsx
+++ b/web/app/components/base/video-gallery/VideoPlayer.tsx
@@ -234,13 +234,13 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ src }) => {
           </div>
           <div className={styles.controlsContent}>
             <div className={styles.leftControls}>
-              <button className={styles.playPauseButton} onClick={togglePlayPause}>
+              <button type="button" className={styles.playPauseButton} onClick={togglePlayPause}>
                 {isPlaying ? <PauseIcon /> : <PlayIcon />}
               </button>
               {!isSmallSize && (<span className={styles.time}>{formatTime(currentTime)} / {formatTime(duration)}</span>)}
             </div>
             <div className={styles.rightControls}>
-              <button className={styles.muteButton} onClick={toggleMute}>
+              <button type="button" className={styles.muteButton} onClick={toggleMute}>
                 {isMuted ? <UnmuteIcon /> : <MuteIcon />}
               </button>
               {!isSmallSize && (
@@ -264,7 +264,7 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ src }) => {
                   </div>
                 </div>
               )}
-              <button className={styles.fullscreenButton} onClick={toggleFullscreen}>
+              <button type="button" className={styles.fullscreenButton} onClick={toggleFullscreen}>
                 <FullscreenIcon />
               </button>
             </div>
diff --git a/web/app/components/billing/pricing/plans/self-hosted-plan-item/button.tsx b/web/app/components/billing/pricing/plans/self-hosted-plan-item/button.tsx
index 5308490d79..ffa4dbcb65 100644
--- a/web/app/components/billing/pricing/plans/self-hosted-plan-item/button.tsx
+++ b/web/app/components/billing/pricing/plans/self-hosted-plan-item/button.tsx
@@ -31,7 +31,7 @@ const Button = ({
   }, [theme])
 
   return (
-    <button
+    <button type="button"
       className={cn(
         'system-xl-semibold flex items-center gap-x-2 py-3 pl-5 pr-4',
         BUTTON_CLASSNAME[plan],
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 411611bcfc..86e0c0d1ce 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
@@ -99,7 +99,7 @@ const EditPipelineInfo = ({
           {t('datasetPipeline.editPipelineInfo')}
         </span>
       </div>
-      <button
+      <button type="button"
         className='absolute right-5 top-5 flex size-8 items-center justify-center'
         onClick={onClose}
       >
diff --git a/web/app/components/datasets/create/website/index.tsx b/web/app/components/datasets/create/website/index.tsx
index 80d6b52315..7190ca3228 100644
--- a/web/app/components/datasets/create/website/index.tsx
+++ b/web/app/components/datasets/create/website/index.tsx
@@ -61,7 +61,7 @@ const Website: FC<Props> = ({
           {t('datasetCreation.stepOne.website.chooseProvider')}
         </div>
         <div className='flex space-x-2'>
-          {ENABLE_WEBSITE_JINAREADER && <button
+          {ENABLE_WEBSITE_JINAREADER && <button type="button"
             className={cn('flex items-center justify-center rounded-lg px-4 py-2',
               selectedProvider === DataSourceProvider.jinaReader
                 ? 'system-sm-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg text-text-primary'
@@ -76,7 +76,7 @@ const Website: FC<Props> = ({
             <span className={cn(s.jinaLogo, 'mr-2')} />
             <span>Jina Reader</span>
           </button>}
-          {ENABLE_WEBSITE_FIRECRAWL && <button
+          {ENABLE_WEBSITE_FIRECRAWL && <button type="button"
             className={cn('rounded-lg px-4 py-2',
               selectedProvider === DataSourceProvider.fireCrawl
                 ? 'system-sm-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg text-text-primary'
@@ -90,7 +90,7 @@ const Website: FC<Props> = ({
           >
             🔥 Firecrawl
           </button>}
-          {ENABLE_WEBSITE_WATERCRAWL && <button
+          {ENABLE_WEBSITE_WATERCRAWL && <button type="button"
             className={cn('flex items-center justify-center rounded-lg px-4 py-2',
               selectedProvider === DataSourceProvider.waterCrawl
                 ? 'system-sm-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg text-text-primary'
diff --git a/web/app/components/datasets/documents/detail/index.tsx b/web/app/components/datasets/documents/detail/index.tsx
index f23412db3c..b4f47253fb 100644
--- a/web/app/components/datasets/documents/detail/index.tsx
+++ b/web/app/components/datasets/documents/detail/index.tsx
@@ -200,7 +200,7 @@ const DocumentDetail: FC<DocumentDetailProps> = ({ datasetId, documentId }) => {
               onUpdate={handleOperate}
               className='!w-[200px]'
             />
-            <button
+            <button type="button"
               className={style.layoutRightIcon}
               onClick={() => setShowMetadata(!showMetadata)}
             >
diff --git a/web/app/components/datasets/documents/detail/metadata/index.tsx b/web/app/components/datasets/documents/detail/metadata/index.tsx
index 54587dede6..4cb5fe97e9 100644
--- a/web/app/components/datasets/documents/detail/metadata/index.tsx
+++ b/web/app/components/datasets/documents/detail/metadata/index.tsx
@@ -107,7 +107,7 @@ const IconButton: FC<{
     <Tooltip
       popupContent={metadataMap[type].text}
     >
-      <button className={cn(s.iconWrapper, 'group', isChecked ? s.iconCheck : '')}>
+      <button type="button" className={cn(s.iconWrapper, 'group', isChecked ? s.iconCheck : '')}>
         <TypeIcon
           iconName={metadataMap[type].iconName || ''}
           className={`group-hover:bg-primary-600 ${isChecked ? '!bg-primary-600' : ''}`}
diff --git a/web/app/components/datasets/documents/operations.tsx b/web/app/components/datasets/documents/operations.tsx
index c1a27d3af8..4c23b700db 100644
--- a/web/app/components/datasets/documents/operations.tsx
+++ b/web/app/components/datasets/documents/operations.tsx
@@ -177,7 +177,7 @@ const Operations = ({
           popupClassName='text-text-secondary system-xs-medium'
           needsDelay={false}
         >
-          <button
+          <button type="button"
             className={cn('mr-2 cursor-pointer rounded-lg',
               !isListScene
                 ? 'border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg p-2 shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px] hover:border-components-button-secondary-border-hover hover:bg-components-button-secondary-bg-hover'
diff --git a/web/app/components/develop/doc.tsx b/web/app/components/develop/doc.tsx
index ef5e7022c1..82b6b00e44 100644
--- a/web/app/components/develop/doc.tsx
+++ b/web/app/components/develop/doc.tsx
@@ -168,7 +168,7 @@ const Doc = ({ appDetail }: IDocProps) => {
                 <span className="text-xs font-medium uppercase tracking-wide text-text-tertiary">
                   {t('appApi.develop.toc')}
                 </span>
-                <button
+                <button type="button"
                   onClick={() => setIsTocExpanded(false)}
                   className="group flex h-6 w-6 items-center justify-center rounded-md transition-colors hover:bg-state-base-hover"
                   aria-label="Close"
@@ -224,7 +224,7 @@ const Doc = ({ appDetail }: IDocProps) => {
             </nav>
           )
           : (
-            <button
+            <button type="button"
               onClick={() => setIsTocExpanded(true)}
               className="group flex h-11 w-11 items-center justify-center rounded-full border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg transition-all duration-150 hover:bg-background-default-hover hover:shadow-xl"
               aria-label="Open table of contents"
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx
index 36671ab050..4c20232df4 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx
@@ -99,6 +99,7 @@ const SchemaNode: FC<SchemaNodeProps> = ({
             indentLeft[depth - 1],
           )}>
             <button
+              type="button"
               onClick={handleExpand}
               className='py-0.5 text-text-tertiary hover:text-text-accent'
             >
diff --git a/web/app/components/workflow/run/tracing-panel.tsx b/web/app/components/workflow/run/tracing-panel.tsx
index 2346b08c9e..22d49792b9 100644
--- a/web/app/components/workflow/run/tracing-panel.tsx
+++ b/web/app/components/workflow/run/tracing-panel.tsx
@@ -109,7 +109,7 @@ const TracingPanel: FC<TracingPanelProps> = ({
           onMouseLeave={handleParallelMouseLeave}
         >
           <div className="mb-1 flex items-center">
-            <button
+            <button type="button"
               onClick={() => toggleCollapse(node.id)}
               className={cn(
                 'mr-2 transition-colors',
diff --git a/web/service/demo/index.tsx b/web/service/demo/index.tsx
index 50889770bd..aa02968549 100644
--- a/web/service/demo/index.tsx
+++ b/web/service/demo/index.tsx
@@ -51,7 +51,7 @@ const Service: FC = () => {
         </div>
 
         <div>
-          <button onClick={handleCreateApp}>Click me to Create App</button>
+          <button type="button" onClick={handleCreateApp}>Click me to Create App</button>
         </div>
 
         <div>