From 1a0bd43e260cba70561dd967815d8420793a042c Mon Sep 17 00:00:00 2001
From: Adam Dierkens <adierkens@github.com>
Date: Mon, 6 Jul 2026 12:58:41 -0400
Subject: [PATCH] Avatar: add min-width to prevent collapse in min-content
 containers

Passing an Avatar into the Button leadingVisual slot collapsed the image
because the global `img { max-width: 100% }` rule resolves against the
`min-content` grid track. Add a matching `min-width` alongside every
`width` declaration (base regular + responsive narrow/regular/wide) so the
avatar cannot be shrunk below its intended size.

Also adds a Button + Avatar leadingVisual dev story as a VRT anchor.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
---
 .changeset/avatar-min-width.md                |  5 +++++
 packages/react/src/Avatar/Avatar.module.css   |  4 ++++
 .../react/src/Button/Button.dev.stories.tsx   | 22 +++++++++++++++++++
 3 files changed, 31 insertions(+)
 create mode 100644 .changeset/avatar-min-width.md

diff --git a/.changeset/avatar-min-width.md b/.changeset/avatar-min-width.md
new file mode 100644
index 00000000000..8cddab61cdd
--- /dev/null
+++ b/.changeset/avatar-min-width.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Avatar: Prevent the image from collapsing when rendered inside a `min-content` sized container, such as the Button `leadingVisual` slot
diff --git a/packages/react/src/Avatar/Avatar.module.css b/packages/react/src/Avatar/Avatar.module.css
index fc67531b9a7..d34dad774a9 100644
--- a/packages/react/src/Avatar/Avatar.module.css
+++ b/packages/react/src/Avatar/Avatar.module.css
@@ -1,6 +1,7 @@
 :where(.Avatar) {
   display: inline-block;
   width: var(--avatarSize-regular);
+  min-width: var(--avatarSize-regular);
   height: var(--avatarSize-regular);
   overflow: hidden; /* Ensure page layout in Firefox should images fail to load */
   /* stylelint-disable-next-line primer/typography */
@@ -18,16 +19,19 @@
   &:where([data-responsive]) {
     @media screen and (--viewportRange-narrow) {
       width: var(--avatarSize-narrow);
+      min-width: var(--avatarSize-narrow);
       height: var(--avatarSize-narrow);
     }
 
     @media screen and (--viewportRange-regular) {
       width: var(--avatarSize-regular);
+      min-width: var(--avatarSize-regular);
       height: var(--avatarSize-regular);
     }
 
     @media screen and (--viewportRange-wide) {
       width: var(--avatarSize-wide);
+      min-width: var(--avatarSize-wide);
       height: var(--avatarSize-wide);
     }
   }
diff --git a/packages/react/src/Button/Button.dev.stories.tsx b/packages/react/src/Button/Button.dev.stories.tsx
index 8d23de9c81f..6dd1d53fb70 100644
--- a/packages/react/src/Button/Button.dev.stories.tsx
+++ b/packages/react/src/Button/Button.dev.stories.tsx
@@ -1,6 +1,7 @@
 import {SearchIcon, TriangleDownIcon, EyeIcon, HeartFillIcon} from '@primer/octicons-react'
 import {Button, IconButton} from '.'
 import {Stack} from '../Stack'
+import Avatar from '../Avatar'
 
 export default {
   title: 'Components/Button/Dev',
@@ -86,6 +87,27 @@ export const DisabledButtonVariants = () => {
   )
 }
 
+export const LeadingVisualAvatar = () => {
+  const avatarSrc = 'https://avatars.githubusercontent.com/u/7143434?v=4'
+  return (
+    <Stack direction="horizontal" align="center">
+      <Button leadingVisual={<Avatar src={avatarSrc} alt="mona" />}>Default</Button>
+      <Button variant="primary" leadingVisual={<Avatar src={avatarSrc} alt="mona" />}>
+        Primary
+      </Button>
+      <Button variant="invisible" leadingVisual={<Avatar src={avatarSrc} alt="mona" />}>
+        Invisible
+      </Button>
+      <Button size="small" leadingVisual={<Avatar size={16} src={avatarSrc} alt="mona" />}>
+        Small
+      </Button>
+      <Button size="large" leadingVisual={<Avatar size={24} src={avatarSrc} alt="mona" />}>
+        Large
+      </Button>
+    </Stack>
+  )
+}
+
 export const LinkVariantWithUnderlinePreference = () => {
   return (
     <Stack gap="spacious">