From 1f7da15092dd1fe1fa8dacd53a7fb88da24b56df Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 3 Mar 2026 04:26:54 +0000
Subject: [PATCH 1/6] fix: resolve badge sizing

---
 site/src/components/Badge/Badge.stories.tsx | 118 +++++++++++++++-----
 site/src/components/Badge/Badge.tsx         |  24 ++--
 2 files changed, 99 insertions(+), 43 deletions(-)

diff --git a/site/src/components/Badge/Badge.stories.tsx b/site/src/components/Badge/Badge.stories.tsx
index 9754262742280..36bb817a0ee38 100644
--- a/site/src/components/Badge/Badge.stories.tsx
+++ b/site/src/components/Badge/Badge.stories.tsx
@@ -1,56 +1,118 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Settings, TriangleAlert } from "lucide-react";
+import { Badges } from "components/Badges/Badges";
+import { Database, Settings, TriangleAlert } from "lucide-react";
 import { Badge } from "./Badge";
 
 const meta: Meta<typeof Badge> = {
 	title: "components/Badge",
-	component: Badge,
-	args: {
-		children: "Badge",
-	},
 };
 
 export default meta;
 type Story = StoryObj<typeof Badge>;
 
-export const Default: Story = {};
+export const Default: Story = {
+	render: () => (
+		<Badges>
+			<Badge size="xs">
+				<Database />
+				Text
+			</Badge>
+			<Badge size="sm">
+				<Database />
+				Text
+			</Badge>
+			<Badge size="md">
+				<Database />
+				Text
+			</Badge>
+		</Badges>
+	),
+};
 
 export const Warning: Story = {
-	args: {
-		variant: "warning",
-	},
+	render: () => (
+		<Badges>
+			<Badge variant="warning" size="xs">
+				Warning
+				<TriangleAlert />
+			</Badge>
+			<Badge variant="warning" size="sm">
+				<TriangleAlert />
+				Warning
+			</Badge>
+			<Badge variant="warning" size="md">
+				<TriangleAlert />
+				Warning
+			</Badge>
+		</Badges>
+	),
 };
 
 export const Destructive: Story = {
-	args: {
-		variant: "destructive",
-	},
+	render: () => (
+		<Badges>
+			<Badge variant="destructive" size="xs">
+				Destructive
+				<TriangleAlert />
+			</Badge>
+			<Badge variant="destructive" size="sm">
+				<TriangleAlert />
+				Destructive
+			</Badge>
+			<Badge variant="destructive" size="md">
+				<TriangleAlert />
+				Destructive
+			</Badge>
+		</Badges>
+	),
 };
 
 export const Info: Story = {
-	args: {
-		variant: "info",
-	},
+	render: () => (
+		<Badges>
+			<Badge variant="info" size="xs">
+				Info
+			</Badge>
+			<Badge variant="info" size="sm">
+				Info
+			</Badge>
+			<Badge variant="info" size="md">
+				Info
+			</Badge>
+		</Badges>
+	),
 };
 
 export const Green: Story = {
-	args: {
-		variant: "green",
-	},
+	render: () => (
+		<Badges>
+			<Badge variant="green" size="xs">
+				Green
+			</Badge>
+			<Badge variant="green" size="sm">
+				Green
+			</Badge>
+			<Badge variant="green" size="md">
+				Green
+			</Badge>
+		</Badges>
+	),
 };
 
 export const SmallWithIcon: Story = {
-	args: {
-		variant: "default",
-		size: "sm",
-		children: <>{<Settings />} Preset</>,
-	},
+	render: () => (
+		<Badge variant="default" size="sm">
+			<Settings />
+			Preset
+		</Badge>
+	),
 };
 
 export const MediumWithIcon: Story = {
-	args: {
-		variant: "warning",
-		size: "md",
-		children: <>{<TriangleAlert />} Immutable</>,
-	},
+	render: () => (
+		<Badge variant="warning" size="md">
+			<TriangleAlert />
+			Immutable
+		</Badge>
+	),
 };
diff --git a/site/src/components/Badge/Badge.tsx b/site/src/components/Badge/Badge.tsx
index df5c644033948..f536f8915bc3a 100644
--- a/site/src/components/Badge/Badge.tsx
+++ b/site/src/components/Badge/Badge.tsx
@@ -1,5 +1,5 @@
 /**
- * Copied from shadc/ui on 11/13/2024
+ * Copied from shadcn/ui on 11/13/2024
  * @see {@link https://ui.shadcn.com/docs/components/badge}
  */
 import { Slot } from "@radix-ui/react-slot";
@@ -8,15 +8,15 @@ import { cn } from "utils/cn";
 
 const badgeVariants = cva(
 	`
-	inline-flex items-center rounded-md border px-2 py-1 text-nowrap
-	transition-colors
-	[&_svg]:pointer-events-none [&_svg]:pr-0.5 [&_svg]:py-0.5 [&_svg]:mr-0.5
+	inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-nowrap
+	transition-colors [&_svg]:py-0.5
+	[&_svg]:pointer-events-none
 	`,
 	{
 		variants: {
 			variant: {
 				default:
-					"border-transparent bg-surface-secondary text-content-secondary shadow",
+					"border border-solid border-surface-secondary bg-surface-secondary text-content-secondary shadow hover:bg-surface-tertiary",
 				warning:
 					"border border-solid border-border-warning bg-surface-orange text-content-warning shadow",
 				destructive:
@@ -30,13 +30,9 @@ const badgeVariants = cva(
 				info: "border border-solid border-border-pending bg-surface-sky text-highlight-sky shadow",
 			},
 			size: {
-				xs: "text-2xs font-regular h-5 [&_svg]:hidden rounded px-1.5",
-				sm: "text-2xs font-regular h-5.5 [&_svg]:size-icon-xs",
-				md: "text-xs font-medium [&_svg]:size-icon-sm",
-			},
-			border: {
-				none: "border-transparent",
-				solid: "border border-solid",
+				xs: "border-0 text-2xs font-normal h-4.5 [&_svg]:size-icon-xs rounded",
+				sm: "text-2xs font-normal h-5.5 py-1 [&_svg]:size-icon-xs",
+				md: "text-xs font-normal py-1 [&_svg]:size-icon-xs",
 			},
 			hover: {
 				false: null,
@@ -53,7 +49,6 @@ const badgeVariants = cva(
 		defaultVariants: {
 			variant: "default",
 			size: "md",
-			border: "none",
 			hover: false,
 		},
 	},
@@ -68,7 +63,6 @@ export const Badge: React.FC<BadgeProps> = ({
 	className,
 	variant,
 	size,
-	border,
 	hover,
 	asChild = false,
 	...props
@@ -78,7 +72,7 @@ export const Badge: React.FC<BadgeProps> = ({
 	return (
 		<Comp
 			{...props}
-			className={cn(badgeVariants({ variant, size, border, hover }), className)}
+			className={cn(badgeVariants({ variant, size, hover }), className)}
 		/>
 	);
 };

From 95e695cfb6ceffdfc254d37de504b335fc119c4a Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 3 Mar 2026 05:11:35 +0000
Subject: [PATCH 2/6] fix: remove `border` from `<Badge />`

---
 site/src/components/Badges/Badges.tsx         | 38 ++++---------------
 .../DynamicParameter/DynamicParameter.tsx     |  6 +--
 .../ExternalAuthButton.tsx                    |  6 +--
 .../WorkspacesPage/BatchUpdateModalForm.tsx   |  4 +-
 4 files changed, 13 insertions(+), 41 deletions(-)

diff --git a/site/src/components/Badges/Badges.tsx b/site/src/components/Badges/Badges.tsx
index c594261c6c211..d2bc41b13e0be 100644
--- a/site/src/components/Badges/Badges.tsx
+++ b/site/src/components/Badges/Badges.tsx
@@ -3,18 +3,14 @@ import { Stack } from "components/Stack/Stack";
 
 export const EnabledBadge: React.FC = () => {
 	return (
-		<Badge className="option-enabled" variant="green" border="solid">
+		<Badge className="option-enabled" variant="green">
 			Enabled
 		</Badge>
 	);
 };
 
 export const EntitledBadge: React.FC = () => {
-	return (
-		<Badge border="solid" variant="green">
-			Entitled
-		</Badge>
-	);
+	return <Badge variant="green">Entitled</Badge>;
 };
 
 export const DisabledBadge: React.FC<React.ComponentPropsWithRef<"div">> = ({
@@ -28,11 +24,7 @@ export const DisabledBadge: React.FC<React.ComponentPropsWithRef<"div">> = ({
 };
 
 export const EnterpriseBadge: React.FC = () => {
-	return (
-		<Badge variant="purple" border="solid">
-			Enterprise
-		</Badge>
-	);
+	return <Badge variant="purple">Enterprise</Badge>;
 };
 
 interface PremiumBadgeProps {
@@ -42,35 +34,19 @@ interface PremiumBadgeProps {
 export const PremiumBadge: React.FC<PremiumBadgeProps> = ({
 	children = "Premium",
 }) => {
-	return (
-		<Badge variant="magenta" border="solid">
-			{children}
-		</Badge>
-	);
+	return <Badge variant="magenta">{children}</Badge>;
 };
 
 export const PreviewBadge: React.FC = () => {
-	return (
-		<Badge variant="purple" border="solid">
-			Preview
-		</Badge>
-	);
+	return <Badge variant="purple">Preview</Badge>;
 };
 
 export const AlphaBadge: React.FC = () => {
-	return (
-		<Badge variant="purple" border="solid">
-			Alpha
-		</Badge>
-	);
+	return <Badge variant="purple">Alpha</Badge>;
 };
 
 export const DeprecatedBadge: React.FC = () => {
-	return (
-		<Badge variant="warning" border="solid">
-			Deprecated
-		</Badge>
-	);
+	return <Badge variant="warning">Deprecated</Badge>;
 };
 
 export const Badges: React.FC<React.PropsWithChildren> = ({ children }) => {
diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
index ed3f3829cec83..224afd29dab80 100644
--- a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
+++ b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
@@ -142,7 +142,7 @@ const ParameterLabel: FC<ParameterLabelProps> = ({
 							<Tooltip>
 								<TooltipTrigger asChild>
 									<span className="flex items-center">
-										<Badge size="sm" variant="warning" border="none">
+										<Badge size="sm" variant="warning">
 											<TriangleAlert />
 											Immutable
 										</Badge>
@@ -160,7 +160,7 @@ const ParameterLabel: FC<ParameterLabelProps> = ({
 							<Tooltip>
 								<TooltipTrigger asChild>
 									<span className="flex items-center">
-										<Badge size="sm" variant="green" border="none">
+										<Badge size="sm" variant="green">
 											<Hourglass />
 											Ephemeral
 										</Badge>
@@ -212,7 +212,7 @@ const ParameterLabel: FC<ParameterLabelProps> = ({
 							<Tooltip>
 								<TooltipTrigger asChild>
 									<span className="flex items-center">
-										<Badge size="sm" variant="destructive" border="none">
+										<Badge size="sm" variant="destructive">
 											Required
 										</Badge>
 									</span>
diff --git a/site/src/pages/CreateWorkspacePage/ExternalAuthButton.tsx b/site/src/pages/CreateWorkspacePage/ExternalAuthButton.tsx
index e55fe1a60f13c..ae7fdf28c18a4 100644
--- a/site/src/pages/CreateWorkspacePage/ExternalAuthButton.tsx
+++ b/site/src/pages/CreateWorkspacePage/ExternalAuthButton.tsx
@@ -38,11 +38,7 @@ export const ExternalAuthButton: FC<ExternalAuthButtonProps> = ({
 				)}
 				<p className="font-semibold text-sm m-0">{auth.display_name}</p>
 				{!auth.authenticated && !auth.optional && (
-					<Badge
-						size="sm"
-						border="none"
-						variant={error ? "destructive" : "warning"}
-					>
+					<Badge size="sm" variant={error ? "destructive" : "warning"}>
 						Required
 					</Badge>
 				)}
diff --git a/site/src/pages/WorkspacesPage/BatchUpdateModalForm.tsx b/site/src/pages/WorkspacesPage/BatchUpdateModalForm.tsx
index 77bad68c8e9e2..fda62813a414f 100644
--- a/site/src/pages/WorkspacesPage/BatchUpdateModalForm.tsx
+++ b/site/src/pages/WorkspacesPage/BatchUpdateModalForm.tsx
@@ -117,12 +117,12 @@ const ReviewPanel: FC<ReviewPanelProps> = ({
 					<span className="flex flex-row items-center gap-2">
 						<span className="leading-tight">{workspaceName}</span>
 						{running && (
-							<Badge size="xs" variant="warning" border="none">
+							<Badge size="xs" variant="warning">
 								Running
 							</Badge>
 						)}
 						{transitioning && (
-							<Badge size="xs" variant="warning" border="none">
+							<Badge size="xs" variant="warning">
 								Getting latest status
 							</Badge>
 						)}

From 97cf346745a5bc483fc45e08c3fbcd4630be8f85 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Mon, 6 Apr 2026 11:36:14 +0000
Subject: [PATCH 3/6] fix: resolve lint issues

---
 site/src/components/Badge/Badge.stories.tsx                     | 2 +-
 .../LicensesSettingsPage/AIGovernanceAddOnCard.tsx              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/src/components/Badge/Badge.stories.tsx b/site/src/components/Badge/Badge.stories.tsx
index 36bb817a0ee38..9640a1f693df6 100644
--- a/site/src/components/Badge/Badge.stories.tsx
+++ b/site/src/components/Badge/Badge.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Badges } from "components/Badges/Badges";
 import { Database, Settings, TriangleAlert } from "lucide-react";
+import { Badges } from "#/components/Badges/Badges";
 import { Badge } from "./Badge";
 
 const meta: Meta<typeof Badge> = {
diff --git a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/AIGovernanceAddOnCard.tsx b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/AIGovernanceAddOnCard.tsx
index 1a1da43fdf870..648d29d55b451 100644
--- a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/AIGovernanceAddOnCard.tsx
+++ b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/AIGovernanceAddOnCard.tsx
@@ -52,7 +52,7 @@ export const AIGovernanceAddOnCard: FC<AIGovernanceAddOnCardProps> = ({
 								</TooltipContent>
 							</Tooltip>
 						</div>
-						<Badge variant="magenta" size="sm" border="solid">
+						<Badge variant="magenta" size="sm">
 							AI add-on
 						</Badge>
 					</div>

From 9fbdec60af8699e7a91ffbc2fabd54b0f3ec5426 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Mon, 6 Apr 2026 11:49:15 +0000
Subject: [PATCH 4/6] fix: manual size as no tailwind 5

---
 site/src/components/Badge/Badge.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/Badge/Badge.tsx b/site/src/components/Badge/Badge.tsx
index 26eddb27568ba..f2cdcb3c7fb21 100644
--- a/site/src/components/Badge/Badge.tsx
+++ b/site/src/components/Badge/Badge.tsx
@@ -30,7 +30,7 @@ const badgeVariants = cva(
 				info: "border border-solid border-border-pending bg-surface-sky text-highlight-sky shadow",
 			},
 			size: {
-				xs: "border-0 text-2xs font-normal h-4.5 [&_svg]:size-icon-xs rounded",
+				xs: "border-0 text-2xs font-normal h-[18px] [&_svg]:size-icon-xs rounded",
 				sm: "text-2xs font-normal h-5.5 py-1 [&_svg]:size-icon-xs",
 				md: "text-xs font-normal py-1 [&_svg]:size-icon-xs",
 			},

From 9ecacb7cbf1ab461251fea1eaf36bd3b90f7faf1 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Mon, 6 Apr 2026 18:10:13 +0000
Subject: [PATCH 5/6] fix: resolve github feedback

---
 site/src/components/Badge/Badge.stories.tsx | 32 +++++++++++++++++++++
 site/src/components/Badge/Badge.tsx         | 14 ++++-----
 2 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/site/src/components/Badge/Badge.stories.tsx b/site/src/components/Badge/Badge.stories.tsx
index 9640a1f693df6..d1478630ae5b2 100644
--- a/site/src/components/Badge/Badge.stories.tsx
+++ b/site/src/components/Badge/Badge.stories.tsx
@@ -99,6 +99,38 @@ export const Green: Story = {
 	),
 };
 
+export const Purple: Story = {
+	render: () => (
+		<Badges>
+			<Badge variant="purple" size="xs">
+				Purple
+			</Badge>
+			<Badge variant="purple" size="sm">
+				Purple
+			</Badge>
+			<Badge variant="purple" size="md">
+				Purple
+			</Badge>
+		</Badges>
+	),
+};
+
+export const Magenta: Story = {
+	render: () => (
+		<Badges>
+			<Badge variant="magenta" size="xs">
+				Magenta
+			</Badge>
+			<Badge variant="magenta" size="sm">
+				Magenta
+			</Badge>
+			<Badge variant="magenta" size="md">
+				Magenta
+			</Badge>
+		</Badges>
+	),
+};
+
 export const SmallWithIcon: Story = {
 	render: () => (
 		<Badge variant="default" size="sm">
diff --git a/site/src/components/Badge/Badge.tsx b/site/src/components/Badge/Badge.tsx
index f2cdcb3c7fb21..773961c32831c 100644
--- a/site/src/components/Badge/Badge.tsx
+++ b/site/src/components/Badge/Badge.tsx
@@ -16,18 +16,18 @@ const badgeVariants = cva(
 		variants: {
 			variant: {
 				default:
-					"border border-solid border-surface-secondary bg-surface-secondary text-content-secondary shadow hover:bg-surface-tertiary",
+					"border-surface-secondary bg-surface-secondary text-content-secondary shadow",
 				warning:
-					"border border-solid border-border-warning bg-surface-orange text-content-warning shadow",
+					"border-border-warning bg-surface-orange text-content-warning shadow",
 				destructive:
-					"border border-solid border-border-destructive bg-surface-red text-highlight-red shadow",
+					"border-border-destructive bg-surface-red text-highlight-red shadow",
 				green:
-					"border border-solid border-border-green bg-surface-green text-highlight-green shadow",
+					"border-border-green bg-surface-green text-highlight-green shadow",
 				purple:
-					"border border-solid border-border-purple bg-surface-purple text-highlight-purple shadow",
+					"border-border-purple bg-surface-purple text-highlight-purple shadow",
 				magenta:
-					"border border-solid border-border-magenta bg-surface-magenta text-highlight-magenta shadow",
-				info: "border border-solid border-border-pending bg-surface-sky text-highlight-sky shadow",
+					"border-border-magenta bg-surface-magenta text-highlight-magenta shadow",
+				info: "border-border-pending bg-surface-sky text-highlight-sky shadow",
 			},
 			size: {
 				xs: "border-0 text-2xs font-normal h-[18px] [&_svg]:size-icon-xs rounded",

From ccf4a785762d214d1c5ec0214d93596b691b4aab Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Wed, 8 Apr 2026 17:36:48 +0000
Subject: [PATCH 6/6] fix: resolve border not showing

---
 site/src/components/Badge/Badge.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/Badge/Badge.tsx b/site/src/components/Badge/Badge.tsx
index 773961c32831c..417ddc24c516f 100644
--- a/site/src/components/Badge/Badge.tsx
+++ b/site/src/components/Badge/Badge.tsx
@@ -9,7 +9,7 @@ import { cn } from "#/utils/cn";
 const badgeVariants = cva(
 	`
 	inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-nowrap
-	transition-colors [&_svg]:py-0.5
+	transition-colors [&_svg]:py-0.5 border-solid
 	[&_svg]:pointer-events-none
 	`,
 	{