chore: replace remaining MUI buttons (#20200)

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."
 						}

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;

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..." />
 			</>
 		),

site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx

@@ -1,5 +1,4 @@
 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 {
@@ -7,6 +6,7 @@ import type {
 	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>

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

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>

site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx

@@ -1,5 +1,4 @@
 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 {
@@ -7,6 +6,7 @@ import type {
 	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)}
 			>

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

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>>;

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}

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>
 					}
 				>

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>
 

site/src/pages/ExternalAuthPage/ExternalAuthPage.tsx

@@ -1,4 +1,3 @@
-import Button from "@mui/material/Button";
 import type { ApiErrorResponse } from "api/errors";
 import {
 	exchangeExternalAuthDevice,
@@ -6,6 +5,7 @@ import {
 	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`;

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",
 	},

site/src/pages/HealthPage/DERPPage.tsx

@@ -1,11 +1,11 @@
 import { useTheme } from "@emotion/react";
-import Button from "@mui/material/Button";
 import type {
 	HealthcheckReport,
 	HealthSeverity,
 	NetcheckReport,
 } from "api/typesGenerated";
 import { Alert } from "components/Alert/Alert";
+import { Button } from "components/Button/Button";
 import { MapPinIcon } from "lucide-react";
 import type { FC } from "react";
 import { Link, useOutletContext } from "react-router";
@@ -100,10 +100,9 @@ const DERPPage: FC = () => {
 							})
 							.map(({ severity, region }) => {
 								return (
-									<Button
-										startIcon={
+									<Button variant="outline" key={region!.RegionID} asChild>
+										<Link to={`/health/derp/regions/${region!.RegionID}`}>
 											<MapPinIcon
-												className="size-4"
 												style={{
 													color: healthyColor(
 														theme,
@@ -111,12 +110,8 @@ const DERPPage: FC = () => {
 													),
 												}}
 											/>
-										}
-										component={Link}
-										to={`/health/derp/regions/${region!.RegionID}`}
-										key={region!.RegionID}
-									>
-										{region!.RegionName}
+											{region!.RegionName}
+										</Link>
 									</Button>
 								);
 							})}

site/src/pages/LoginPage/OAuthSignInForm.tsx

@@ -1,16 +1,11 @@
 import GitHubIcon from "@mui/icons-material/GitHub";
 import KeyIcon from "@mui/icons-material/VpnKey";
-import Button from "@mui/material/Button";
 import { visuallyHidden } from "@mui/utils";
 import type { AuthMethods } from "api/typesGenerated";
+import { Button } from "components/Button/Button";
 import { type FC, useId } from "react";
 import { Language } from "./Language";
 
-const iconStyles = {
-	width: 16,
-	height: 16,
-};
-
 type OAuthSignInFormProps = {
 	isSigningIn: boolean;
 	redirectTo: string;
@@ -26,41 +21,45 @@ export const OAuthSignInForm: FC<OAuthSignInFormProps> = ({
 		<div css={{ display: "grid", gap: "16px" }}>
 			{authMethods?.github.enabled && (
 				<Button
-					component="a"
-					href={`/api/v2/users/oauth2/github/callback?redirect=${encodeURIComponent(
-						redirectTo,
-					)}`}
-					variant="contained"
-					startIcon={<GitHubIcon css={iconStyles} />}
+					variant="outline"
+					asChild
 					disabled={isSigningIn}
-					fullWidth
+					className="w-full"
 					type="submit"
-					size="xlarge"
+					size="lg"
 				>
-					{Language.githubSignIn}
+					<a
+						href={`/api/v2/users/oauth2/github/callback?redirect=${encodeURIComponent(
+							redirectTo,
+						)}`}
+					>
+						<GitHubIcon />
+						{Language.githubSignIn}
+					</a>
 				</Button>
 			)}
 
 			{authMethods?.oidc.enabled && (
 				<Button
-					component="a"
-					href={`/api/v2/users/oidc/callback?redirect=${encodeURIComponent(
-						redirectTo,
-					)}`}
-					variant="contained"
-					size="xlarge"
-					startIcon={
-						authMethods.oidc.iconUrl ? (
-							<OidcIcon iconUrl={authMethods.oidc.iconUrl} />
-						) : (
-							<KeyIcon css={iconStyles} />
-						)
-					}
+					variant="outline"
+					asChild
+					className="w-full"
+					size="lg"
 					disabled={isSigningIn}
-					fullWidth
 					type="submit"
 				>
-					{authMethods.oidc.signInText || Language.oidcSignIn}
+					<a
+						href={`/api/v2/users/oidc/callback?redirect=${encodeURIComponent(
+							redirectTo,
+						)}`}
+					>
+						{authMethods.oidc.iconUrl ? (
+							<OidcIcon iconUrl={authMethods.oidc.iconUrl} />
+						) : (
+							<KeyIcon />
+						)}
+						{authMethods.oidc.signInText || Language.oidcSignIn}
+					</a>
 				</Button>
 			)}
 		</div>
@@ -80,7 +79,7 @@ const OidcIcon: FC<OidcIconProps> = ({ iconUrl }) => {
 	// if that happens, but also still need a way to inject accessible text
 	return (
 		<>
-			<img alt="" src={iconUrl} css={iconStyles} aria-labelledby={oidcId} />
+			<img alt="" src={iconUrl} aria-labelledby={oidcId} />
 			<div id={oidcId} css={{ ...visuallyHidden }}>
 				Open ID Connect
 			</div>

site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPageView.tsx

@@ -1,8 +1,7 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import Button from "@mui/material/Button";
 import Skeleton from "@mui/material/Skeleton";
 import type { AssignableRoles, Role } from "api/typesGenerated";
-import { Button as ShadcnButton } from "components/Button/Button";
+import { Button, Button as ShadcnButton } from "components/Button/Button";
 import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
 import {
 	DropdownMenu,
@@ -72,12 +71,11 @@ export const CustomRolesPageView: FC<CustomRolesPageViewProps> = ({
 					</span>
 				</span>
 				{canCreateOrgRole && isCustomRolesEnabled && (
-					<Button
-						component={RouterLink}
-						startIcon={<PlusIcon className="size-icon-sm" />}
-						to="create"
-					>
-						Create custom role
+					<Button variant="outline" asChild>
+						<RouterLink to="create">
+							<PlusIcon />
+							Create custom role
+						</RouterLink>
 					</Button>
 				)}
 			</Stack>
@@ -157,13 +155,11 @@ const RoleTable: FC<RoleTableProps> = ({
 									cta={
 										canCreateOrgRole &&
 										isCustomRolesEnabled && (
-											<Button
-												component={RouterLink}
-												to="create"
-												startIcon={<PlusIcon className="size-icon-sm" />}
-												variant="contained"
-											>
-												Create custom role
+											<Button asChild>
+												<RouterLink to="create">
+													<PlusIcon />
+													Create custom role
+												</RouterLink>
 											</Button>
 										)
 									}

site/src/pages/ResetPasswordPage/ChangePasswordPage.tsx

@@ -1,5 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import MUIButton from "@mui/material/Button";
 import TextField from "@mui/material/TextField";
 import { isApiValidationError } from "api/errors";
 import { changePasswordWithOTP } from "api/queries/users";
@@ -119,15 +118,9 @@ const ChangePasswordPage: FC<ChangePasswordChangeProps> = ({ redirect }) => {
 										<Spinner loading={form.isSubmitting} />
 										Reset password
 									</Button>
-									<MUIButton
-										component={RouterLink}
-										size="large"
-										fullWidth
-										variant="text"
-										to="/login"
-									>
-										Back to login
-									</MUIButton>
+									<Button size="lg" className="w-full" variant="subtle" asChild>
+										<RouterLink to="/login">Back to login</RouterLink>
+									</Button>
 								</Stack>
 							</Stack>
 						</fieldset>

site/src/pages/SetupPage/SetupPageView.tsx

@@ -1,7 +1,6 @@
 import GitHubIcon from "@mui/icons-material/GitHub";
 import AlertTitle from "@mui/material/AlertTitle";
 import Autocomplete from "@mui/material/Autocomplete";
-import MuiButton from "@mui/material/Button";
 import Checkbox from "@mui/material/Checkbox";
 import Link from "@mui/material/Link";
 import MenuItem from "@mui/material/MenuItem";
@@ -173,17 +172,12 @@ export const SetupPageView: FC<SetupPageViewProps> = ({
 				<FormFields>
 					{authMethods?.github.enabled && (
 						<>
-							<MuiButton
-								fullWidth
-								component="a"
-								href="/api/v2/users/oauth2/github/callback"
-								variant="contained"
-								startIcon={<GitHubIcon css={iconStyles} />}
-								type="submit"
-								size="xlarge"
-							>
-								{Language.githubCreate}
-							</MuiButton>
+							<Button className="w-full" asChild type="submit" size="lg">
+								<a href="/api/v2/users/oauth2/github/callback">
+									<GitHubIcon css={iconStyles} />
+									{Language.githubCreate}
+								</a>
+							</Button>
 							<div className="flex items-center gap-4">
 								<div className="h-[1px] w-full bg-border" />
 								<div className="shrink-0 text-xs uppercase text-content-secondary tracking-wider">

site/src/pages/TemplatePage/TemplatePageHeader.tsx

@@ -1,4 +1,3 @@
-import Button from "@mui/material/Button";
 import { API } from "api/api";
 import { workspaces } from "api/queries/workspaces";
 import type {
@@ -7,7 +6,7 @@ import type {
 	TemplateVersion,
 } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
-import { Button as ShadcnButton } from "components/Button/Button";
+import { Button, Button as ShadcnButton } from "components/Button/Button";
 import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
 import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog";
 import {
@@ -222,13 +221,11 @@ export const TemplatePageHeader: FC<TemplatePageHeaderProps> = ({
 					<>
 						{!template.deprecated &&
 							workspacePermissions.createWorkspaceForUserID && (
-								<Button
-									variant="contained"
-									startIcon={<PlusIcon className="size-icon-sm" />}
-									component={RouterLink}
-									to={`${templateLink}/workspace`}
-								>
-									Create Workspace
+								<Button asChild>
+									<RouterLink to={`${templateLink}/workspace`}>
+										<PlusIcon />
+										Create Workspace
+									</RouterLink>
 								</Button>
 							)}
 

site/src/theme/constants.ts

@@ -34,7 +34,5 @@ export const containerWidthMedium = 1080;
 export const sidePadding = 24;
 
 // MUI does not have aligned heights for buttons and inputs so we have to "hack" it a little bit
-export const BUTTON_XL_HEIGHT = 44;
 export const BUTTON_LG_HEIGHT = 40;
 export const BUTTON_MD_HEIGHT = 36;
-export const BUTTON_SM_HEIGHT = 32;

site/src/theme/light/mui.ts

@@ -108,67 +108,6 @@ const muiTheme = createTheme({
 				},
 			},
 		},
-		MuiButton: {
-			...components.MuiButton,
-			styleOverrides: {
-				...components.MuiButton.styleOverrides,
-				outlined: ({ theme }) => ({
-					boxShadow: "0 1px 4px #0001",
-					":hover": {
-						boxShadow: "0 1px 4px #0001",
-						border: `1px solid ${theme.palette.secondary.main}`,
-					},
-					"&.Mui-disabled": {
-						boxShadow: "none !important",
-					},
-				}),
-				["outlinedNeutral" as MuiStyle]: {
-					borderColor: tw.zinc[300],
-
-					"&.Mui-disabled": {
-						borderColor: tw.zinc[200],
-						color: tw.zinc[500],
-
-						"& > .MuiLoadingButton-loadingIndicator": {
-							color: tw.zinc[500],
-						},
-					},
-				},
-				contained: {
-					boxShadow: "0 1px 4px #0001",
-					"&.Mui-disabled": {
-						boxShadow: "none !important",
-					},
-					":hover": {
-						boxShadow: "0 1px 4px #0001",
-					},
-				},
-				["containedNeutral" as MuiStyle]: {
-					backgroundColor: tw.zinc[100],
-					border: `1px solid ${tw.zinc[200]}`,
-
-					"&.Mui-disabled": {
-						backgroundColor: tw.zinc[50],
-						border: `1px solid ${tw.zinc[100]}`,
-					},
-
-					"&:hover": {
-						backgroundColor: tw.zinc[200],
-						border: `1px solid ${tw.zinc[300]}`,
-					},
-				},
-			},
-		},
-		MuiButtonGroup: {
-			styleOverrides: {
-				root: {
-					">button:hover+button": {
-						// The !important is unfortunate, but necessary for the border.
-						borderLeftColor: `${tw.zinc[300]} !important`,
-					},
-				},
-			},
-		},
 		MuiChip: {
 			styleOverrides: {
 				root: {

site/src/theme/mui.ts

@@ -6,8 +6,6 @@ import {
 	BODY_FONT_FAMILY,
 	BUTTON_LG_HEIGHT,
 	BUTTON_MD_HEIGHT,
-	BUTTON_SM_HEIGHT,
-	BUTTON_XL_HEIGHT,
 	borderRadius,
 } from "./constants";
 import tw from "./tailwindColors";
@@ -61,112 +59,6 @@ export const components = {
 			}),
 		},
 	},
-	// Button styles are based on
-	// https://tailwindui.com/components/application-ui/elements/buttons
-	MuiButtonBase: {
-		defaultProps: {
-			disableRipple: true,
-		},
-	},
-	MuiButton: {
-		defaultProps: {
-			variant: "outlined",
-			color: "neutral",
-		},
-		styleOverrides: {
-			root: ({ theme }) => ({
-				textTransform: "none",
-				letterSpacing: "normal",
-				fontWeight: 500,
-				height: BUTTON_MD_HEIGHT,
-				padding: "8px 16px",
-				borderRadius: "6px",
-				fontSize: 14,
-
-				whiteSpace: "nowrap",
-				":focus-visible": {
-					outline: `2px solid ${theme.palette.primary.main}`,
-				},
-
-				"& .MuiLoadingButton-loadingIndicator": {
-					width: 14,
-					height: 14,
-				},
-
-				"& .MuiLoadingButton-loadingIndicator .MuiCircularProgress-root": {
-					width: "inherit !important",
-					height: "inherit !important",
-				},
-			}),
-			sizeSmall: {
-				height: BUTTON_SM_HEIGHT,
-			},
-			sizeLarge: {
-				height: BUTTON_LG_HEIGHT,
-			},
-			["sizeXlarge" as MuiStyle]: {
-				height: BUTTON_XL_HEIGHT,
-
-				// With higher size we need to increase icon spacing.
-				"& .MuiButton-startIcon": {
-					marginRight: 12,
-				},
-				"& .MuiButton-endIcon": {
-					marginLeft: 12,
-				},
-			},
-			outlined: ({ theme }) => ({
-				":hover": {
-					border: `1px solid ${theme.palette.secondary.main}`,
-				},
-			}),
-			["outlinedNeutral" as MuiStyle]: {
-				borderColor: tw.zinc[600],
-
-				"&.Mui-disabled": {
-					borderColor: tw.zinc[700],
-					color: tw.zinc[500],
-
-					"& > .MuiLoadingButton-loadingIndicator": {
-						color: tw.zinc[500],
-					},
-				},
-			},
-			["containedNeutral" as MuiStyle]: {
-				backgroundColor: tw.zinc[800],
-
-				"&:hover": {
-					backgroundColor: tw.zinc[700],
-				},
-			},
-			iconSizeMedium: {
-				"& > .MuiSvgIcon-root": {
-					fontSize: 14,
-				},
-			},
-			iconSizeSmall: {
-				"& > .MuiSvgIcon-root": {
-					fontSize: 13,
-				},
-			},
-		},
-	},
-	MuiButtonGroup: {
-		styleOverrides: {
-			root: ({ theme }) => ({
-				">button:hover+button": {
-					// The !important is unfortunate, but necessary for the border.
-					borderLeftColor: `${theme.palette.secondary.main} !important`,
-				},
-			}),
-		},
-	},
-	["MuiLoadingButton" as MuiStyle]: {
-		defaultProps: {
-			variant: "outlined",
-			color: "neutral",
-		},
-	},
 	MuiTableContainer: {
 		styleOverrides: {
 			root: ({ theme }) => ({