coder · aqandrew · May 16, 2025 · May 15, 2025 · May 15, 2025 · May 15, 2025
diff --git a/site/src/components/PaginationWidget/PageButtons.tsx b/site/src/components/PaginationWidget/PageButtons.tsx
@@ -1,11 +1,9 @@
-import { useTheme } from "@emotion/react";
-import Button from "@mui/material/Button";
+import { Button } from "components/Button/Button";
 import type { FC, ReactNode } from "react";
 
 type NumberedPageButtonProps = {
 	pageNumber: number;
 	totalPages: number;
-
 	onClick?: () => void;
 	highlighted?: boolean;
 	disabled?: boolean;
@@ -68,23 +66,10 @@ const BasePageButton: FC<BasePageButtonProps> = ({
 	highlighted = false,
 	disabled = false,
 }) => {
-	const theme = useTheme();
-
 	return (
 		<Button
-			css={
-				highlighted && {
-					borderColor: theme.roles.active.outline,
-					backgroundColor: theme.roles.active.background,
-
-					// Override the hover state with active colors, but not hover
-					// colors because clicking won't do anything.
-					"&:hover": {
-						borderColor: theme.roles.active.outline,
-						backgroundColor: theme.roles.active.background,
-					},
-				}
-			}
+			variant={highlighted ? "default" : "outline"}
+			size="icon"
 			aria-label={ariaLabel}
 			name={name}
 			disabled={disabled}

diff --git a/site/src/components/PaginationWidget/PaginationNavButton.tsx b/site/src/components/PaginationWidget/PaginationNavButton.tsx
@@ -1,6 +1,5 @@
-import { useTheme } from "@emotion/react";
-import Button from "@mui/material/Button";
 import Tooltip from "@mui/material/Tooltip";
+import { Button } from "components/Button/Button";
 import {
 	type ButtonHTMLAttributes,
 	type ReactNode,
@@ -32,7 +31,6 @@ function PaginationNavButtonCore({
 	disabledMessageTimeout = 3000,
 	...delegatedProps
 }: PaginationNavButtonProps) {
-	const theme = useTheme();
 	const [showDisabledMessage, setShowDisabledMessage] = useState(false);
 
 	// Inline state sync - this is safe/recommended by the React team in this case
@@ -63,25 +61,10 @@ function PaginationNavButtonCore({
 			 *   (mostly for giving direct UI feedback to those actions)
 			 */}
 			<Button
-				aria-disabled={disabled}
-				css={
-					disabled && {
-						borderColor: theme.palette.divider,
-						color: theme.palette.text.disabled,
-						cursor: "default",
-						"&:hover": {
-							backgroundColor: theme.palette.background.default,
-							borderColor: theme.palette.divider,
-						},
-					}
-				}
-				onClick={() => {
-					if (disabled) {
-						setShowDisabledMessage(true);
-					} else {
-						onClick();
-					}
-				}}
+				variant="outline"
+				size="icon"
+				disabled={disabled}
+				onClick={onClick}
 				{...delegatedProps}
 			/>
 		</Tooltip>

diff --git a/site/src/components/PaginationWidget/PaginationWidgetBase.tsx b/site/src/components/PaginationWidget/PaginationWidgetBase.tsx
@@ -59,7 +59,7 @@ export const PaginationWidgetBase: FC<PaginationWidgetBaseProps> = ({
 					}
 				}}
 			>
-				<ChevronLeftIcon className="size-icon-sm" />
+				<ChevronLeftIcon />
 			</PaginationNavButton>
 
 			{isMobile ? (
@@ -86,7 +86,7 @@ export const PaginationWidgetBase: FC<PaginationWidgetBaseProps> = ({
 					}
 				}}
 			>
-				<ChevronRightIcon className="size-icon-sm" />
+				<ChevronRightIcon />
 			</PaginationNavButton>
 		</div>
 	);

diff --git a/site/src/modules/resources/DownloadAgentLogsButton.tsx b/site/src/modules/resources/DownloadAgentLogsButton.tsx
@@ -1,5 +1,5 @@
 import DownloadOutlined from "@mui/icons-material/DownloadOutlined";
-import Button from "@mui/material/Button";
+import { Button } from "components/Button/Button";
 import { agentLogs } from "api/queries/workspaces";
 import type { WorkspaceAgent, WorkspaceAgentLog } from "api/typesGenerated";
 import { displayError } from "components/GlobalSnackbar/utils";
@@ -35,10 +35,9 @@ export const DownloadAgentLogsButton: FC<DownloadAgentLogsButtonProps> = ({
 
 	return (
 		<Button
-			startIcon={<DownloadOutlined />}
 			disabled={!isConnected || isDownloading}
-			variant="text"
-			size="small"
+			variant="subtle"
+			size="sm"
 			onClick={async () => {
 				try {
 					setIsDownloading(true);
@@ -57,7 +56,8 @@ export const DownloadAgentLogsButton: FC<DownloadAgentLogsButtonProps> = ({
 				}
 			}}
 		>
+			<DownloadOutlined />
 			{isDownloading ? "Downloading..." : "Download logs"}
 		</Button>
 	);
-};
+};
diff --git a/site/src/modules/resources/PortForwardButton.tsx b/site/src/modules/resources/PortForwardButton.tsx
@@ -2,7 +2,6 @@ import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 import LockIcon from "@mui/icons-material/Lock";
 import LockOpenIcon from "@mui/icons-material/LockOpen";
 import SensorsIcon from "@mui/icons-material/Sensors";
-import MUIButton from "@mui/material/Button";
 import CircularProgress from "@mui/material/CircularProgress";
 import FormControl from "@mui/material/FormControl";
 import Link from "@mui/material/Link";
@@ -77,26 +76,24 @@ export const PortForwardButton: FC<PortForwardButtonProps> = (props) => {
 	return (
 		<Popover>
 			<PopoverTrigger>
-				<MUIButton
+				<Button
 					disabled={!portsQuery.data}
-					size="small"
-					variant="text"
-					endIcon={<ChevronDownIcon className="size-4" />}
+					size="sm"
+					variant="subtle"
 					css={{ fontSize: 13, padding: "8px 12px" }}
-					startIcon={
-						portsQuery.data ? (
-							<div>
-								<span css={styles.portCount}>
-									{portsQuery.data.ports.length}
-								</span>
-							</div>
-						) : (
-							<CircularProgress size={10} />
-						)
-					}
 				>
+					{portsQuery.data ? (
+						<div>
+							<span css={styles.portCount}>
+								{portsQuery.data.ports.length}
+							</span>
+						</div>
+					) : (
+						<CircularProgress size={10} />
+					)}
 					Open ports
-				</MUIButton>
+					<ChevronDownIcon className="size-4" />
+				</Button>
 			</PopoverTrigger>
 			<PopoverContent horizontal="right" classes={{ paper }}>
 				<PortForwardPopoverView
@@ -297,10 +294,10 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
 									required
 									css={styles.newPortInput}
 								/>
-								<MUIButton
+								<Button
 									type="submit"
-									size="small"
-									variant="text"
+									size="sm"
+									variant="subtle"
 									css={{
 										paddingLeft: 12,
 										paddingRight: 12,
@@ -314,7 +311,7 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
 											color: theme.palette.text.primary,
 										}}
 									/>
-								</MUIButton>
+								</Button>
 							</form>
 						</Stack>
 					</Stack>
@@ -369,9 +366,9 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
 									alignItems="center"
 								>
 									{canSharePorts && (
-										<MUIButton
-											size="small"
-											variant="text"
+										<Button
+											size="sm"
+											variant="subtle"
 											onClick={async () => {
 												await upsertSharedPortMutation.mutateAsync({
 													agent_name: agent.name,
@@ -383,7 +380,7 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
 											}}
 										>
 											Share
-										</MUIButton>
+										</Button>
 									)}
 								</Stack>
 							</Stack>
@@ -483,9 +480,9 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
 												)}
 											</Select>
 										</FormControl>
-										<MUIButton
-											size="small"
-											variant="text"
+										<Button
+											size="sm"
+											variant="subtle"
 											css={styles.deleteButton}
 											onClick={async () => {
 												await deleteSharedPortMutation.mutateAsync({
@@ -502,7 +499,7 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
 													color: theme.palette.text.primary,
 												}}
 											/>
-										</MUIButton>
+										</Button>
 									</Stack>
 								</Stack>
 							);

diff --git a/site/src/modules/resources/SSHButton/SSHButton.tsx b/site/src/modules/resources/SSHButton/SSHButton.tsx
@@ -1,5 +1,5 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import Button from "@mui/material/Button";
+import { Button } from "components/Button/Button";
 import { CodeExample } from "components/CodeExample/CodeExample";
 import {
 	HelpTooltipLink,
@@ -34,12 +34,12 @@ export const AgentSSHButton: FC<AgentSSHButtonProps> = ({
 		<Popover>
 			<PopoverTrigger>
 				<Button
-					size="small"
-					variant="text"
-					endIcon={<ChevronDownIcon className="size-4" />}
+					size="sm"
+					variant="subtle"
 					css={{ fontSize: 13, padding: "8px 12px" }}
 				>
 					Connect via SSH
+					<ChevronDownIcon className="size-4 ml-2" />
 				</Button>
 			</PopoverTrigger>
 
@@ -96,12 +96,12 @@ export const AgentDevcontainerSSHButton: FC<
 		<Popover>
 			<PopoverTrigger>
 				<Button
-					size="small"
-					variant="text"
-					endIcon={<ChevronDownIcon className="size-4" />}
+					size="sm"
+					variant="subtle"
 					css={{ fontSize: 13, padding: "8px 12px" }}
 				>
 					Connect via SSH
+					<ChevronDownIcon className="size-4 ml-2" />
 				</Button>
 			</PopoverTrigger>
 
@@ -163,4 +163,4 @@ const styles = {
 	codeExampleLabel: {
 		fontSize: 12,
 	},
-} satisfies Record<string, Interpolation<Theme>>;
+} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx b/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx
@@ -1,5 +1,5 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import Button from "@mui/material/Button";
+import { Button } from "components/Button/Button";
 import Link from "@mui/material/Link";
 import type { TemplateExample } from "api/typesGenerated";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
@@ -54,15 +54,16 @@ export const TemplateExampleCard: FC<TemplateExampleCardProps> = ({
 				</span>
 			</div>
 
-			<div css={styles.useButtonContainer}>
-				<Button
-					component={RouterLink}
-					fullWidth
-					to={`/templates/new?exampleId=${example.id}`}
-				>
-					Use template
-				</Button>
-			</div>
+				<div css={styles.useButtonContainer}>
+					<Button
+						asChild
+						className="w-full"
+					>
+						<RouterLink to={`/templates/new?exampleId=${example.id}`}>
+							Use template
+						</RouterLink>
+					</Button>
+				</div>
 		</div>
 	);
 };

diff --git a/site/src/pages/ChatPage/ChatLanding.tsx b/site/src/pages/ChatPage/ChatLanding.tsx
@@ -1,5 +1,5 @@
 import { useTheme } from "@emotion/react";
-import Button from "@mui/material/Button";
+import { Button } from "components/Button/Button";
 import IconButton from "@mui/material/IconButton";
 import Paper from "@mui/material/Paper";
 import Stack from "@mui/material/Stack";
@@ -89,19 +89,19 @@ const ChatLanding: FC = () => {
 						sx={{ mb: 2 }}
 					>
 						<Button
-							variant="outlined"
+							variant="outline"
 							onClick={() => setInput("Help me work on issue #...")}
 						>
 							Work on Issue
 						</Button>
 						<Button
-							variant="outlined"
+							variant="outline"
 							onClick={() => setInput("Help me build a template for...")}
 						>
 							Build a Template
 						</Button>
 						<Button
-							variant="outlined"
+							variant="outline"
 							onClick={() => setInput("Help me start a new project using...")}
 						>
 							Start a Project