primer · rezrah · Jul 28, 2026 · Jul 21, 2026 · Jul 21, 2026 · Jul 21, 2026
@@ -0,0 +1,22 @@
+---
+'@primer/react-brand': patch
+---
+
+Added `Hero.ButtonGroup` for rendering `Button` and `ActionMenu` children. `Hero.ButtonGroup` is now the de facto way to display buttons in the `Hero`.
+
+⚠️ `Hero.PrimaryAction` and `Hero.SecondaryAction` are now deprecated. Please migrate over to `Hero.ButtonGroup` as they will be removed in a future release.
+
+Migrate using the following approach:
+
+```diff
+-<Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+-<Hero.SecondaryAction href="#">Secondary action</Hero.SecondaryAction>
++<Hero.ButtonGroup>
++  <Button as="a" href="#">
++    Primary action
++  </Button>
++  <Button as="a" href="#">
++    Secondary action
++  </Button>
++</Hero.ButtonGroup>
+```
@@ -4,3 +4,4 @@
 
 - Restored rounded corners to `CTABanner` while preserving square edges when grid lines are enabled.
 - Improved `ButtonGroup` to forward custom class names alongside its default styles.
+- Added native `ActionMenu` child support to `ButtonGroup`, including automatic sizes and positional variants, and the `CTABanner.ButtonGroup` wrapper.
@@ -48,7 +48,7 @@ jobs:
         run: npm run check
 
       - name: Run unit tests
-        run: npm run test
+        run: npm run test --workspaces --if-present
 
       - name: Run MCP server smoke tests
         run: npm run smoke --workspace=packages/mcp

@@ -1,6 +1,6 @@
 ---
 title: Button group
-description: Use the button group component to group related buttons together.
+description: Use the button group component to group related buttons and action menus together.
 keywords: ['buttons', 'control', 'action', 'group', 'paired']
 show-tabs: true
 tab-label: React
@@ -12,14 +12,14 @@ storybook: '/brand/storybook/?path=/story/components-buttongroup--playground'
 import {ButtonGroupSizesProp, ButtonGroupAsProp} from './react'
 
 ```js
-import {ButtonGroup, Button} from '@primer/react-brand'
+import {ActionMenu, Button, ButtonGroup} from '@primer/react-brand'
 ```
 
 ## Examples
 
 ### Default
 
-This is the default variant for the ButtonGroup component. The first button in the group is the primary button and the second button is the secondary button.
+This is the default variant for the ButtonGroup component. The first item in the group uses the primary button variant and the second uses the secondary button variant.
 
 ```jsx live
 <ButtonGroup>
@@ -28,9 +28,30 @@ This is the default variant for the ButtonGroup component. The first button in t
 </ButtonGroup>
 ```
 
+### Action menus
+
+`ButtonGroup` supports up to two `Button` or `ActionMenu` children and applies a default `variant` to each one.
+
+Explicit `variant` overrides to `Button` or `ActionMenu.Button` will override the default values.
+
+`buttonSize` applies to both child types. Because `ActionMenu` supports only `small` and `medium`, it remains `medium` when `buttonSize="large"`. Set `size` on `ActionMenu` to override the inherited size.
+
+```jsx live
+<ButtonGroup>
+  <Button>Primary action</Button>
+  <ActionMenu>
+    <ActionMenu.Button>More actions</ActionMenu.Button>
+    <ActionMenu.Overlay aria-label="More actions">
+      <ActionMenu.Item value="contact-sales">Contact sales</ActionMenu.Item>
+      <ActionMenu.Item value="view-pricing">View pricing</ActionMenu.Item>
+    </ActionMenu.Overlay>
+  </ActionMenu>
+</ButtonGroup>
+```
+
 ### Sizes
 
-The ButtonGroup component can be rendered in different sizes in `medium` and `large` sizes. The default size is `medium`.
+The ButtonGroup component supports `small`, `medium`, and `large` buttons. The default size is `medium`. ActionMenu children support `small` and `medium`.
 
 ```jsx live
 <ButtonGroup buttonSize="large">

@@ -1,5 +1,5 @@
 'use client'
 import {PropTableValues} from '@primer/doctocat-nextjs/components'
 
-export const ButtonGroupSizesProp = () => <PropTableValues values={['medium', 'large']} commaSeparated />
+export const ButtonGroupSizesProp = () => <PropTableValues values={['small', 'medium', 'large']} commaSeparated />
 export const ButtonGroupAsProp = () => <PropTableValues values={['button', 'a']} commaSeparated />
@@ -18,7 +18,7 @@ import {
 } from './react'
 
 ```js
-import {Hero} from '@primer/react-brand'
+import {ActionMenu, Button, Hero} from '@primer/react-brand'
 ```
 
 ## Examples
@@ -33,8 +33,36 @@ import {Hero} from '@primer/react-brand'
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
     felis nam pulvinar risus elementum.
   </Hero.Description>
-  <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
-  <Hero.SecondaryAction href="#">Secondary action</Hero.SecondaryAction>
+  <Hero.ButtonGroup>
+    <Button as="a" href="#">
+      Primary action
+    </Button>
+    <Button as="a" href="#">
+      Secondary action
+    </Button>
+  </Hero.ButtonGroup>
+</Hero>
+```
+
+### Action menus
+
+`Hero.ButtonGroup` accepts up to two `Button` or `ActionMenu` children and applies the primary variant to the first item and the secondary variant to the second. Set `variant` on `Button` or `ActionMenu.Button` to override it.
+
+```jsx live
+<Hero>
+  <Hero.Heading>This is my super sweet hero heading</Hero.Heading>
+  <Hero.ButtonGroup>
+    <Button as="a" href="#">
+      Primary action
+    </Button>
+    <ActionMenu>
+      <ActionMenu.Button>More actions</ActionMenu.Button>
+      <ActionMenu.Overlay aria-label="More actions">
+        <ActionMenu.Item value="contact-sales">Contact sales</ActionMenu.Item>
+        <ActionMenu.Item value="view-pricing">View pricing</ActionMenu.Item>
+      </ActionMenu.Overlay>
+    </ActionMenu>
+  </Hero.ButtonGroup>
 </Hero>
 ```
 
@@ -47,14 +75,22 @@ import {Hero} from '@primer/react-brand'
   <Hero>
     <Hero.Label>Actions</Hero.Label>
     <Hero.Heading>Automate your workflow from idea to production</Hero.Heading>
-    <Hero.PrimaryAction href="#">Get started with Actions</Hero.PrimaryAction>
+    <Hero.ButtonGroup>
+      <Button as="a" href="#">
+        Get started with Actions
+      </Button>
+    </Hero.ButtonGroup>
     <Hero.Image src="/images/placeholder.png" alt="placeholder, blank area with a gray background color" />
   </Hero>
   <br />
   <Hero align="center">
     <Hero.Label>Actions</Hero.Label>
     <Hero.Heading size="2">Automate your workflow from idea to production</Hero.Heading>
-    <Hero.PrimaryAction href="#">Get started with Actions</Hero.PrimaryAction>
+    <Hero.ButtonGroup>
+      <Button as="a" href="#">
+        Get started with Actions
+      </Button>
+    </Hero.ButtonGroup>
     <Hero.Image
       position="inline-end"
       src="/images/placeholder.png"
@@ -78,7 +114,11 @@ The `GridLine` variants all feature a trailing border by default. Use `Box` if y
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
     felis nam pulvinar risus elementum.
   </Hero.Description>
-  <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+  <Hero.ButtonGroup>
+    <Button as="a" href="#">
+      Primary action
+    </Button>
+  </Hero.ButtonGroup>
   <Hero.Image src="/images/placeholder.png" alt="placeholder, blank area with a gray background color" />
 </Hero>
 ```
@@ -96,7 +136,11 @@ The `GridLine` variants all feature a trailing border by default. Use `Box` if y
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
     felis nam pulvinar risus elementum.
   </Hero.Description>
-  <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+  <Hero.ButtonGroup>
+    <Button as="a" href="#">
+      Primary action
+    </Button>
+  </Hero.ButtonGroup>
   <Hero.Image src="/images/placeholder.png" alt="placeholder, blank area with a gray background color" />
 </Hero>
 ```
@@ -115,7 +159,11 @@ Use [VideoPlayer](/components/VideoPlayer), a native `<video>` element or a YouT
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
     felis nam pulvinar risus elementum.
   </Hero.Description>
-  <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+  <Hero.ButtonGroup>
+    <Button as="a" href="#">
+      Primary action
+    </Button>
+  </Hero.ButtonGroup>
   <Hero.Video>
     <iframe
       src="https://www.youtube.com/embed/fHwtrOcLAnI"
@@ -142,7 +190,11 @@ Use [VideoPlayer](/components/VideoPlayer), a native `<video>` element or a YouT
     <br />
     developer environments
   </Hero.Heading>
-  <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+  <Hero.ButtonGroup>
+    <Button as="a" href="#">
+      Primary action
+    </Button>
+  </Hero.ButtonGroup>
 </Hero>
 ```
 
@@ -186,8 +238,14 @@ Forwards all props from the [Heading component](/typography/Heading), including
 
 Forwards `size` and `weight` props from the [Text component](/typography/Text).
 
+### Hero.ButtonGroup
+
+Groups up to two [Button](/components/Button) or [ActionMenu](/components/ActionMenu) children. Forwards all props from the [ButtonGroup component](/components/ButtonGroup).
+
 ### Hero.PrimaryAction
 
+Deprecated. Use `Hero.ButtonGroup` with a `Button` child instead.
+
 | name        | type          | default | description                         |
 | ----------- | ------------- | ------- | ----------------------------------- |
 | `className` | `string`      |         | Primary link custom class           |
@@ -198,6 +256,8 @@ Forwards all props from the [Button component](/components/Button).
 
 ### Hero.SecondaryAction
 
+Deprecated. Use `Hero.ButtonGroup` with a `Button` child instead.
+
 | name        | type          | default | description                         |
 | ----------- | ------------- | ------- | ----------------------------------- |
 | `className` | `string`      |         | Secondary link custom class         |

@@ -83,7 +83,7 @@ Components can be imported into any React-based application.
 E.g.
 
 ```js
-import {Hero} from '@primer/react-brand'
+import {Button, Hero} from '@primer/react-brand'
 ```
 
 ```jsx
@@ -94,8 +94,14 @@ import {Hero} from '@primer/react-brand'
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
     felis nam pulvinar risus elementum.
   </Hero.Description>
-  <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
-  <Hero.SecondaryAction href="#">Secondary action</Hero.SecondaryAction>
+  <Hero.ButtonGroup>
+    <Button as="a" href="#">
+      Primary action
+    </Button>
+    <Button as="a" href="#">
+      Secondary action
+    </Button>
+  </Hero.ButtonGroup>
 </Hero>
 ```
 

@@ -42,7 +42,7 @@
     "start:docs": "npm run build:lib && cd apps/next-docs && npm run dev",
     "start:lib": "npm run start --workspace=packages/react",
     "start:storybook": "npm run build:lib && npm run start --workspace=apps/storybook",
-    "test": "npm run test --workspaces --if-present",
+    "test": "npm run build:lib && npm run test --workspaces --if-present",
     "test:axe": "npm run test:axe --workspace=packages/e2e",
     "test:storybook": "npm run test:storybook --workspace=apps/storybook",
     "test:visual": "npm run test:visual --workspace=packages/e2e --",

@@ -46,6 +46,7 @@
     "format:fix": "prettier --write '**/*.{js,mjs,ts,json,md}'",
     "lint": "eslint '**/*.ts' --max-warnings=0",
     "lint:fix": "npm run lint -- --fix",
+    "pretest": "npm run generate:catalog",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest",
     "inspect": "npm run build && npx @modelcontextprotocol/inspector node dist/index.js",
     "smoke": "npm run build && node scripts/smoke.mjs",

@@ -83,15 +83,14 @@
 /** Sub-components from `Object.assign(Root, {Heading: ...})` and `Name.Sub = ...` assignments. */
 function extractSubcomponents(name, source) {
   const subcomponents = new Set()
+  const propertyPattern = /(?:^|[{,])(?:\s|\/\*[\s\S]*?\*\/|\/\/[^\r\n]*(?:\r?\n|$))*([A-Za-z_$][\w$]*)\s*(?=[:,}])/g
   for (const match of source.matchAll(/Object\.assign\(/g)) {
     const openBraceIndex = source.indexOf('{', match.index)
     if (openBraceIndex === -1) continue
     const assignedObject = captureBalanced(source, openBraceIndex, '{', '}')
     if (!assignedObject) continue
-    // Capture both `Heading: ...` and shorthand `Visual` keys (the latter is a property whose key
-    // is its value, e.g. `Object.assign(Root, {Visual, Content: RiverContent})`).
-    for (const propertyKey of assignedObject.matchAll(/(?:^|[{,])\s*([A-Za-z_$][\w$]*)\s*(?=[:,}])/g))
-      subcomponents.add(`${name}.${propertyKey[1]}`)
+    // Capture `Heading: ...` and shorthand `Visual` keys across intervening comments.
+    for (const propertyKey of assignedObject.matchAll(propertyPattern)) subcomponents.add(`${name}.${propertyKey[1]}`)
   }
   for (const match of source.matchAll(new RegExp(`\\b${name}\\.(\\w+)\\s*=`, 'g'))) {
     subcomponents.add(`${name}.${match[1]}`)

@@ -1,4 +1,4 @@
-import {existsSync, readFileSync} from 'node:fs'
+import {readFileSync} from 'node:fs'
 import {fileURLToPath} from 'node:url'
 
 import type {Catalog} from '../catalog/types.js'
@@ -229,19 +229,31 @@ describe('primer_brand_review rules', () => {
 // errors. A failure here means a rule produces false positives against known-correct code.
 describe('primer_brand_review over generated canonical examples', () => {
   const catalogPath = fileURLToPath(new URL('../../dist/catalog.json', import.meta.url))
-  const hasCatalog = existsSync(catalogPath)
-  const testOrSkip = hasCatalog ? it : it.skip
-
-  testOrSkip('produces no errors on any catalog example', () => {
-    const catalog = JSON.parse(readFileSync(catalogPath, 'utf8')) as Catalog
-    const examples = [
-      ...catalog.components.flatMap(component =>
-        component.examples
-          .filter(example => example.code)
-          .map(example => ({name: component.name, code: example.code as string})),
-      ),
-      ...catalog.recipes.map(recipe => ({name: recipe.name, code: recipe.source})),
-    ]
+  const catalog = JSON.parse(readFileSync(catalogPath, 'utf8')) as Catalog
+  const examples = [
+    ...catalog.components.flatMap(component =>
+      component.examples
+        .filter(example => example.code)
+        .map(example => ({name: component.name, code: example.code as string})),
+    ),
+    ...catalog.recipes.map(recipe => ({name: recipe.name, code: recipe.source})),
+  ]
+
+  it('includes object-assigned subcomponents separated by comments', () => {
+    const hero = catalog.components.find(component => component.name === 'Hero')
+    expect(hero?.subcomponents).toEqual(
+      expect.arrayContaining(['Hero.ButtonGroup', 'Hero.PrimaryAction', 'Hero.SecondaryAction']),
+    )
+  })
+
+  it('does not recommend deprecated Hero action subcomponents', () => {
+    for (const example of examples) {
+      const deprecatedActions = example.code.match(/<Hero\.(?:PrimaryAction|SecondaryAction)\b/g) ?? []
+      expect({component: example.name, deprecatedActions}).toEqual({component: example.name, deprecatedActions: []})
+    }
+  })
+
+  it('produces no errors on any catalog example', () => {
     expect(examples.length).toBeGreaterThan(0)
     for (const example of examples) {
       const errors = errorsOf(allRules.flatMap(rule => rule.run(example.code, catalog)))

@@ -14,7 +14,7 @@ export function makeCatalog(overrides: Partial<Catalog> = {}): Catalog {
       {
         name: 'Hero',
         module: '@primer/react-brand',
-        subcomponents: ['Hero.Heading', 'Hero.Description', 'Hero.PrimaryAction'],
+        subcomponents: ['Hero.Heading', 'Hero.Description', 'Hero.ButtonGroup', 'Hero.PrimaryAction'],
         props: [
           {
             name: 'align',
@@ -29,7 +29,12 @@ export function makeCatalog(overrides: Partial<Catalog> = {}): Catalog {
           {
             title: 'Hero example',
             source: 'story',
-            code: '<Hero align="center"><Hero.Heading>Build like the best</Hero.Heading></Hero>',
+            code: `<Hero align="center">
+  <Hero.Heading>Build like the best</Hero.Heading>
+  <Hero.ButtonGroup>
+    <Button>Get started</Button>
+  </Hero.ButtonGroup>
+</Hero>`,
           },
         ],
         description: 'Prominent banner for the top of a landing page',

@@ -12,7 +12,9 @@ import React, {
   ReactElement,
   useMemo,
 } from 'react'
-import {Button, ButtonProps, Text, ThemeProvider, useTheme} from '../'
+import {Button, ButtonProps} from '../Button'
+import {Text} from '../Text'
+import {ThemeProvider, useTheme} from '../ThemeProvider'
 import {useAnchoredPosition} from '../hooks/useAnchoredPosition'
 import {useOnClickOutside} from '../hooks/useOnClickOutside'
 import {useKeyboardEscape} from '../hooks/useKeyboardEscape'
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,3 +4,4 @@

		- Restored rounded corners to `CTABanner` while preserving square edges when grid lines are enabled.
		- Improved `ButtonGroup` to forward custom class names alongside its default styles.
		- Added native `ActionMenu` child support to `ButtonGroup`, including automatic sizes and positional variants, and the `CTABanner.ButtonGroup` wrapper.