diff --git a/.changeset/blue-dragons-marry.md b/.changeset/blue-dragons-marry.md
new file mode 100644
index 00000000000..040a6d1b931
--- /dev/null
+++ b/.changeset/blue-dragons-marry.md
@@ -0,0 +1,11 @@
+---
+"@primer/react": patch
+---
+
+Adds truncation features to the LabelGroup component:
+- truncate LabelGroup children after a static number of children (for example, truncate after the 5th label)
+- truncate LabelGroup children to fit in the width of the parent
+- show full list in an Overlay
+- show full list inline
+
+<!-- Changed components: LabelGroup -->
diff --git a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Default-dark-colorblind-linux.png
index 8c33f704f80..1e23872f399 100644
Binary files a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Default-dark-colorblind-linux.png and b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Default-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Default-dark-dimmed-linux.png
index e28973b7417..e36019d62f5 100644
Binary files a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Default-dark-dimmed-linux.png and b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Default-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Default-dark-high-contrast-linux.png
index 9b9039f5076..a8a6683fcff 100644
Binary files a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Default-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Default-dark-linux.png b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Default-dark-linux.png
index 917e8babe7a..a9486d636b4 100644
Binary files a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Default-dark-linux.png and b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Default-dark-linux.png differ
diff --git a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Default-dark-tritanopia-linux.png
index 917e8babe7a..1e23872f399 100644
Binary files a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Default-dark-tritanopia-linux.png and b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Default-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Default-light-colorblind-linux.png b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Default-light-colorblind-linux.png
index 98f27f8aa1b..02dcb125c43 100644
Binary files a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Default-light-colorblind-linux.png and b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Default-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Default-light-high-contrast-linux.png
index c5c02fb32aa..0dbe2623717 100644
Binary files a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Default-light-high-contrast-linux.png and b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Default-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Default-light-linux.png b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Default-light-linux.png
index f82a1be25f5..b409a72a0ca 100644
Binary files a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Default-light-linux.png and b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Default-light-linux.png differ
diff --git a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Default-light-tritanopia-linux.png
index cd50d271113..02dcb125c43 100644
Binary files a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Default-light-tritanopia-linux.png and b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Default-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Playground-dark-colorblind-linux.png b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Playground-dark-colorblind-linux.png
index 8c33f704f80..eb3aa0717fe 100644
Binary files a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Playground-dark-colorblind-linux.png and b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Playground-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Playground-dark-dimmed-linux.png b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Playground-dark-dimmed-linux.png
index e28973b7417..1ee0e54f7c3 100644
Binary files a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Playground-dark-dimmed-linux.png and b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Playground-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Playground-dark-high-contrast-linux.png b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Playground-dark-high-contrast-linux.png
index 9b9039f5076..3f4dae30d75 100644
Binary files a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Playground-dark-high-contrast-linux.png and b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Playground-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Playground-dark-linux.png b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Playground-dark-linux.png
index 917e8babe7a..102e0e58e6e 100644
Binary files a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Playground-dark-linux.png and b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Playground-dark-linux.png differ
diff --git a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Playground-dark-tritanopia-linux.png b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Playground-dark-tritanopia-linux.png
index 917e8babe7a..eb3aa0717fe 100644
Binary files a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Playground-dark-tritanopia-linux.png and b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Playground-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Playground-light-colorblind-linux.png b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Playground-light-colorblind-linux.png
index 98f27f8aa1b..7270d86decd 100644
Binary files a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Playground-light-colorblind-linux.png and b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Playground-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Playground-light-high-contrast-linux.png b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Playground-light-high-contrast-linux.png
index c5c02fb32aa..4dfcaaeee05 100644
Binary files a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Playground-light-high-contrast-linux.png and b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Playground-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Playground-light-linux.png b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Playground-light-linux.png
index f82a1be25f5..1abab13922e 100644
Binary files a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Playground-light-linux.png and b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Playground-light-linux.png differ
diff --git a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Playground-light-tritanopia-linux.png b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Playground-light-tritanopia-linux.png
index cd50d271113..7270d86decd 100644
Binary files a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Playground-light-tritanopia-linux.png and b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-Playground-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateAuto-dark-colorblind-linux.png b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateAuto-dark-colorblind-linux.png
new file mode 100644
index 00000000000..eb3aa0717fe
Binary files /dev/null and b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateAuto-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateAuto-dark-dimmed-linux.png b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateAuto-dark-dimmed-linux.png
new file mode 100644
index 00000000000..1ee0e54f7c3
Binary files /dev/null and b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateAuto-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateAuto-dark-high-contrast-linux.png b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateAuto-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..3f4dae30d75
Binary files /dev/null and b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateAuto-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateAuto-dark-linux.png b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateAuto-dark-linux.png
new file mode 100644
index 00000000000..102e0e58e6e
Binary files /dev/null and b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateAuto-dark-linux.png differ
diff --git a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateAuto-dark-tritanopia-linux.png b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateAuto-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..eb3aa0717fe
Binary files /dev/null and b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateAuto-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateAuto-light-colorblind-linux.png b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateAuto-light-colorblind-linux.png
new file mode 100644
index 00000000000..7270d86decd
Binary files /dev/null and b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateAuto-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateAuto-light-high-contrast-linux.png b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateAuto-light-high-contrast-linux.png
new file mode 100644
index 00000000000..4dfcaaeee05
Binary files /dev/null and b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateAuto-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateAuto-light-linux.png b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateAuto-light-linux.png
new file mode 100644
index 00000000000..1abab13922e
Binary files /dev/null and b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateAuto-light-linux.png differ
diff --git a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateAuto-light-tritanopia-linux.png b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateAuto-light-tritanopia-linux.png
new file mode 100644
index 00000000000..7270d86decd
Binary files /dev/null and b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateAuto-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateToFive-dark-colorblind-linux.png b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateToFive-dark-colorblind-linux.png
new file mode 100644
index 00000000000..eb3aa0717fe
Binary files /dev/null and b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateToFive-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateToFive-dark-dimmed-linux.png b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateToFive-dark-dimmed-linux.png
new file mode 100644
index 00000000000..1ee0e54f7c3
Binary files /dev/null and b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateToFive-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateToFive-dark-high-contrast-linux.png b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateToFive-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..3f4dae30d75
Binary files /dev/null and b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateToFive-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateToFive-dark-linux.png b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateToFive-dark-linux.png
new file mode 100644
index 00000000000..102e0e58e6e
Binary files /dev/null and b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateToFive-dark-linux.png differ
diff --git a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateToFive-dark-tritanopia-linux.png b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateToFive-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..eb3aa0717fe
Binary files /dev/null and b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateToFive-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateToFive-light-colorblind-linux.png b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateToFive-light-colorblind-linux.png
new file mode 100644
index 00000000000..7270d86decd
Binary files /dev/null and b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateToFive-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateToFive-light-high-contrast-linux.png b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateToFive-light-high-contrast-linux.png
new file mode 100644
index 00000000000..4dfcaaeee05
Binary files /dev/null and b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateToFive-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateToFive-light-linux.png b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateToFive-light-linux.png
new file mode 100644
index 00000000000..1abab13922e
Binary files /dev/null and b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateToFive-light-linux.png differ
diff --git a/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateToFive-light-tritanopia-linux.png b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateToFive-light-tritanopia-linux.png
new file mode 100644
index 00000000000..7270d86decd
Binary files /dev/null and b/.playwright/snapshots/components/LabelGroup.test.ts-snapshots/LabelGroup-TruncateToFive-light-tritanopia-linux.png differ
diff --git a/e2e/components/LabelGroup.test.ts b/e2e/components/LabelGroup.test.ts
index b4e48650df7..06a4b77d8a7 100644
--- a/e2e/components/LabelGroup.test.ts
+++ b/e2e/components/LabelGroup.test.ts
@@ -58,4 +58,74 @@ test.describe('LabelGroup', () => {
       })
     }
   })
+
+  test.describe('Truncated to 5', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-labelgroup--playground',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`LabelGroup.TruncateToFive.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-labelgroup-features--truncate-after-five',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Truncated to fit', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-labelgroup--playground',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`LabelGroup.TruncateAuto.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-labelgroup-features--truncate-auto',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('LabelGroup Interactions', () => {
+    test('inline overflow - focuses the first focusable token that was previously hidden', async ({page}) => {
+      await visit(page, {
+        id: 'components-labelgroup-features--truncate-auto-expand-inline-with-interactive-tokens',
+        globals: {
+          colorScheme: 'light',
+        },
+      })
+      await page.locator('button', {hasText: '+5'}).click()
+
+      await expect(page.locator('button', {hasText: 'Twelve'})).toBeFocused()
+    })
+  })
 })
diff --git a/src/AnchoredOverlay/AnchoredOverlay.docs.json b/src/AnchoredOverlay/AnchoredOverlay.docs.json
index a146edd08de..698f73ad698 100644
--- a/src/AnchoredOverlay/AnchoredOverlay.docs.json
+++ b/src/AnchoredOverlay/AnchoredOverlay.docs.json
@@ -53,6 +53,18 @@
       "defaultValue": "'start'",
       "description": ""
     },
+    {
+      "name": "alignmentOffset",
+      "type": "number",
+      "defaultValue": "4",
+      "description": "An additional offset, in pixels, to move the floating element from the aligning edge. Positive values move the floating element in the direction of center-alignment. Negative values move the floating element away from center-alignment. When align is `'center`, positive offsets move the floating element right (top or bottom anchor side) or down (left or right anchor side). If using outside positioning, or if `align` is set to `'center'`, this defaults to `0` instead of `4`."
+    },
+    {
+      "name": "anchorOffset",
+      "type": "number",
+      "defaultValue": "4",
+      "description": "The number of pixels between the anchor edge and the floating element. Positive values move the floating element farther from the anchor element (for outside positioning) or further inside the anchor element (for inside positioning). Negative values have the opposite effect. If `side` is set to `'inside-center'`, this defaults to `0` instead of `4`."
+    },
     {
       "name": "overlayProps",
       "type": "Partial<OverlayProps>",
diff --git a/src/AnchoredOverlay/AnchoredOverlay.tsx b/src/AnchoredOverlay/AnchoredOverlay.tsx
index 510ea7562fc..ed9b2643f22 100644
--- a/src/AnchoredOverlay/AnchoredOverlay.tsx
+++ b/src/AnchoredOverlay/AnchoredOverlay.tsx
@@ -80,7 +80,7 @@ interface AnchoredOverlayBaseProps extends Pick<OverlayProps, 'height' | 'width'
 
 export type AnchoredOverlayProps = AnchoredOverlayBaseProps &
   (AnchoredOverlayPropsWithAnchor | AnchoredOverlayPropsWithoutAnchor) &
-  Partial<Pick<PositionSettings, 'align' | 'side'>>
+  Partial<Pick<PositionSettings, 'align' | 'side' | 'anchorOffset' | 'alignmentOffset'>>
 
 /**
  * An `AnchoredOverlay` provides an anchor that will open a floating overlay positioned relative to the anchor.
@@ -101,6 +101,8 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
   focusZoneSettings,
   side = 'outside-bottom',
   align = 'start',
+  alignmentOffset,
+  anchorOffset,
 }) => {
   const anchorRef = useProvidedRefOrCreate(externalAnchorRef)
   const [overlayRef, updateOverlayRef] = useRenderForcingRef<HTMLDivElement>()
@@ -140,6 +142,8 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
       floatingElementRef: overlayRef,
       side,
       align,
+      alignmentOffset,
+      anchorOffset,
     },
     [overlayRef.current],
   )
diff --git a/src/LabelGroup/LabelGroup.docs.json b/src/LabelGroup/LabelGroup.docs.json
index cd0771bf328..43587d9dcf7 100644
--- a/src/LabelGroup/LabelGroup.docs.json
+++ b/src/LabelGroup/LabelGroup.docs.json
@@ -6,8 +6,16 @@
   "stories": [],
   "props": [
     {
-      "name": "sx",
-      "type": "SystemStyleObject"
+      "name": "overflowStyle",
+      "description": "How hidden tokens should be shown. `'inline'` shows the hidden tokens after the visible tokens. `'overlay'` shows all tokens in an overlay that appears on top of the visible tokens.",
+      "defaultValue": "",
+      "type": "'inline' | 'overlay'"
+    },
+    {
+      "name": "visibleChildCount",
+      "description": "How many tokens to show. `'auto'` truncates the tokens to fit in the parent container. Passing a number will truncate after that number tokens. If this is undefined, tokens will never be truncated.",
+      "defaultValue": "",
+      "type": "'auto' | number"
     }
   ],
   "subcomponents": []
diff --git a/src/LabelGroup/LabelGroup.features.stories.tsx b/src/LabelGroup/LabelGroup.features.stories.tsx
new file mode 100644
index 00000000000..32d75858c12
--- /dev/null
+++ b/src/LabelGroup/LabelGroup.features.stories.tsx
@@ -0,0 +1,143 @@
+import React from 'react'
+import styled from 'styled-components'
+import LabelGroup from './LabelGroup'
+import {Meta, Story} from '@storybook/react'
+import Token from '../Token/Token'
+import Label from '../Label/Label'
+
+const meta: Meta = {
+  title: 'Components/LabelGroup/Features',
+  component: LabelGroup,
+  decorators: [
+    Story => {
+      return (
+        <>
+          <Story />
+        </>
+      )
+    },
+  ],
+}
+
+const ResizableContainer = styled.div`
+  outline: 1px solid black;
+  overflow: auto;
+  padding: 0.25rem;
+  resize: horizontal;
+  width: 600px;
+`
+
+export const TruncateAuto: Story = () => (
+  <ResizableContainer>
+    <LabelGroup visibleChildCount="auto">
+      <Label>One</Label>
+      <Label>Two</Label>
+      <Label>Three</Label>
+      <Label>Four</Label>
+      <Label>Five</Label>
+      <Label>Six</Label>
+      <Label>Seven</Label>
+      <Label>Eight</Label>
+      <Label>Nine</Label>
+      <Label>Ten</Label>
+      <Label>Eleven</Label>
+      <Label>Twelve</Label>
+      <Label>Thirteen</Label>
+      <Label>Fourteen</Label>
+      <Label>Fifteen</Label>
+      <Label>Sixteen</Label>
+    </LabelGroup>
+  </ResizableContainer>
+)
+
+export const TruncateAutoWithInteractiveTokens: Story = () => (
+  <ResizableContainer>
+    <LabelGroup visibleChildCount="auto">
+      <Token as="button" text="One" />
+      <Token as="button" text="Two" />
+      <Token as="button" text="Three" />
+      <Token as="button" text="Four" />
+      <Token as="button" text="Five" />
+      <Token as="button" text="Six" />
+      <Token as="button" text="Seven" />
+      <Token as="button" text="Eight" />
+      <Token as="button" text="Nine" />
+      <Token as="button" text="Ten" />
+      <Token as="button" text="Eleven" />
+      <Token as="button" text="Twelve" />
+      <Token as="button" text="Thirteen" />
+      <Token as="button" text="Fourteen" />
+      <Token as="button" text="Fifteen" />
+      <Token as="button" text="Sixteen" />
+    </LabelGroup>
+  </ResizableContainer>
+)
+
+export const TruncateAfterFive: Story = () => (
+  <LabelGroup visibleChildCount={5}>
+    <Label>One</Label>
+    <Label>Two</Label>
+    <Label>Three</Label>
+    <Label>Four</Label>
+    <Label>Five</Label>
+    <Label>Six</Label>
+    <Label>Seven</Label>
+    <Label>Eight</Label>
+    <Label>Nine</Label>
+    <Label>Ten</Label>
+    <Label>Eleven</Label>
+    <Label>Twelve</Label>
+    <Label>Thirteen</Label>
+    <Label>Fourteen</Label>
+    <Label>Fifteen</Label>
+    <Label>Sixteen</Label>
+  </LabelGroup>
+)
+
+export const TruncateAutoExpandInline: Story = () => (
+  <ResizableContainer>
+    <LabelGroup visibleChildCount="auto" overflowStyle="inline">
+      <Label>One</Label>
+      <Label>Two</Label>
+      <Label>Three</Label>
+      <Label>Four</Label>
+      <Label>Five</Label>
+      <Label>Six</Label>
+      <Label>Seven</Label>
+      <Label>Eight</Label>
+      <Label>Nine</Label>
+      <Label>Ten</Label>
+      <Label>Eleven</Label>
+      <Label>Twelve</Label>
+      <Label>Thirteen</Label>
+      <Label>Fourteen</Label>
+      <Label>Fifteen</Label>
+      <Label>Sixteen</Label>
+    </LabelGroup>
+  </ResizableContainer>
+)
+
+export const TruncateAutoExpandInlineWithInteractiveTokens: Story = () => (
+  <ResizableContainer>
+    <LabelGroup visibleChildCount="auto" overflowStyle="inline">
+      <Token as="button" text="One" />
+      <Token as="button" text="Two" />
+      <Token as="button" text="Three" />
+      <Token as="button" text="Four" />
+      <Token as="button" text="Five" />
+      <Token as="button" text="Six" />
+      <Token as="button" text="Seven" />
+      <Token as="button" text="Eight" />
+      <Token as="button" text="Nine" />
+      <Token as="button" text="Ten" />
+      <Token as="button" text="Eleven" />
+      <Token as="button" text="Twelve" />
+      <Token as="button" text="Thirteen" />
+      <Token as="button" text="Fourteen" />
+      <Token as="button" text="Fifteen" />
+      <Token as="button" text="Sixteen" />
+    </LabelGroup>
+  </ResizableContainer>
+)
+
+export default meta
diff --git a/src/LabelGroup/LabelGroup.stories.tsx b/src/LabelGroup/LabelGroup.stories.tsx
index ed640508827..fd241a09f3f 100644
--- a/src/LabelGroup/LabelGroup.stories.tsx
+++ b/src/LabelGroup/LabelGroup.stories.tsx
@@ -1,34 +1,102 @@
 import React from 'react'
-import {Meta, ComponentStory} from '@storybook/react'
-import LabelGroup from './LabelGroup'
-import Label from '../Label'
+import styled from 'styled-components'
+import LabelGroup, {LabelGroupProps} from './LabelGroup'
+import {Meta, Story} from '@storybook/react'
+import Label from '../Label/Label'
 
-export default {
+const meta: Meta = {
   title: 'Components/LabelGroup',
   component: LabelGroup,
-} as Meta<typeof LabelGroup>
+  argTypes: {
+    overflowStyle: {
+      control: {
+        type: 'radio',
+      },
+      options: ['inline', 'overlay'],
+    },
+    autoTruncateTokens: {
+      name: 'Truncate to fit width',
+      defaultValue: false,
+      control: {
+        type: 'boolean',
+      },
+    },
+    visibleChildCount: {
+      control: {
+        type: 'number',
+      },
+      if: {arg: 'autoTruncateTokens', truthy: false},
+    },
+  },
+  decorators: [
+    Story => {
+      return (
+        <>
+          <Story />
+        </>
+      )
+    },
+  ],
+}
 
-export const Default = () => (
+const ResizableContainer = styled.div`
+  outline: 1px solid black;
+  overflow: auto;
+  padding: 0.25rem;
+  resize: horizontal;
+  width: 600px;
+`
+
+export const Default: Story = () => (
   <LabelGroup>
-    <Label>Default label</Label>
-    <Label variant="danger">Label with background indicating a closed PR state</Label>
-    <Label variant="primary">Default outline label</Label>
+    <Label>One</Label>
+    <Label>Two</Label>
+    <Label>Three</Label>
+    <Label>Four</Label>
+    <Label>Five</Label>
+    <Label>Six</Label>
+    <Label>Seven</Label>
+    <Label>Eight</Label>
+    <Label>Nine</Label>
+    <Label>Ten</Label>
+    <Label>Eleven</Label>
+    <Label>Twelve</Label>
+    <Label>Thirteen</Label>
+    <Label>Fourteen</Label>
+    <Label>Fifteen</Label>
+    <Label>Sixteen</Label>
   </LabelGroup>
 )
 
-export const Playground: ComponentStory<typeof LabelGroup> = args => (
-  <LabelGroup {...args}>
-    <Label>Default label</Label>
-    <Label variant="danger">Label with background indicating a closed PR state</Label>
-    <Label variant="primary">Default outline label</Label>
-  </LabelGroup>
-)
+export const Playground: Story = ({
+  autoTruncateTokens,
+  visibleChildCount,
+  ...restArgs
+}: LabelGroupProps & {autoTruncateTokens?: boolean}) => {
+  const visibleChildCountValue = autoTruncateTokens ? 'auto' : visibleChildCount
 
-Playground.argTypes = {
-  sx: {
-    controls: false,
-    table: {
-      disable: true,
-    },
-  },
+  return (
+    <ResizableContainer>
+      <LabelGroup {...restArgs} visibleChildCount={visibleChildCountValue}>
+        <Label>One</Label>
+        <Label>Two</Label>
+        <Label>Three</Label>
+        <Label>Four</Label>
+        <Label>Five</Label>
+        <Label>Six</Label>
+        <Label>Seven</Label>
+        <Label>Eight</Label>
+        <Label>Nine</Label>
+        <Label>Ten</Label>
+        <Label>Eleven</Label>
+        <Label>Twelve</Label>
+        <Label>Thirteen</Label>
+        <Label>Fourteen</Label>
+        <Label>Fifteen</Label>
+        <Label>Sixteen</Label>
+      </LabelGroup>
+    </ResizableContainer>
+  )
 }
+
+export default meta
diff --git a/src/LabelGroup/LabelGroup.tsx b/src/LabelGroup/LabelGroup.tsx
index 6d9618d2980..c0f689978ec 100644
--- a/src/LabelGroup/LabelGroup.tsx
+++ b/src/LabelGroup/LabelGroup.tsx
@@ -1,17 +1,368 @@
+import React from 'react'
 import styled from 'styled-components'
+import {XIcon} from '@primer/octicons-react'
+import {getFocusableChild} from '@primer/behaviors/utils'
 import {get} from '../constants'
+import VisuallyHidden from '../_VisuallyHidden'
+import {AnchoredOverlay, Box, Button, IconButton, useTheme} from '..'
 import sx, {SxProp} from '../sx'
-import {ComponentProps} from '../utils/types'
 
-const LabelGroup = styled.span<SxProp>`
-  & * {
-    margin-right: ${get('space.1')};
-  }
-  & *:last-child {
-    margin-right: 0;
+export type LabelGroupProps = {
+  /** How hidden tokens should be shown. `'inline'` shows the hidden tokens after the visible tokens. `'overlay'` shows all tokens in an overlay that appears on top of the visible tokens. */
+  overflowStyle?: 'inline' | 'overlay'
+  /** How many tokens to show. `'auto'` truncates the tokens to fit in the parent container. Passing a number will truncate after that number tokens. If this is undefined, tokens will never be truncated. */
+  visibleChildCount?: 'auto' | number
+} & SxProp
+
+const StyledLabelGroupContainer = styled.div<SxProp>`
+  display: flex;
+  flex-wrap: nowrap;
+  gap: ${get('space.1')};
+  line-height: 1;
+  max-width: 100%;
+  overflow: hidden;
+
+  &[data-overflow='inline'] {
+    flex-wrap: wrap;
   }
+
   ${sx};
 `
 
-export type LabelGroupProps = ComponentProps<typeof LabelGroup>
+const ItemWrapper = styled.div`
+  display: flex;
+  align-items: center;
+
+  /* This min-height matches the height of the expand/collapse button.
+     Without it, the labels/tokens will do a slight layout shift when expanded.
+     This is because the height of the first row will match the token sizes,
+     but the height of the second row will be the height of the collapse button.
+  */
+  min-height: 28px;
+
+  &.ItemWrapper--hidden {
+    order: 9999;
+    pointer-events: none;
+    visibility: hidden;
+  }
+`
+
+// Calculates the width of the overlay to cover the labels/tokens and the expand button.
+const getOverlayWidth = (
+  buttonClientRect: DOMRect,
+  containerRef: React.RefObject<HTMLDivElement>,
+  overlayPaddingPx: number,
+) => overlayPaddingPx + buttonClientRect.right - (containerRef.current?.getBoundingClientRect()?.left || 0)
+
+const InlineToggle: React.FC<{
+  collapseButtonRef: React.RefObject<HTMLButtonElement>
+  collapseInlineExpandedChildren: () => void
+  expandButtonRef: React.RefCallback<HTMLButtonElement>
+  hiddenItemIds: string[]
+  isOverflowShown: boolean
+  showAllTokensInline: () => void
+  totalLength: number
+}> = ({
+  collapseButtonRef,
+  collapseInlineExpandedChildren,
+  expandButtonRef,
+  hiddenItemIds,
+  isOverflowShown,
+  showAllTokensInline,
+  totalLength,
+}) =>
+  isOverflowShown ? (
+    <Button ref={collapseButtonRef} onClick={collapseInlineExpandedChildren} size="small" variant="invisible">
+      Show less
+    </Button>
+  ) : hiddenItemIds.length ? (
+    <Button ref={expandButtonRef} variant="invisible" size="small" onClick={showAllTokensInline}>
+      <VisuallyHidden>Show all {totalLength}</VisuallyHidden>
+      <span aria-hidden="true">+{hiddenItemIds.length}</span>
+    </Button>
+  ) : null
+
+const OverlayToggle: React.FC<
+  React.PropsWithChildren<{
+    closeOverflowOverlay: () => void
+    expandButtonRef: React.RefCallback<HTMLButtonElement>
+    hiddenItemIds: string[]
+    isOverflowShown: boolean
+    openOverflowOverlay: () => void
+    overlayPaddingPx: number
+    overlayWidth?: number
+    totalLength: number
+  }>
+> = ({
+  children,
+  closeOverflowOverlay,
+  expandButtonRef,
+  hiddenItemIds,
+  isOverflowShown,
+  openOverflowOverlay,
+  overlayPaddingPx,
+  overlayWidth,
+  totalLength,
+}) =>
+  hiddenItemIds.length ? (
+    <AnchoredOverlay
+      open={isOverflowShown}
+      onOpen={openOverflowOverlay}
+      onClose={closeOverflowOverlay}
+      width="auto"
+      height="auto"
+      align="start"
+      side="inside-right"
+      // expandButtonRef satisfies React.RefObject<HTMLButtonElement> because we manually set `.current` in the `useCallback` above
+      anchorRef={expandButtonRef as unknown as React.RefObject<HTMLButtonElement>}
+      anchorOffset={overlayPaddingPx * -1}
+      alignmentOffset={overlayPaddingPx * -1}
+      renderAnchor={props => (
+        <Button variant="invisible" size="small" {...props} ref={expandButtonRef}>
+          <VisuallyHidden>Show all {totalLength}</VisuallyHidden>
+          <span aria-hidden="true">+{hiddenItemIds.length}</span>
+        </Button>
+      )}
+      focusZoneSettings={{disabled: true}}
+    >
+      <Box alignItems="flex-start" display="flex" width={overlayWidth} padding={`${overlayPaddingPx}px`}>
+        <Box display="flex" flexWrap="wrap" sx={{gap: 1}}>
+          {children}
+        </Box>
+        <IconButton
+          onClick={closeOverflowOverlay}
+          icon={XIcon}
+          aria-label="Close"
+          variant="invisible"
+          sx={{flexShrink: 0}}
+        />
+      </Box>
+    </AnchoredOverlay>
+  ) : null
+
+// TODO: reduce re-renders
+const LabelGroup: React.FC<React.PropsWithChildren<LabelGroupProps>> = ({
+  children,
+  visibleChildCount,
+  overflowStyle = 'overlay',
+  sx: sxProp,
+}) => {
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const collapseButtonRef = React.useRef<HTMLButtonElement>(null)
+  const firstHiddenIndexRef = React.useRef<number | undefined>(undefined)
+  const [visibilityMap, setVisibilityMap] = React.useState<Record<string, boolean>>({})
+  const [isOverflowShown, setIsOverflowShown] = React.useState<boolean>(false)
+  const [buttonClientRect, setButtonClientRect] = React.useState<DOMRect>({
+    width: 0,
+    right: 0,
+    height: 0,
+    x: 0,
+    y: 0,
+    top: 0,
+    left: 0,
+    bottom: 0,
+    toJSON: () => undefined,
+  })
+
+  const {theme} = useTheme()
+
+  const overlayPaddingPx = parseInt(get('space.2')(theme), 10)
+
+  const hiddenItemIds = Object.keys(visibilityMap).filter(key => !visibilityMap[key])
+
+  // `overlayWidth` is only needed when we render an overlay
+  // if we don't use an overlay, we can skip the width calculation
+  // and save on reflows caused by measuring DOM nodes.
+  const overlayWidth =
+    hiddenItemIds.length && overflowStyle === 'overlay'
+      ? getOverlayWidth(buttonClientRect, containerRef, overlayPaddingPx)
+      : undefined
+
+  const expandButtonRef: React.RefCallback<HTMLButtonElement> = React.useCallback(
+    node => {
+      if (node !== null) {
+        const nodeClientRect = node.getBoundingClientRect()
+
+        if (nodeClientRect.width !== buttonClientRect.width || nodeClientRect.right !== buttonClientRect.right) {
+          setButtonClientRect(nodeClientRect)
+        }
+
+        // @ts-ignore you can set `.current` on ref objects or ref callbacks in React
+        expandButtonRef.current = node
+      }
+    },
+    [buttonClientRect],
+  )
+
+  // Sets the visibility map to hide children after the given index.
+  const hideChildrenAfterIndex = React.useCallback((truncateAfter: number) => {
+    const containerChildren = containerRef.current?.children || []
+    const updatedEntries: Record<string, boolean> = {}
+    for (const child of containerChildren) {
+      const targetId = child.getAttribute('data-index')
+      if (targetId) {
+        updatedEntries[targetId] = parseInt(targetId, 10) < truncateAfter
+      }
+    }
+
+    setVisibilityMap(updatedEntries)
+  }, [])
+
+  const openOverflowOverlay = React.useCallback(() => setIsOverflowShown(true), [setIsOverflowShown])
+
+  const closeOverflowOverlay = React.useCallback(() => {
+    setIsOverflowShown(false)
+  }, [setIsOverflowShown])
+
+  const collapseInlineExpandedChildren = React.useCallback(() => {
+    setIsOverflowShown(false)
+
+    if (visibleChildCount && typeof visibleChildCount === 'number') {
+      hideChildrenAfterIndex(visibleChildCount)
+    }
+
+    // We need to manually re-focus the collapse button if we're not showing the full
+    // list in an overlay.
+    // TODO: get rid of this hack
+    setTimeout(() => {
+      // @ts-ignore you can set `.current` on ref objects or ref callbacks in React
+      expandButtonRef.current?.focus()
+    }, 10)
+  }, [expandButtonRef, hideChildrenAfterIndex, visibleChildCount])
+
+  const showAllTokensInline = React.useCallback(() => {
+    setVisibilityMap({})
+    setIsOverflowShown(true)
+  }, [setVisibilityMap, setIsOverflowShown])
+
+  React.useEffect(() => {
+    // If we're not truncating, we don't need to run this useEffect.
+    if (!visibleChildCount || isOverflowShown) {
+      return
+    }
+
+    if (visibleChildCount === 'auto') {
+      // Instatiates the IntersectionObserver to track when children fit in the container.
+      const observer = new IntersectionObserver(
+        (entries: IntersectionObserverEntry[]) => {
+          const updatedEntries: Record<string, boolean> = {}
+
+          for (const entry of entries) {
+            // Checks which children are intersecting the root container
+            const targetId = entry.target.getAttribute('data-index')
+            if (targetId) {
+              updatedEntries[targetId] = entry.isIntersecting
+            }
+          }
+
+          // Updates the visibility map based on the intersection results.
+          setVisibilityMap(prev => ({
+            ...prev,
+            ...updatedEntries,
+          }))
+        },
+        {
+          root: containerRef.current,
+          rootMargin: `0px -${buttonClientRect.width}px 0px 0px`,
+          threshold: 1,
+        },
+      )
+
+      for (const item of containerRef.current?.children || []) {
+        if (item.getAttribute('data-index')) {
+          observer.observe(item)
+        }
+      }
+
+      return () => observer.disconnect()
+    }
+    // We're not auto truncating, so we need to hide children after the given `visibleChildCount`.
+    else {
+      hideChildrenAfterIndex(visibleChildCount)
+    }
+  }, [buttonClientRect, visibleChildCount, hideChildrenAfterIndex, isOverflowShown])
+
+  // Updates the index of the first hidden child.
+  // We need to keep track of this so we can focus the first hidden child when the overflow is shown inline.
+  React.useEffect(() => {
+    // If we're using an overlay, we don't need to keep track of the first hidden index.
+    if (overflowStyle === 'overlay') {
+      return
+    }
+    if (hiddenItemIds.length) {
+      firstHiddenIndexRef.current = parseInt(hiddenItemIds[0], 10)
+    }
+  }, [hiddenItemIds, overflowStyle, isOverflowShown])
+
+  // Updates the index of the first hidden child.
+  // We need to keep track of this so we can focus the first hidden child when the overflow is shown inline.
+  React.useEffect(() => {
+    // If we're using an overlay, we don't need to focus the first child that was previously hidden.
+    if (overflowStyle === 'overlay') {
+      return
+    }
+    const firstHiddenChildDOM = document.querySelector<HTMLElement>(`[data-index="${firstHiddenIndexRef.current}"]`)
+    const focusableChild = firstHiddenChildDOM ? getFocusableChild(firstHiddenChildDOM) : null
+
+    if (isOverflowShown) {
+      // If the first hidden child is focusable, focus it.
+      // Otherwise, focus the collapse button.
+      if (focusableChild) {
+        focusableChild.focus()
+      } else {
+        collapseButtonRef.current?.focus()
+      }
+    }
+  }, [overflowStyle, isOverflowShown])
+
+  // If truncation is enabled, we need to render based on truncation logic.
+  return visibleChildCount ? (
+    <StyledLabelGroupContainer
+      ref={containerRef}
+      data-overflow={overflowStyle === 'inline' && isOverflowShown ? 'inline' : undefined}
+      sx={sxProp}
+    >
+      {React.Children.map(children, (child, index) => (
+        <ItemWrapper
+          // data-index is used as an identifier we can use in the IntersectionObserver
+          data-index={index}
+          className={hiddenItemIds.includes(index.toString()) ? 'ItemWrapper--hidden' : undefined}
+        >
+          {child}
+        </ItemWrapper>
+      ))}
+      {overflowStyle === 'inline' ? (
+        <InlineToggle
+          collapseButtonRef={collapseButtonRef}
+          collapseInlineExpandedChildren={collapseInlineExpandedChildren}
+          expandButtonRef={expandButtonRef}
+          hiddenItemIds={hiddenItemIds}
+          isOverflowShown={isOverflowShown}
+          showAllTokensInline={showAllTokensInline}
+          totalLength={React.Children.toArray(children).length}
+        />
+      ) : (
+        <OverlayToggle
+          closeOverflowOverlay={closeOverflowOverlay}
+          expandButtonRef={expandButtonRef}
+          hiddenItemIds={hiddenItemIds}
+          isOverflowShown={isOverflowShown}
+          openOverflowOverlay={openOverflowOverlay}
+          overlayPaddingPx={overlayPaddingPx}
+          overlayWidth={overlayWidth}
+          totalLength={React.Children.toArray(children).length}
+        >
+          {children}
+        </OverlayToggle>
+      )}
+    </StyledLabelGroupContainer>
+  ) : (
+    <StyledLabelGroupContainer data-overflow="inline" sx={sxProp}>
+      {children}
+    </StyledLabelGroupContainer>
+  )
+}
+
+LabelGroup.displayName = 'LabelGroup'
+
 export default LabelGroup
diff --git a/src/Overlay/Overlay.docs.json b/src/Overlay/Overlay.docs.json
index 4040c5bacee..ea29d5f3895 100644
--- a/src/Overlay/Overlay.docs.json
+++ b/src/Overlay/Overlay.docs.json
@@ -56,6 +56,12 @@
       "defaultValue": "",
       "description": "Sets the maximum height of the `Overlay`, pick from our set list of heights. `xsmall` corresponds to `192px`, `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `432px`, `xlarge` corresponds to `600px`."
     },
+    {
+      "name": "maxWidth",
+      "type": "| 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'",
+      "defaultValue": "",
+      "description": "Sets the maximum width of the `Overlay`, pick from our set list of widths. `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `480px`, `xlarge` corresponds to `640px`, `xxlarge` corresponds to `960px`."
+    },
     {
       "name": "visibility",
       "type": "| 'visible' | 'hidden'",
diff --git a/src/Overlay/Overlay.tsx b/src/Overlay/Overlay.tsx
index a5e3693f2d2..817e80ec992 100644
--- a/src/Overlay/Overlay.tsx
+++ b/src/Overlay/Overlay.tsx
@@ -15,6 +15,7 @@ type StyledOverlayProps = {
   width?: keyof typeof widthMap
   height?: keyof typeof heightMap
   maxHeight?: keyof Omit<typeof heightMap, 'auto' | 'initial'>
+  maxWidth?: keyof Omit<typeof widthMap, 'auto'>
   visibility?: 'visible' | 'hidden'
   anchorSide?: AnchorSide
 } & SxProp
@@ -58,7 +59,7 @@ const StyledOverlay = styled.div<StyledOverlayProps>`
   box-shadow: ${get('shadows.overlay.shadow')};
   position: absolute;
   min-width: 192px;
-  max-width: 640px;
+  max-width: ${props => props.maxWidth && widthMap[props.maxWidth]};
   height: ${props => heightMap[props.height || 'auto']};
   max-height: ${props => props.maxHeight && heightMap[props.maxHeight]};
   width: ${props => widthMap[props.width || 'auto']};
diff --git a/src/__tests__/LabelGroup.test.tsx b/src/__tests__/LabelGroup.test.tsx
index 31281b865dd..d563de40ea7 100644
--- a/src/__tests__/LabelGroup.test.tsx
+++ b/src/__tests__/LabelGroup.test.tsx
@@ -1,28 +1,182 @@
 import React from 'react'
-import {LabelGroup, Label} from '..'
-import {behavesAsComponent, checkExports} from '../utils/testing'
-import {render as HTMLRender} from '@testing-library/react'
+import {render as HTMLRender, waitFor} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'
+import {LabelGroup, Label, ThemeProvider, BaseStyles} from '..'
+import {behavesAsComponent, checkExports} from '../utils/testing'
+import theme from '../theme'
+import userEvent from '@testing-library/user-event'
 
 expect.extend(toHaveNoViolations)
 
-const comp = (
-  <LabelGroup>
-    <Label>Default label</Label>
-    <Label>Darker gray label</Label>
-  </LabelGroup>
+const ThemeAndStyleContainer: React.FC<React.PropsWithChildren> = ({children}) => (
+  <ThemeProvider theme={theme}>
+    <BaseStyles>{children}</BaseStyles>
+  </ThemeProvider>
+)
+
+const AutoTruncateContainer: React.FC<React.PropsWithChildren & {width?: number}> = ({children, width}) => (
+  <div style={{width}}>{children}</div>
 )
 
+const observe = jest.fn()
+
 describe('LabelGroup', () => {
-  behavesAsComponent({Component: LabelGroup})
+  window.IntersectionObserver = jest.fn(() => ({
+    observe,
+    unobserve: jest.fn(),
+    takeRecords: jest.fn(),
+    disconnect: jest.fn(),
+    root: null,
+    rootMargin: '',
+    thresholds: [],
+  })) as jest.Mock<IntersectionObserver>
+
+  behavesAsComponent({Component: LabelGroup, options: {skipAs: true}})
 
   checkExports('LabelGroup', {
     default: LabelGroup,
   })
 
   it('should have no axe violations', async () => {
-    const {container} = HTMLRender(comp)
+    const {container} = HTMLRender(
+      <ThemeAndStyleContainer>
+        <LabelGroup>
+          <Label>One</Label>
+          <Label>Two</Label>
+          <Label>Three</Label>
+          <Label>Four</Label>
+          <Label>Five</Label>
+          <Label>Six</Label>
+          <Label>Seven</Label>
+          <Label>Eight</Label>
+          <Label>Nine</Label>
+          <Label>Ten</Label>
+          <Label>Eleven</Label>
+          <Label>Twelve</Label>
+          <Label>Thirteen</Label>
+          <Label>Fourteen</Label>
+          <Label>Fifteen</Label>
+          <Label>Sixteen</Label>
+        </LabelGroup>
+      </ThemeAndStyleContainer>,
+    )
     const results = await axe(container)
     expect(results).toHaveNoViolations()
   })
+
+  it('observers intersections on each child', async () => {
+    HTMLRender(
+      <ThemeAndStyleContainer>
+        <AutoTruncateContainer width={600}>
+          <LabelGroup visibleChildCount="auto">
+            <Label>One</Label>
+            <Label>Two</Label>
+            <Label>Three</Label>
+            <Label>Four</Label>
+            <Label>Five</Label>
+            <Label>Six</Label>
+            <Label>Seven</Label>
+            <Label>Eight</Label>
+            <Label>Nine</Label>
+            <Label>Ten</Label>
+            <Label>Eleven</Label>
+            <Label>Twelve</Label>
+            <Label>Thirteen</Label>
+            <Label>Fourteen</Label>
+            <Label>Fifteen</Label>
+            <Label>Sixteen</Label>
+          </LabelGroup>
+        </AutoTruncateContainer>
+      </ThemeAndStyleContainer>,
+    )
+
+    expect(observe).toHaveBeenCalledTimes(16)
+  })
+
+  it('should truncate labels to a specified number', () => {
+    const {getByText} = HTMLRender(
+      <ThemeAndStyleContainer>
+        <LabelGroup visibleChildCount={3}>
+          <Label>One</Label>
+          <Label>Two</Label>
+          <Label>Three</Label>
+          <Label>Four</Label>
+          <Label>Five</Label>
+        </LabelGroup>
+      </ThemeAndStyleContainer>,
+    )
+    const expandButton = getByText('+2')
+
+    expect(expandButton).toBeDefined()
+  })
+
+  it('should expand all tokens into an overlay when overflowStyle="overlay"', async () => {
+    const user = userEvent.setup()
+    const {getByLabelText, getByText} = HTMLRender(
+      <ThemeAndStyleContainer>
+        <LabelGroup visibleChildCount={3} overflowStyle="overlay">
+          <Label>One</Label>
+          <Label>Two</Label>
+          <Label>Three</Label>
+          <Label>Four</Label>
+          <Label>Five</Label>
+        </LabelGroup>
+      </ThemeAndStyleContainer>,
+    )
+    const expandButton = getByText('+2')
+    await user.click(expandButton)
+    await waitFor(() => getByLabelText('Close'))
+
+    expect(document.activeElement).toBe(getByLabelText('Close'))
+  })
+
+  it('should expand all tokens in place when overflowStyle="inline"', async () => {
+    const user = userEvent.setup()
+    const {getByText} = HTMLRender(
+      <ThemeAndStyleContainer>
+        <LabelGroup visibleChildCount={3} overflowStyle="inline">
+          <Label>One</Label>
+          <Label>Two</Label>
+          <Label>Three</Label>
+          <Label>Four</Label>
+          <Label>Five</Label>
+        </LabelGroup>
+      </ThemeAndStyleContainer>,
+    )
+    const expandButton = getByText('+2')
+    const fourthLabel = getByText('Four')
+
+    expect(fourthLabel).not.toBeVisible()
+
+    await user.click(expandButton)
+
+    expect(fourthLabel).toBeVisible()
+  })
+
+  it('should focus the collapse button when expanded, and the expand button when collapsed', async () => {
+    const user = userEvent.setup()
+    const {getByText} = HTMLRender(
+      <ThemeAndStyleContainer>
+        <LabelGroup visibleChildCount={3} overflowStyle="inline">
+          <Label>One</Label>
+          <Label>Two</Label>
+          <Label>Three</Label>
+          <Label>Four</Label>
+          <Label>Five</Label>
+        </LabelGroup>
+      </ThemeAndStyleContainer>,
+    )
+
+    // Expand
+    await user.click(getByText('+2'))
+    await waitFor(() => getByText('Show less'))
+
+    expect(document.activeElement).toEqual(getByText('Show less').closest('button'))
+
+    // Collapse
+    await user.click(getByText('Show less'))
+    await waitFor(() => getByText('+2'))
+
+    expect(document.activeElement).toEqual(getByText('+2').closest('button'))
+  })
 })
diff --git a/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap b/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
index c01e1a5cfaf..16461807d7b 100644
--- a/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
+++ b/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
@@ -169,7 +169,6 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
   box-shadow: 0 1px 3px rgba(31,35,40,0.12),0 8px 24px rgba(66,74,83,0.12);
   position: absolute;
   min-width: 192px;
-  max-width: 640px;
   height: auto;
   width: auto;
   border-radius: 12px;
diff --git a/src/__tests__/__snapshots__/LabelGroup.test.tsx.snap b/src/__tests__/__snapshots__/LabelGroup.test.tsx.snap
index e58ce9b5f35..bc5b16895fc 100644
--- a/src/__tests__/__snapshots__/LabelGroup.test.tsx.snap
+++ b/src/__tests__/__snapshots__/LabelGroup.test.tsx.snap
@@ -1,15 +1,28 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`LabelGroup renders consistently 1`] = `
-.c0 * {
-  margin-right: 4px;
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  gap: 4px;
+  line-height: 1;
+  max-width: 100%;
+  overflow: hidden;
 }
 
-.c0 *:last-child {
-  margin-right: 0;
+.c0[data-overflow='inline'] {
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
 }
 
-<span
+<div
   className="c0"
+  data-overflow="inline"
 />
 `;