From 6737e2588e8cd0712689c66800ef87bbc37af5eb Mon Sep 17 00:00:00 2001
From: TJ <tracy@coder.com>
Date: Wed, 6 May 2026 18:25:41 -0700
Subject: [PATCH] fix(site): reduce agents beta badge size from sm to xs
 (#25011)

Reduces the beta badge size in the Coder Agents UI from `sm` to `xs` for
better visual balance with the logo.

## Changes

- Added `xs` size variant to `FeatureStageBadge`, styled to match the
existing `Badge` component's `xs` variant (`text-2xs`, `h-[18px]`,
`border-0`, `rounded`)
- Updated both usages in `AgentPageHeader` (mobile) and `AgentsSidebar`
(desktop) from `size="sm"` to `size="xs"`
- Added `ExtraSmallBeta` Storybook story for the new size

> Generated by Coder Agents
---
 .../FeatureStageBadge/FeatureStageBadge.stories.tsx        | 7 +++++++
 .../src/components/FeatureStageBadge/FeatureStageBadge.tsx | 3 ++-
 site/src/pages/AgentsPage/components/AgentPageHeader.tsx   | 2 +-
 .../pages/AgentsPage/components/Sidebar/AgentsSidebar.tsx  | 2 +-
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/site/src/components/FeatureStageBadge/FeatureStageBadge.stories.tsx b/site/src/components/FeatureStageBadge/FeatureStageBadge.stories.tsx
index 7804dcd774..520970cd54 100644
--- a/site/src/components/FeatureStageBadge/FeatureStageBadge.stories.tsx
+++ b/site/src/components/FeatureStageBadge/FeatureStageBadge.stories.tsx
@@ -12,6 +12,13 @@ const meta: Meta<typeof FeatureStageBadge> = {
 export default meta;
 type Story = StoryObj<typeof FeatureStageBadge>;
 
+export const ExtraSmallBeta: Story = {
+	args: {
+		size: "xs",
+		contentType: "beta",
+	},
+};
+
 export const SmallBeta: Story = {
 	args: {
 		size: "sm",
diff --git a/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx b/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx
index 2902070516..5c76219696 100644
--- a/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx
+++ b/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx
@@ -21,7 +21,7 @@ type FeatureStageBadgeProps = Readonly<
 	Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
 		contentType: keyof typeof featureStageBadgeTypes;
 		labelText?: string;
-		size?: "sm" | "md";
+		size?: "xs" | "sm" | "md";
 	}
 >;
 
@@ -31,6 +31,7 @@ const badgeColorClasses = {
 } as const;
 
 const badgeSizeClasses = {
+	xs: "text-2xs font-normal px-1.5 py-0.5 h-[18px] rounded border-0",
 	sm: "text-xs font-medium px-2 py-1",
 	md: "text-base px-2 py-1",
 } as const;
diff --git a/site/src/pages/AgentsPage/components/AgentPageHeader.tsx b/site/src/pages/AgentsPage/components/AgentPageHeader.tsx
index c37ce8998a..c87517e490 100644
--- a/site/src/pages/AgentsPage/components/AgentPageHeader.tsx
+++ b/site/src/pages/AgentsPage/components/AgentPageHeader.tsx
@@ -133,7 +133,7 @@ export const AgentPageHeader: FC<AgentPageHeaderProps> = ({
 					<NavLink to="/workspaces" className="inline-flex">
 						<ProductLogo className="size-6" />
 					</NavLink>
-					<FeatureStageBadge contentType="beta" size="sm" />
+					<FeatureStageBadge contentType="beta" size="xs" />
 				</div>
 			)}
 			{isSidebarCollapsed && (
diff --git a/site/src/pages/AgentsPage/components/Sidebar/AgentsSidebar.tsx b/site/src/pages/AgentsPage/components/Sidebar/AgentsSidebar.tsx
index eb92d438e9..9d8e5f6a33 100644
--- a/site/src/pages/AgentsPage/components/Sidebar/AgentsSidebar.tsx
+++ b/site/src/pages/AgentsPage/components/Sidebar/AgentsSidebar.tsx
@@ -1085,7 +1085,7 @@ export const AgentsSidebar: FC<AgentsSidebarProps> = (props) => {
 							<NavLink to="/workspaces" className="inline-flex">
 								<ProductLogo className="size-6" />
 							</NavLink>
-							<FeatureStageBadge contentType="beta" size="sm" />
+							<FeatureStageBadge contentType="beta" size="xs" />
 						</div>
 						<div className="flex items-center gap-0.5 -mr-1.5">
 							<Button