refactor: replace MUI buttons on banners, paywalls and a few pages (#16215)

site/e2e/helpers.ts

@@ -1062,7 +1062,7 @@ export async function createUser(
 	await page.goto("/deployment/users", { waitUntil: "domcontentloaded" });
 	await expect(page).toHaveTitle("Users - Coder");
 
-	await page.getByRole("button", { name: "Create user" }).click();
+	await page.getByRole("link", { name: "Create user" }).click();
 	await expect(page).toHaveTitle("Create User - Coder");
 
 	const username = userValues.username ?? randomName();

site/src/components/EmptyState/EmptyState.stories.tsx

@@ -1,5 +1,5 @@
-import Button from "@mui/material/Button";
 import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "components/Button/Button";
 import { EmptyState } from "./EmptyState";
 
 const meta: Meta<typeof EmptyState> = {

site/src/components/Paywall/Paywall.tsx

@@ -1,11 +1,10 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import TaskAltIcon from "@mui/icons-material/TaskAlt";
-import Button from "@mui/material/Button";
 import Link from "@mui/material/Link";
 import { PremiumBadge } from "components/Badges/Badges";
+import { Button } from "components/Button/Button";
 import { Stack } from "components/Stack/Stack";
 import type { FC, ReactNode } from "react";
-import { docs } from "utils/docs";
 
 export interface PaywallProps {
 	message: string;
@@ -57,15 +56,14 @@ export const Paywall: FC<PaywallProps> = ({
 					</li>
 				</ul>
 				<div css={styles.learnButton}>
-					<Button
-						href="https://coder.com/pricing#compare-plans"
-						target="_blank"
-						rel="noreferrer"
-						startIcon={<span css={{ fontSize: 22 }}>&rarr;</span>}
-						variant="outlined"
-						color="neutral"
-					>
-						Learn about Premium
+					<Button asChild>
+						<a
+							href="https://coder.com/pricing#compare-plans"
+							target="_blank"
+							rel="noreferrer"
+						>
+							Learn about Premium
+						</a>
 					</Button>
 				</div>
 			</Stack>

site/src/components/Paywall/PopoverPaywall.tsx

@@ -1,11 +1,10 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import TaskAltIcon from "@mui/icons-material/TaskAlt";
-import Button from "@mui/material/Button";
 import Link from "@mui/material/Link";
 import { PremiumBadge } from "components/Badges/Badges";
+import { Button } from "components/Button/Button";
 import { Stack } from "components/Stack/Stack";
 import type { FC, ReactNode } from "react";
-import { docs } from "utils/docs";
 
 export interface PopoverPaywallProps {
 	message: string;
@@ -61,15 +60,14 @@ export const PopoverPaywall: FC<PopoverPaywallProps> = ({
 					</li>
 				</ul>
 				<div css={styles.learnButton}>
-					<Button
-						href="https://coder.com/pricing#compare-plans"
-						target="_blank"
-						rel="noreferrer"
-						startIcon={<span css={{ fontSize: 22 }}>&rarr;</span>}
-						variant="outlined"
-						color="neutral"
-					>
-						Learn about Premium
+					<Button asChild>
+						<a
+							href="https://coder.com/pricing#compare-plans"
+							target="_blank"
+							rel="noreferrer"
+						>
+							Learn about Premium
+						</a>
 					</Button>
 				</div>
 			</Stack>

site/src/components/SettingsHeader/SettingsHeader.tsx

@@ -1,7 +1,8 @@
 import { useTheme } from "@emotion/react";
 import LaunchOutlined from "@mui/icons-material/LaunchOutlined";
-import Button from "@mui/material/Button";
+import { Button } from "components/Button/Button";
 import { Stack } from "components/Stack/Stack";
+import { SquareArrowOutUpRightIcon } from "lucide-react";
 import type { FC, ReactNode } from "react";
 
 interface HeaderProps {
@@ -62,13 +63,11 @@ export const SettingsHeader: FC<HeaderProps> = ({
 			</div>
 
 			{docsHref && (
-				<Button
-					startIcon={<LaunchOutlined />}
-					component="a"
-					href={docsHref}
-					target="_blank"
-				>
-					Read the docs
+				<Button asChild variant="outline">
+					<a href={docsHref} target="_blank" rel="noreferrer">
+						<SquareArrowOutUpRightIcon />
+						Read the docs
+					</a>
 				</Button>
 			)}
 		</Stack>

site/src/modules/dashboard/DashboardLayout.tsx

@@ -1,7 +1,7 @@
 import InfoOutlined from "@mui/icons-material/InfoOutlined";
-import Button from "@mui/material/Button";
 import Link from "@mui/material/Link";
 import Snackbar from "@mui/material/Snackbar";
+import { Button } from "components/Button/Button";
 import { Loader } from "components/Loader/Loader";
 import { useAuthenticated } from "contexts/auth/RequireAuth";
 import { AnnouncementBanners } from "modules/dashboard/AnnouncementBanners/AnnouncementBanners";
@@ -92,7 +92,7 @@ export const DashboardLayout: FC = () => {
 						</div>
 					}
 					action={
-						<Button variant="text" size="small" onClick={updateCheck.dismiss}>
+						<Button variant="subtle" size="sm" onClick={updateCheck.dismiss}>
 							Dismiss
 						</Button>
 					}

site/src/modules/resources/XRayScanAlert.tsx

@@ -1,6 +1,6 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import Button from "@mui/material/Button";
 import type { JFrogXrayScan } from "api/typesGenerated";
+import { Button } from "components/Button/Button";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import type { FC } from "react";
 
@@ -39,15 +39,10 @@ export const XRayScanAlert: FC<XRayScanAlertProps> = ({ scan }) => {
 				</ul>
 			</div>
 			<div css={styles.link}>
-				<Button
-					component="a"
-					size="small"
-					variant="text"
-					href={scan.results_url}
-					target="_blank"
-					rel="noreferrer"
-				>
-					Review results
+				<Button size="sm" variant="subtle" asChild>
+					<a href={scan.results_url} target="_blank" rel="noreferrer">
+						Review results
+					</a>
 				</Button>
 			</div>
 		</div>

site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerSettings.tsx

@@ -1,6 +1,4 @@
 import { type CSSObject, useTheme } from "@emotion/react";
-import AddIcon from "@mui/icons-material/AddOutlined";
-import Button from "@mui/material/Button";
 import Link from "@mui/material/Link";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
@@ -9,9 +7,11 @@ import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import type { BannerConfig } from "api/typesGenerated";
+import { Button } from "components/Button/Button";
 import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
 import { EmptyState } from "components/EmptyState/EmptyState";
 import { Stack } from "components/Stack/Stack";
+import { PlusIcon } from "lucide-react";
 import { type FC, useState } from "react";
 import { AnnouncementBannerDialog } from "./AnnouncementBannerDialog";
 import { AnnouncementBannerItem } from "./AnnouncementBannerItem";
@@ -89,8 +89,9 @@ export const AnnouncementBannerSettings: FC<
 						<Button
 							disabled={!isEntitled}
 							onClick={() => addBanner()}
-							startIcon={<AddIcon />}
+							variant="outline"
 						>
+							<PlusIcon />
 							New
 						</Button>
 					</Stack>

site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx

@@ -1,11 +1,11 @@
-import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
-import Button from "@mui/material/Button";
 import TextField from "@mui/material/TextField";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { Button } from "components/Button/Button";
 import { FileUpload } from "components/FileUpload/FileUpload";
 import { displayError } from "components/GlobalSnackbar/utils";
 import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
 import { Stack } from "components/Stack/Stack";
+import { ChevronLeftIcon } from "lucide-react";
 import type { FC } from "react";
 import { Link as RouterLink } from "react-router-dom";
 import { Fieldset } from "../Fieldset";
@@ -54,12 +54,11 @@ export const AddNewLicensePageView: FC<AddNewLicenseProps> = ({
 					title="Add a license"
 					description="Get access to high availability, RBAC, quotas, and more."
 				/>
-				<Button
-					component={RouterLink}
-					startIcon={<KeyboardArrowLeft />}
-					to="/deployment/licenses"
-				>
-					All Licenses
+				<Button asChild variant="outline">
+					<RouterLink to="/deployment/licenses">
+						<ChevronLeftIcon />
+						All Licenses
+					</RouterLink>
 				</Button>
 			</Stack>
 

site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx

@@ -14,7 +14,6 @@ import { useWindowSize } from "hooks/useWindowSize";
 import type { FC } from "react";
 import Confetti from "react-confetti";
 import { Link } from "react-router-dom";
-import { license } from "../../../../e2e/constants";
 import { LicenseCard } from "./LicenseCard";
 import { LicenseSeatConsumptionChart } from "./LicenseSeatConsumptionChart";
 

site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/CreateOAuth2AppPageView.tsx

@@ -1,11 +1,12 @@
 import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
-import Button from "@mui/material/Button";
 import type * as TypesGen from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { Button } from "components/Button/Button";
 import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
 import { Stack } from "components/Stack/Stack";
+import { ChevronLeftIcon } from "lucide-react";
 import type { FC } from "react";
-import { Link } from "react-router-dom";
+import { Link as RouterLink } from "react-router-dom";
 import { OAuth2AppForm } from "./OAuth2AppForm";
 
 type CreateOAuth2AppProps = {
@@ -30,12 +31,11 @@ export const CreateOAuth2AppPageView: FC<CreateOAuth2AppProps> = ({
 					title="Add an OAuth2 application"
 					description="Configure an application to use Coder as an OAuth2 provider."
 				/>
-				<Button
-					component={Link}
-					startIcon={<KeyboardArrowLeft />}
-					to="/deployment/oauth2-provider/apps"
-				>
-					All OAuth2 Applications
+				<Button variant="outline" asChild>
+					<RouterLink to="/deployment/oauth2-provider/apps">
+						<ChevronLeftIcon />
+						All OAuth2 Applications
+					</RouterLink>
 				</Button>
 			</Stack>
 

site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.tsx

@@ -1,8 +1,6 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 import CopyIcon from "@mui/icons-material/FileCopyOutlined";
-import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
 import LoadingButton from "@mui/lab/LoadingButton";
-import Button from "@mui/material/Button";
 import Divider from "@mui/material/Divider";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
@@ -13,6 +11,7 @@ import TableRow from "@mui/material/TableRow";
 import type * as TypesGen from "api/typesGenerated";
 import { Alert } from "components/Alert/Alert";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { Button } from "components/Button/Button";
 import { CodeExample } from "components/CodeExample/CodeExample";
 import { CopyableValue } from "components/CopyableValue/CopyableValue";
 import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
@@ -21,8 +20,9 @@ import { Loader } from "components/Loader/Loader";
 import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
 import { Stack } from "components/Stack/Stack";
 import { TableLoader } from "components/TableLoader/TableLoader";
+import { ChevronLeftIcon } from "lucide-react";
 import { type FC, useState } from "react";
-import { Link, useSearchParams } from "react-router-dom";
+import { Link as RouterLink, useSearchParams } from "react-router-dom";
 import { createDayString } from "utils/createDayString";
 import { OAuth2AppForm } from "./OAuth2AppForm";
 
@@ -79,12 +79,11 @@ export const EditOAuth2AppPageView: FC<EditOAuth2AppProps> = ({
 					title="Edit OAuth2 application"
 					description="Configure an application to use Coder as an OAuth2 provider."
 				/>
-				<Button
-					component={Link}
-					startIcon={<KeyboardArrowLeft />}
-					to="/deployment/oauth2-provider/apps"
-				>
-					All OAuth2 Applications
+				<Button variant="outline" asChild>
+					<RouterLink to="/deployment/oauth2-provider/apps">
+						<ChevronLeftIcon />
+						All OAuth2 Applications
+					</RouterLink>
 				</Button>
 			</Stack>
 
@@ -171,9 +170,7 @@ export const EditOAuth2AppPageView: FC<EditOAuth2AppProps> = ({
 							error={error}
 							actions={
 								<Button
-									variant="outlined"
-									type="button"
-									color="error"
+									variant="destructive"
 									onClick={() => setShowDelete(true)}
 								>
 									Delete&hellip;
@@ -303,12 +300,7 @@ const OAuth2SecretRow: FC<OAuth2SecretRowProps> = ({
 						</>
 					}
 				/>
-				<Button
-					variant="outlined"
-					type="button"
-					color="error"
-					onClick={() => setShowDelete(true)}
-				>
+				<Button variant="destructive" onClick={() => setShowDelete(true)}>
 					Delete&hellip;
 				</Button>
 			</TableCell>

site/src/pages/UsersPage/UsersPageView.tsx

@@ -1,14 +1,14 @@
-import PersonAdd from "@mui/icons-material/PersonAdd";
-import Button from "@mui/material/Button";
 import type { GroupsByUserId } from "api/queries/groups";
 import type * as TypesGen from "api/typesGenerated";
+import { Button } from "components/Button/Button";
 import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
 import {
 	PaginationContainer,
 	type PaginationResult,
 } from "components/PaginationWidget/PaginationContainer";
+import { UserPlusIcon } from "lucide-react";
 import type { ComponentProps, FC } from "react";
-import { useNavigate } from "react-router-dom";
+import { Link as RouterLink } from "react-router-dom";
 import { UsersFilter } from "./UsersFilter";
 import { UsersTable } from "./UsersTable/UsersTable";
 
@@ -65,19 +65,17 @@ export const UsersPageView: FC<UsersPageViewProps> = ({
 	usersQuery,
 	canCreateUser,
 }) => {
-	const navigate = useNavigate();
-
 	return (
 		<>
 			<PageHeader
 				css={{ paddingTop: 0 }}
 				actions={
 					canCreateUser && (
-						<Button
-							onClick={() => navigate("create")}
-							startIcon={<PersonAdd />}
-						>
-							Create user
+						<Button asChild>
+							<RouterLink to="create">
+								<UserPlusIcon />
+								Create user
+							</RouterLink>
 						</Button>
 					)
 				}

site/src/pages/WorkspacePage/WorkspaceDeletedBanner.tsx

@@ -1,5 +1,5 @@
-import Button from "@mui/material/Button";
 import { Alert } from "components/Alert/Alert";
+import { Button } from "components/Button/Button";
 import type { FC } from "react";
 
 export interface WorkspaceDeletedBannerProps {
@@ -10,7 +10,7 @@ export const WorkspaceDeletedBanner: FC<WorkspaceDeletedBannerProps> = ({
 	handleClick,
 }) => {
 	const NewWorkspaceButton = (
-		<Button onClick={handleClick} size="small" variant="text">
+		<Button onClick={handleClick} size="sm" variant="subtle">
 			Create new workspace
 		</Button>
 	);

site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx

@@ -1,7 +1,7 @@
 import ArrowForwardOutlined from "@mui/icons-material/ArrowForwardOutlined";
-import Button from "@mui/material/Button";
 import type { Template } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
+import { Button } from "components/Button/Button";
 import { TableEmpty } from "components/TableEmpty/TableEmpty";
 import { linkToTemplate, useLinks } from "modules/navigation";
 import type { FC } from "react";
@@ -53,13 +53,8 @@ export const WorkspacesEmpty: FC<WorkspacesEmptyProps> = ({
 				message={defaultTitle}
 				description={`${defaultMessage} To create a workspace, you first need to create a template.`}
 				cta={
-					<Button
-						component={Link}
-						to="/templates"
-						variant="contained"
-						startIcon={<ArrowForwardOutlined />}
-					>
-						Go to templates
+					<Button asChild>
+						<Link to="/templates">Go to templates</Link>
 					</Button>
 				}
 				css={{
@@ -162,13 +157,8 @@ export const WorkspacesEmpty: FC<WorkspacesEmptyProps> = ({
 					</div>
 
 					{templates && templates.length > totalFeaturedTemplates && (
-						<Button
-							component={Link}
-							to="/templates"
-							variant="contained"
-							startIcon={<ArrowForwardOutlined />}
-						>
-							See all templates
+						<Button asChild>
+							<Link to="/templates">See all templates</Link>
 						</Button>
 					)}
 				</div>

site/src/pages/WorkspacesPage/WorkspacesPageView.tsx

@@ -4,11 +4,11 @@ import KeyboardArrowDownOutlined from "@mui/icons-material/KeyboardArrowDownOutl
 import PlayArrowOutlined from "@mui/icons-material/PlayArrowOutlined";
 import StopOutlined from "@mui/icons-material/StopOutlined";
 import LoadingButton from "@mui/lab/LoadingButton";
-import Button from "@mui/material/Button";
 import Divider from "@mui/material/Divider";
 import { hasError, isApiValidationError } from "api/errors";
 import type { Template, Workspace } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { Button } from "components/Button/Button";
 import { EmptyState } from "components/EmptyState/EmptyState";
 import { Margins } from "components/Margins/Margins";
 import {