Updated buttons to @/components/ui/button (#2312)

webview-ui/src/components/history/HistoryView.tsx

@@ -3,8 +3,8 @@ import { DeleteTaskDialog } from "./DeleteTaskDialog"
 import { BatchDeleteTaskDialog } from "./BatchDeleteTaskDialog"
 import prettyBytes from "pretty-bytes"
 import { Virtuoso } from "react-virtuoso"
+
 import {
-	VSCodeButton,
 	VSCodeTextField,
 	VSCodeRadioGroup,
 	VSCodeRadio,
@@ -76,8 +76,8 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 				<div className="flex justify-between items-center">
 					<h3 className="text-vscode-foreground m-0">{t("history:history")}</h3>
 					<div className="flex gap-2">
-						<VSCodeButton
-							appearance={isSelectionMode ? "primary" : "secondary"}
+						<Button
+							variant={isSelectionMode ? "default" : "secondary"}
 							onClick={toggleSelectionMode}
 							title={
 								isSelectionMode
@@ -88,8 +88,8 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 								className={`codicon ${isSelectionMode ? "codicon-check-all" : "codicon-checklist"} mr-1`}
 							/>
 							{isSelectionMode ? t("history:exitSelection") : t("history:selectionMode")}
-						</VSCodeButton>
-						<VSCodeButton onClick={onDone}>{t("history:done")}</VSCodeButton>
+						</Button>
+						<Button onClick={onDone}>{t("history:done")}</Button>
 					</div>
 				</div>
 				<div className="flex flex-col gap-2">
@@ -427,12 +427,12 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 						{t("history:selectedItems", { selected: selectedTaskIds.length, total: tasks.length })}
 					</div>
 					<div className="flex gap-2">
-						<VSCodeButton appearance="secondary" onClick={() => setSelectedTaskIds([])}>
+						<Button variant="secondary" onClick={() => setSelectedTaskIds([])}>
 							{t("history:clearSelection")}
-						</VSCodeButton>
-						<VSCodeButton appearance="primary" onClick={handleBatchDelete}>
+						</Button>
+						<Button variant="default" onClick={handleBatchDelete}>
 							{t("history:deleteSelected")}
-						</VSCodeButton>
+						</Button>
 					</div>
 				</div>
 			)}

webview-ui/src/components/mcp/McpView.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react"
+import { Button } from "@/components/ui/button"
 import {
-	VSCodeButton,
 	VSCodeCheckbox,
 	VSCodeLink,
 	VSCodePanels,
@@ -39,7 +39,7 @@ const McpView = ({ onDone }: McpViewProps) => {
 		<Tab>
 			<TabHeader className="flex justify-between items-center">
 				<h3 className="text-vscode-foreground m-0">{t("mcp:title")}</h3>
-				<VSCodeButton onClick={onDone}>{t("mcp:done")}</VSCodeButton>
+				<Button onClick={onDone}>{t("mcp:done")}</Button>
 			</TabHeader>
 
 			<TabContent>
@@ -100,24 +100,24 @@ const McpView = ({ onDone }: McpViewProps) => {
 
 						{/* Edit Settings Buttons */}
 						<div style={{ marginTop: "10px", width: "100%", display: "flex", gap: "10px" }}>
-							<VSCodeButton
-								appearance="secondary"
+							<Button
+								variant="secondary"
 								style={{ flex: 1 }}
 								onClick={() => {
 									vscode.postMessage({ type: "openMcpSettings" })
 								}}>
 								<span className="codicon codicon-edit" style={{ marginRight: "6px" }}></span>
 								{t("mcp:editGlobalMCP")}
-							</VSCodeButton>
-							<VSCodeButton
-								appearance="secondary"
+							</Button>
+							<Button
+								variant="secondary"
 								style={{ flex: 1 }}
 								onClick={() => {
 									vscode.postMessage({ type: "openProjectMcpSettings" })
 								}}>
 								<span className="codicon codicon-edit" style={{ marginRight: "6px" }}></span>
 								{t("mcp:editProjectMCP")}
-							</VSCodeButton>
+							</Button>
 						</div>
 					</>
 				)}
@@ -229,19 +229,21 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowM
 				<div
 					style={{ display: "flex", alignItems: "center", marginRight: "8px" }}
 					onClick={(e) => e.stopPropagation()}>
-					<VSCodeButton
-						appearance="icon"
+					<Button
+						variant="ghost"
+						size="icon"
 						onClick={() => setShowDeleteConfirm(true)}
 						style={{ marginRight: "8px" }}>
 						<span className="codicon codicon-trash" style={{ fontSize: "14px" }}></span>
-					</VSCodeButton>
-					<VSCodeButton
-						appearance="icon"
+					</Button>
+					<Button
+						variant="ghost"
+						size="icon"
 						onClick={handleRestart}
 						disabled={server.status === "connecting"}
 						style={{ marginRight: "8px" }}>
 						<span className="codicon codicon-refresh" style={{ fontSize: "14px" }}></span>
-					</VSCodeButton>
+					</Button>
 					<div
 						role="switch"
 						aria-checked={!server.disabled}
@@ -320,15 +322,15 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowM
 						}}>
 						{server.error}
 					</div>
-					<VSCodeButton
-						appearance="secondary"
+					<Button
+						variant="secondary"
 						onClick={handleRestart}
 						disabled={server.status === "connecting"}
 						style={{ width: "calc(100% - 20px)", margin: "0 10px 10px 10px" }}>
 						{server.status === "connecting"
 							? t("mcp:serverStatus.retrying")
 							: t("mcp:serverStatus.retryConnection")}
-					</VSCodeButton>
+					</Button>
 				</div>
 			) : (
 				isExpanded && (
@@ -444,12 +446,12 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowM
 						</DialogDescription>
 					</DialogHeader>
 					<DialogFooter>
-						<VSCodeButton appearance="secondary" onClick={() => setShowDeleteConfirm(false)}>
+						<Button variant="secondary" onClick={() => setShowDeleteConfirm(false)}>
 							{t("mcp:deleteDialog.cancel")}
-						</VSCodeButton>
-						<VSCodeButton appearance="primary" onClick={handleDelete}>
+						</Button>
+						<Button variant="default" onClick={handleDelete}>
 							{t("mcp:deleteDialog.delete")}
-						</VSCodeButton>
+						</Button>
 					</DialogFooter>
 				</DialogContent>
 			</Dialog>

webview-ui/src/components/prompts/PromptsView.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useMemo, useCallback } from "react"
+import { Button } from "@/components/ui/button"
 import {
-	VSCodeButton,
 	VSCodeTextArea,
 	VSCodeDropdown,
 	VSCodeOption,
@@ -393,7 +393,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 		<Tab>
 			<TabHeader className="flex justify-between items-center">
 				<h3 className="text-vscode-foreground m-0">{t("prompts:title")}</h3>
-				<VSCodeButton onClick={onDone}>{t("prompts:done")}</VSCodeButton>
+				<Button onClick={onDone}>{t("prompts:done")}</Button>
 			</TabHeader>
 
 			<TabContent>
@@ -401,15 +401,17 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 					<div onClick={(e) => e.stopPropagation()} className="flex justify-between items-center mb-3">
 						<h3 className="text-vscode-foreground m-0">{t("prompts:modes.title")}</h3>
 						<div className="flex gap-2">
-							<VSCodeButton
-								appearance="icon"
+							<Button
+								variant="ghost"
+								size="icon"
 								onClick={openCreateModeDialog}
 								title={t("prompts:modes.createNewMode")}>
 								<span className="codicon codicon-add"></span>
-							</VSCodeButton>
+							</Button>
 							<div className="relative inline-block">
-								<VSCodeButton
-									appearance="icon"
+								<Button
+									variant="ghost"
+									size="icon"
 									title={t("prompts:modes.editModesConfig")}
 									className="flex"
 									onClick={(e: React.MouseEvent) => {
@@ -422,7 +424,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 										setTimeout(() => setShowConfigMenu(false), 200)
 									}}>
 									<span className="codicon codicon-json"></span>
-								</VSCodeButton>
+								</Button>
 								{showConfigMenu && (
 									<div
 										onClick={(e) => e.stopPropagation()}
@@ -512,8 +514,9 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 										}}
 										className="w-full"
 									/>
-									<VSCodeButton
-										appearance="icon"
+									<Button
+										variant="ghost"
+										size="icon"
 										title={t("prompts:createModeDialog.deleteMode")}
 										onClick={() => {
 											vscode.postMessage({
@@ -522,7 +525,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 											})
 										}}>
 										<span className="codicon codicon-trash"></span>
-									</VSCodeButton>
+									</Button>
 								</div>
 							</div>
 						</div>
@@ -531,8 +534,9 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 						<div className="flex justify-between items-center mb-1">
 							<div className="font-bold">{t("prompts:roleDefinition.title")}</div>
 							{!findModeBySlug(mode, customModes) && (
-								<VSCodeButton
-									appearance="icon"
+								<Button
+									variant="ghost"
+									size="icon"
 									onClick={() => {
 										const currentMode = getCurrentMode()
 										if (currentMode?.slug) {
@@ -542,7 +546,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 									title={t("prompts:roleDefinition.resetToDefault")}
 									data-testid="role-definition-reset">
 									<span className="codicon codicon-discard"></span>
-								</VSCodeButton>
+								</Button>
 							)}
 						</div>
 						<div className="text-sm text-vscode-descriptionForeground mb-2">
@@ -613,17 +617,18 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 							<div className="flex justify-between items-center mb-1">
 								<div className="font-bold">{t("prompts:tools.title")}</div>
 								{findModeBySlug(mode, customModes) && (
-									<VSCodeButton
-										appearance="icon"
-										onClick={() => setIsToolsEditMode(!isToolsEditMode)}
-										title={
+									<Button
+											variant="ghost"
+											size="icon"
+											onClick={() => setIsToolsEditMode(!isToolsEditMode)}
+											title={
 											isToolsEditMode
 												? t("prompts:tools.doneEditing")
 												: t("prompts:tools.editTools")
 										}>
 										<span
 											className={`codicon codicon-${isToolsEditMode ? "check" : "edit"}`}></span>
-									</VSCodeButton>
+									</Button>
 								)}
 							</div>
 							{!findModeBySlug(mode, customModes) && (
@@ -705,8 +710,9 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 							}}>
 							<div style={{ fontWeight: "bold" }}>{t("prompts:customInstructions.title")}</div>
 							{!findModeBySlug(mode, customModes) && (
-								<VSCodeButton
-									appearance="icon"
+								<Button
+									variant="ghost"
+									size="icon"
 									onClick={() => {
 										const currentMode = getCurrentMode()
 										if (currentMode?.slug) {
@@ -716,7 +722,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 									title={t("prompts:customInstructions.resetToDefault")}
 									data-testid="custom-instructions-reset">
 									<span className="codicon codicon-discard"></span>
-								</VSCodeButton>
+								</Button>
 							)}
 						</div>
 						<div
@@ -814,8 +820,8 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 						borderBottom: "1px solid var(--vscode-input-border)",
 					}}>
 					<div style={{ display: "flex", gap: "8px" }}>
-						<VSCodeButton
-							appearance="primary"
+						<Button
+							variant="default"
 							onClick={() => {
 								const currentMode = getCurrentMode()
 								if (currentMode) {
@@ -827,9 +833,10 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 							}}
 							data-testid="preview-prompt-button">
 							{t("prompts:systemPrompt.preview")}
-						</VSCodeButton>
-						<VSCodeButton
-							appearance="icon"
+						</Button>
+						<Button
+							variant="ghost"
+							size="icon"
 							title={t("prompts:systemPrompt.copy")}
 							onClick={() => {
 								const currentMode = getCurrentMode()
@@ -842,7 +849,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 							}}
 							data-testid="copy-prompt-button">
 							<span className="codicon codicon-copy"></span>
-						</VSCodeButton>
+						</Button>
 					</div>
 
 					{/* Custom System Prompt Disclosure */}
@@ -1004,12 +1011,13 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 								marginBottom: "4px",
 							}}>
 							<div style={{ fontWeight: "bold" }}>{t("prompts:supportPrompts.prompt")}</div>
-							<VSCodeButton
-								appearance="icon"
+							<Button
+								variant="ghost"
+								size="icon"
 								onClick={() => handleSupportReset(activeSupportTab)}
 								title={t("prompts:supportPrompts.resetPrompt", { promptType: activeSupportTab })}>
 								<span className="codicon codicon-discard"></span>
-							</VSCodeButton>
+							</Button>
 						</div>
 
 						<VSCodeTextArea
@@ -1091,12 +1099,12 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 											alignItems: "center",
 											gap: 8,
 										}}>
-										<VSCodeButton
+										<Button
+											variant="default"
 											onClick={handleTestEnhancement}
-											disabled={isEnhancing}
-											appearance="primary">
+											disabled={isEnhancing}>
 											{t("prompts:supportPrompts.enhance.previewButton")}
-										</VSCodeButton>
+										</Button>
 									</div>
 								</div>
 							</>
@@ -1132,8 +1140,9 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 								overflowY: "auto",
 								minHeight: 0,
 							}}>
-							<VSCodeButton
-								appearance="icon"
+							<Button
+								variant="ghost"
+								size="icon"
 								onClick={() => setIsCreateModeDialogOpen(false)}
 								style={{
 									position: "absolute",
@@ -1141,7 +1150,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 									right: "20px",
 								}}>
 								<span className="codicon codicon-close"></span>
-							</VSCodeButton>
+							</Button>
 							<h2 style={{ margin: "0 0 16px" }}>{t("prompts:createModeDialog.title")}</h2>
 							<div style={{ marginBottom: "16px" }}>
 								<div style={{ fontWeight: "bold", marginBottom: "4px" }}>
@@ -1328,12 +1337,12 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 								borderTop: "1px solid var(--vscode-editor-lineHighlightBorder)",
 								backgroundColor: "var(--vscode-editor-background)",
 							}}>
-							<VSCodeButton onClick={() => setIsCreateModeDialogOpen(false)}>
+							<Button variant="secondary" onClick={() => setIsCreateModeDialogOpen(false)}>
 								{t("prompts:createModeDialog.buttons.cancel")}
-							</VSCodeButton>
-							<VSCodeButton appearance="primary" onClick={handleCreateMode}>
+							</Button>
+							<Button variant="default" onClick={handleCreateMode}>
 								{t("prompts:createModeDialog.buttons.create")}
-							</VSCodeButton>
+							</Button>
 						</div>
 					</div>
 				</div>
@@ -1366,8 +1375,9 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 								overflowY: "auto",
 								minHeight: 0,
 							}}>
-							<VSCodeButton
-								appearance="icon"
+							<Button
+								variant="ghost"
+								size="icon"
 								onClick={() => setIsDialogOpen(false)}
 								style={{
 									position: "absolute",
@@ -1375,7 +1385,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 									right: "20px",
 								}}>
 								<span className="codicon codicon-close"></span>
-							</VSCodeButton>
+							</Button>
 							<h2 style={{ margin: "0 0 16px" }}>
 								{selectedPromptTitle ||
 									t("prompts:systemPrompt.title", { modeName: getCurrentMode()?.name || "Code" })}
@@ -1404,9 +1414,9 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 								borderTop: "1px solid var(--vscode-editor-lineHighlightBorder)",
 								backgroundColor: "var(--vscode-editor-background)",
 							}}>
-							<VSCodeButton onClick={() => setIsDialogOpen(false)}>
+							<Button variant="secondary" onClick={() => setIsDialogOpen(false)}>
 								{t("prompts:createModeDialog.close")}
-							</VSCodeButton>
+							</Button>
 						</div>
 					</div>
 				</div>

webview-ui/src/components/settings/SettingsView.tsx

@@ -1,6 +1,5 @@
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react"
 import { useAppTranslation } from "@/i18n/TranslationContext"
-import { Button as VSCodeButton } from "vscrui"
 import {
 	CheckCheck,
 	SquareMousePointer,
@@ -339,8 +338,8 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone },
 					</DropdownMenu>
 				</div>
 				<div className="flex gap-2">
-					<VSCodeButton
-						appearance={isSettingValid ? "primary" : "secondary"}
+					<Button
+						variant={isSettingValid ? "default" : "secondary"}
 						className={!isSettingValid ? "!border-vscode-errorForeground" : ""}
 						title={
 							!isSettingValid
@@ -353,13 +352,13 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone },
 						disabled={!isChangeDetected || !isSettingValid}
 						data-testid="save-button">
 						{t("settings:common.save")}
-					</VSCodeButton>
-					<VSCodeButton
-						appearance="secondary"
+					</Button>
+					<Button
+						variant="secondary"
 						title={t("settings:header.doneButtonTooltip")}
 						onClick={() => checkUnsaveChanges(onDone)}>
 						{t("settings:common.done")}
-					</VSCodeButton>
+					</Button>
 				</div>
 			</TabHeader>