coder · BrunoQuaresma · Oct 8, 2025 · Oct 7, 2025 · Oct 7, 2025 · Oct 7, 2025
diff --git a/biome.jsonc b/biome.jsonc
@@ -51,6 +51,7 @@
 							"@mui/material/Popover": "Use components/Popover/Popover instead.",
 							"@mui/material/Typography": "Use native HTML elements instead. Eg: <span>, <p>, <h1>, etc.",
 							"@mui/material/Box": "Use a <div> instead.",
+							"@mui/material/Button": "Use a components/Button/Button instead.",
 							"@mui/material/styles": "Import from @emotion/react instead.",
 							"lodash": "Use lodash/<name> instead."
 						}

diff --git a/site/src/@types/mui.d.ts b/site/src/@types/mui.d.ts
@@ -13,16 +13,6 @@ declare module "@mui/material/styles" {
 	}
 }
 
-declare module "@mui/material/Button" {
-	interface ButtonPropsColorOverrides {
-		neutral: true;
-	}
-
-	interface ButtonPropsSizeOverrides {
-		xlarge: true;
-	}
-}
-
 declare module "@mui/material/Checkbox" {
 	interface CheckboxPropsSizeOverrides {
 		xsmall: true;

diff --git a/site/src/components/InputGroup/InputGroup.stories.tsx b/site/src/components/InputGroup/InputGroup.stories.tsx
@@ -1,6 +1,6 @@
-import Button from "@mui/material/Button";
 import TextField from "@mui/material/TextField";
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Button } from "components/Button/Button";
 import { InputGroup } from "./InputGroup";
 
 const meta: Meta<typeof InputGroup> = {
@@ -15,7 +15,9 @@ export const Default: Story = {
 	args: {
 		children: (
 			<>
-				<Button>Menu</Button>
+				<Button variant="outline" className="h-9">
+					Menu
+				</Button>
 				<TextField size="small" placeholder="Search..." />
 			</>
 		),

diff --git a/site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx b/site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx
@@ -1,12 +1,12 @@
 import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
-import Button from "@mui/material/Button";
 import Link from "@mui/material/Link";
 import Tooltip from "@mui/material/Tooltip";
 import type {
 	DeploymentStats,
 	HealthcheckReport,
 	WorkspaceStatus,
 } from "api/typesGenerated";
+import { Button } from "components/Button/Button";
 import { HelpTooltipTitle } from "components/HelpTooltip/HelpTooltip";
 import { JetBrainsIcon } from "components/Icons/JetBrainsIcon";
 import { RocketIcon } from "components/Icons/RocketIcon";
@@ -323,9 +323,9 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
 								fetchStats();
 							}
 						}}
-						variant="text"
+						variant="subtle"
 					>
-						<RotateCwIcon className="size-icon-xs" />
+						<RotateCwIcon />
 						{timeUntilRefresh}s
 					</Button>
 				</Tooltip>

diff --git a/site/src/modules/resources/Resources.tsx b/site/src/modules/resources/Resources.tsx
@@ -1,5 +1,5 @@
-import Button from "@mui/material/Button";
 import type { WorkspaceAgent, WorkspaceResource } from "api/typesGenerated";
+import { Button } from "components/Button/Button";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import { Stack } from "components/Stack/Stack";
 import { type FC, type JSX, useState } from "react";
@@ -37,8 +37,9 @@ export const Resources: FC<ResourcesProps> = ({ resources, agentRow }) => {
 			{hasHideResources && (
 				<div className="flex items-center justify-center mt-4">
 					<Button
+						variant="outline"
 						className="rounded-full w-full max-w-[260px]"
-						size="small"
+						size="sm"
 						onClick={() => setShouldDisplayHideResources((v) => !v)}
 					>
 						{shouldDisplayHideResources ? "Hide" : "Show hidden"} resources

diff --git a/site/src/modules/workspaces/WorkspaceMoreActions/UpdateBuildParametersDialog.tsx b/site/src/modules/workspaces/WorkspaceMoreActions/UpdateBuildParametersDialog.tsx
@@ -1,6 +1,5 @@
 import { css } from "@emotion/css";
 import type { Interpolation, Theme } from "@emotion/react";
-import Button from "@mui/material/Button";
 import Dialog from "@mui/material/Dialog";
 import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
@@ -10,6 +9,7 @@ import type {
 	TemplateVersionParameter,
 	WorkspaceBuildParameter,
 } from "api/typesGenerated";
+import { Button } from "components/Button/Button";
 import type { DialogProps } from "components/Dialogs/Dialog";
 import { FormFields, VerticalForm } from "components/Form/Form";
 import { RichParameterInput } from "components/RichParameterInput/RichParameterInput";
@@ -97,10 +97,15 @@ export const UpdateBuildParametersDialog: FC<
 				</VerticalForm>
 			</DialogContent>
 			<DialogActions disableSpacing css={styles.dialogActions}>
-				<Button fullWidth type="button" onClick={dialogProps.onClose}>
+				<Button
+					variant="outline"
+					className="w-full"
+					type="button"
+					onClick={dialogProps.onClose}
+				>
 					Cancel
 				</Button>
-				<Button color="primary" fullWidth type="submit" form="updateParameters">
+				<Button className="w-full" type="submit" form="updateParameters">
 					Update parameters
 				</Button>
 			</DialogActions>

diff --git a/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx b/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx
@@ -1,12 +1,12 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import Button from "@mui/material/Button";
 import Collapse from "@mui/material/Collapse";
 import Skeleton from "@mui/material/Skeleton";
 import type {
 	AgentConnectionTiming,
 	AgentScriptTiming,
 	ProvisionerTiming,
 } from "api/typesGenerated";
+import { Button } from "components/Button/Button";
 import sortBy from "lodash/sortBy";
 import uniqBy from "lodash/uniqBy";
 import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
@@ -96,7 +96,7 @@ export const WorkspaceTimings: FC<WorkspaceTimingsProps> = ({
 		<div css={styles.collapse}>
 			<Button
 				disabled={isLoading}
-				variant="text"
+				variant="subtle"
 				css={styles.collapseTrigger}
 				onClick={() => setIsOpen((o) => !o)}
 			>

diff --git a/site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx b/site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx
@@ -1,10 +1,10 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import Button from "@mui/material/Button";
 import Drawer from "@mui/material/Drawer";
 import IconButton from "@mui/material/IconButton";
 import { visuallyHidden } from "@mui/utils";
 import { JobError } from "api/queries/templates";
 import type { TemplateVersion } from "api/typesGenerated";
+import { Button } from "components/Button/Button";
 import { Loader } from "components/Loader/Loader";
 import { TriangleAlertIcon, XIcon } from "lucide-react";
 import { AlertVariant } from "modules/provisioners/ProvisionerAlert";
@@ -103,8 +103,8 @@ const MissingVariablesBanner: FC<MissingVariablesBannerProps> = ({
 				</p>
 				<Button
 					css={bannerStyles.button}
-					size="small"
-					variant="outlined"
+					size="sm"
+					variant="outline"
 					onClick={onFillVariables}
 				>
 					Fill variables

diff --git a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicenseCard.tsx b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicenseCard.tsx
@@ -1,7 +1,7 @@
 import type { CSSObject, Interpolation, Theme } from "@emotion/react";
-import Button from "@mui/material/Button";
 import Paper from "@mui/material/Paper";
 import type { GetLicensesResponse } from "api/api";
+import { Button } from "components/Button/Button";
 import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
 import { Pill } from "components/Pill/Pill";
 import { Stack } from "components/Stack/Stack";
@@ -106,9 +106,8 @@ export const LicenseCard: FC<LicenseCardProps> = ({
 					</Stack>
 					<Stack spacing={2}>
 						<Button
-							css={styles.removeButton}
-							variant="contained"
-							size="small"
+							variant="destructive"
+							size="sm"
 							onClick={() => setLicenseIDMarkedForRemoval(license.id)}
 							className="remove-button"
 						>
@@ -150,10 +149,4 @@ const styles = {
 	secondaryMaincolor: (theme) => ({
 		color: theme.palette.text.secondary,
 	}),
-	removeButton: (theme) => ({
-		color: theme.palette.error.main,
-		"&:hover": {
-			backgroundColor: "transparent",
-		},
-	}),
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx
@@ -1,5 +1,4 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
-import MuiButton from "@mui/material/Button";
 import MuiLink from "@mui/material/Link";
 import Skeleton from "@mui/material/Skeleton";
 import Tooltip from "@mui/material/Tooltip";
@@ -75,13 +74,12 @@ const LicensesSettingsPageView: FC<Props> = ({
 				</SettingsHeader>
 
 				<Stack direction="row" spacing={2}>
-					<MuiButton
-						component={Link}
-						to="/deployment/licenses/add"
-						startIcon={<PlusIcon className="size-icon-sm" />}
-					>
-						Add a license
-					</MuiButton>
+					<Button variant="outline" asChild>
+						<Link to="/deployment/licenses/add">
+							<PlusIcon />
+							Add a license
+						</Link>
+					</Button>
 					<Tooltip title="Refresh license entitlements. This is done automatically every 10 minutes.">
 						<Button
 							disabled={isRefreshing}

diff --git a/site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationEvents.tsx b/site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationEvents.tsx
@@ -1,5 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import Button from "@mui/material/Button";
 import Card from "@mui/material/Card";
 import Divider from "@mui/material/Divider";
 import List from "@mui/material/List";
@@ -15,6 +14,7 @@ import {
 } from "api/queries/notifications";
 import type { DeploymentValues } from "api/typesGenerated";
 import { Alert } from "components/Alert/Alert";
+import { Button } from "components/Button/Button";
 import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
 import { Stack } from "components/Stack/Stack";
 import {
@@ -66,15 +66,14 @@ export const NotificationEvents: FC<NotificationEventsProps> = ({
 				<Alert
 					severity="warning"
 					actions={
-						<Button
-							variant="text"
-							size="small"
-							component="a"
-							target="_blank"
-							rel="noreferrer"
-							href={docs("/admin/monitoring/notifications#webhook")}
-						>
-							Read the docs
+						<Button variant="subtle" size="sm" asChild>
+							<a
+								target="_blank"
+								rel="noreferrer"
+								href={docs("/admin/monitoring/notifications#webhook")}
+							>
+								Read the docs
+							</a>
 						</Button>
 					}
 				>
@@ -86,15 +85,14 @@ export const NotificationEvents: FC<NotificationEventsProps> = ({
 				<Alert
 					severity="warning"
 					actions={
-						<Button
-							variant="text"
-							size="small"
-							component="a"
-							target="_blank"
-							rel="noreferrer"
-							href={docs("/admin/monitoring/notifications#smtp-email")}
-						>
-							Read the docs
+						<Button variant="subtle" size="sm" asChild>
+							<a
+								target="_blank"
+								rel="noreferrer"
+								href={docs("/admin/monitoring/notifications#smtp-email")}
+							>
+								Read the docs
+							</a>
 						</Button>
 					}
 				>

diff --git a/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx
@@ -1,5 +1,4 @@
 import { useTheme } from "@emotion/react";
-import Button from "@mui/material/Button";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
@@ -9,6 +8,7 @@ import TableRow from "@mui/material/TableRow";
 import type * as TypesGen from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { Avatar } from "components/Avatar/Avatar";
+import { Button } from "components/Button/Button";
 import {
 	SettingsHeader,
 	SettingsHeaderDescription,
@@ -48,12 +48,11 @@ const OAuth2AppsSettingsPageView: FC<OAuth2AppsSettingsProps> = ({
 					</SettingsHeader>
 				</div>
 
-				<Button
-					component={Link}
-					to="/deployment/oauth2-provider/apps/add"
-					startIcon={<PlusIcon className="size-icon-sm" />}
-				>
-					Add application
+				<Button variant="outline" asChild>
+					<Link to="/deployment/oauth2-provider/apps/add">
+						<PlusIcon />
+						Add application
+					</Link>
 				</Button>
 			</Stack>
 

diff --git a/site/src/pages/ExternalAuthPage/ExternalAuthPage.tsx b/site/src/pages/ExternalAuthPage/ExternalAuthPage.tsx
@@ -1,11 +1,11 @@
-import Button from "@mui/material/Button";
 import type { ApiErrorResponse } from "api/errors";
 import {
 	exchangeExternalAuthDevice,
 	externalAuthDevice,
 	externalAuthProvider,
 } from "api/queries/externalAuth";
 import { isAxiosError } from "axios";
+import { Button } from "components/Button/Button";
 import {
 	isExchangeErrorRetryable,
 	newRetryDelay,
@@ -91,6 +91,7 @@ const ExternalAuthPage: FC = () => {
 					</p>
 					<br />
 					<Button
+						variant="outline"
 						onClick={() => {
 							// Redirect to the auth flow again. *crosses fingers*
 							window.location.href = `/external-auth/${provider}/callback`;

diff --git a/site/src/pages/GroupsPage/GroupPage.tsx b/site/src/pages/GroupsPage/GroupPage.tsx
@@ -1,5 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import MuiButton from "@mui/material/Button";
 import { getErrorMessage } from "api/errors";
 import {
 	addMember,
@@ -120,23 +119,22 @@ const GroupPage: FC = () => {
 
 				{canUpdateGroup && (
 					<Stack direction="row" spacing={2}>
-						<MuiButton
- component={RouterLink}
- startIcon={<SettingsIcon className="size-icon-sm" />}
- to="settings"
-						>
- 	Settings
-						</MuiButton>
- <MuiButton
+						<Button variant="outline" asChild>
+ <RouterLink to="settings">
+  <SettingsIcon />
+ 	Settings
+ 	</RouterLink>
+ </Button>
+						<Button
+ 	variant="destructive"
 							disabled={groupData?.id === groupData?.organization_id}
 							onClick={() => {
 								setIsDeletingGroup(true);
 							}}
-							startIcon={<TrashIcon className="size-icon-xs" />}
-							css={styles.removeButton}
 						>
+							<TrashIcon />
 							Delete&hellip;
-						</MuiButton>
+						</Button>
 					</Stack>
 				)}
 			</Stack>
@@ -353,12 +351,6 @@ const styles = {
 	autoComplete: {
 		width: 300,
 	},
-	removeButton: (theme) => ({
-		color: theme.palette.error.main,
-		"&:hover": {
-			backgroundColor: "transparent",
-		},
-	}),
 	status: {
 		textTransform: "capitalize",
 	},