primer · rezrah · Apr 30, 2026 · Apr 29, 2026 · Apr 29, 2026 · Apr 29, 2026
@@ -0,0 +1,32 @@
+---
+'@primer/react-brand': minor
+---
+
+Updated `CTABanner` with new features and better defaults.
+
+- Added `CTABanner.Logo` for displaying custom logos.
+
+  ```tsx
+  <CTABanner>
+    <CTABanner.Logo>
+      <svg role="img" viewBox="0 0 45 16">
+        <title>GitHub</title>
+        <path d="..." />
+      </svg>
+    </CTABanner.Logo>
+  </CTABanner>
+  ```
+
+- Added `CTABanner.Link` for rendering a secondary call-to-action as a text link.
+
+  ```tsx
+  <CTABanner>
+    <CTABanner.Link href="#">Read the customer story</CTABanner.Link>
+  </CTABanner>
+  ```
+
+- `CTABanner.Heading` now automatically renders at visual size `'6'` in the `minimal` variant when no `size` prop is provided.
+
+- `CTABanner.Image` now accepts all native `<img>` HTML attributes.
+
+🔗 [See the documentation for more usage examples](https://primer.style/brand/components/CTABanner)
@@ -20,6 +20,17 @@ import {
   BentoPaddingProps,
   BentoAlignProps,
 } from './react'
+import {AlertIcon} from '@primer/octicons-react'
+
+<Note variant="warning">
+
+<AlertIcon aria-label="Warning" size={24} />
+<br />
+<br />
+This component is deprecated and will be removed in a future release. Use [CTA banner](/components/CTABanner) or [River](/components/River)
+instead.
+
+</Note>
 
 ```js
 import {Bento} from '@primer/react-brand'

@@ -81,6 +81,62 @@ import {CTABanner, Button} from '@primer/react-brand'
 </CTABanner>
 ```
 
+### With logo
+
+Use `CTABanner.Logo` to display a brand mark above the heading.
+
+```jsx live
+<CTABanner>
+  <CTABanner.Logo>
+    <svg role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 16" width="45" height="16">
+      <title>GitHub</title>
+      <path d="M8.81 7.35v5.74c0 .04-.01.11-.06.13 0 0-1.25.89-3.31.89-2.49 0-5.44-.78-5.44-5.92S2.58 1.99 5.1 2c2.18 0 3.06.49 3.2.58.04.05.06.09.06.14L7.94 4.5c0 .09-.09.2-.2.17-.36-.11-.9-.33-2.17-.33-1.47 0-3.05.42-3.05 3.73s1.5 3.7 2.58 3.7c.92 0 1.25-.11 1.25-.11v-2.3H4.88c-.11 0-.19-.08-.19-.17V7.35c0-.09.08-.17.19-.17h3.74c.11 0 .19.08.19.17Zm35.85 2.33c0 3.43-1.11 4.41-3.05 4.41-1.64 0-2.52-.83-2.52-.83s-.04.46-.09.52c-.03.06-.08.08-.14.08h-1.48c-.1 0-.19-.08-.19-.17l.02-11.11c0-.09.08-.17.17-.17h2.13c.09 0 .17.08.17.17v3.77s.82-.53 2.02-.53l-.01-.02c1.2 0 2.97.45 2.97 3.88ZM27.68 2.43c.09 0 .17.08.17.17v11.11c0 .09-.08.17-.17.17h-2.13c-.09 0-.17-.08-.17-.17l.02-4.75h-3.31v4.75c0 .09-.08.17-.17.17h-2.13c-.08 0-.17-.08-.17-.17V2.6c0-.09.08-.17.17-.17h2.13c.09 0 .17.08.17.17v4.09h3.31V2.6c0-.09.08-.17.17-.17Zm8.26 3.64c.11 0 .19.08.19.17l-.02 7.47c0 .09-.06.17-.17.17H34.6c-.07 0-.14-.04-.16-.09-.03-.06-.08-.45-.08-.45s-1.13.77-2.52.77c-1.69 0-2.92-.55-2.92-2.75V6.25c0-.09.08-.17.17-.17h2.14c.09 0 .17.08.17.17V11c0 .75.22 1.09.97 1.09s1.3-.39 1.3-.39V6.26c0-.11.06-.19.17-.19Zm-17.406 5.971h.005a.177.177 0 0 1 .141.179v1.5c0 .07-.03.14-.09.16-.1.05-.74.22-1.27.22-1.16 0-2.86-.25-2.86-2.69V8.13h-1.11c-.09 0-.17-.08-.17-.19V6.58c0-.08.05-.15.13-.17.07-.01 1.16-.28 1.16-.28V3.96c0-.08.05-.13.14-.13h2.16c.09 0 .14.05.14.13v2.11h1.59c.08 0 .16.08.16.17v1.7c0 .11-.07.19-.16.19h-1.59v3.131c0 .47.27.83 1.05.83.247 0 .481-.049.574-.05ZM12.24 6.06c.09 0 .17.08.17.17v7.37c0 .18-.05.27-.25.27h-1.92c-.17 0-.3-.07-.3-.27V6.26c0-.11.08-.2.17-.2Zm29.99 3.78c0-1.81-.73-2.05-1.5-1.97-.6.04-1.08.34-1.08.34v3.52s.49.34 1.22.36c1.03.03 1.36-.34 1.36-2.25ZM11.19 2.68c.75 0 1.36.61 1.36 1.38 0 .77-.61 1.38-1.36 1.38-.77 0-1.38-.61-1.38-1.38 0-.77.61-1.38 1.38-1.38Zm7.34 9.35v.001l.01.01h-.001l-.005-.001v.001c-.009-.001-.015-.011-.024-.011Z"></path>
+    </svg>
+  </CTABanner.Logo>
+  <CTABanner.Heading>Where the most ambitious teams build great things</CTABanner.Heading>
+  <CTABanner.Description>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id.
+  </CTABanner.Description>
+  <CTABanner.ButtonGroup>
+    <Button>Primary Action</Button>
+    <Button>Secondary Action</Button>
+  </CTABanner.ButtonGroup>
+</CTABanner>
+```
+
+### With link
+
+Use `CTABanner.Link` to provide a secondary call-to-action as a text link instead of a button.
+
+```jsx live
+<CTABanner>
+  <CTABanner.Heading>Where the most ambitious teams build great things</CTABanner.Heading>
+  <CTABanner.Description>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id.
+  </CTABanner.Description>
+  <CTABanner.Link href="#">Read the customer story</CTABanner.Link>
+</CTABanner>
+```
+
+### Duotone heading text
+
+Wrap part of a heading in a `<b>` tag to apply the duotone emphasis color.
+
+```jsx live
+<CTABanner>
+  <CTABanner.Heading>
+    Where the most ambitious teams <b>build great things</b>
+  </CTABanner.Heading>
+  <CTABanner.Description>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id.
+  </CTABanner.Description>
+  <CTABanner.ButtonGroup>
+    <Button>Primary Action</Button>
+    <Button>Secondary Action</Button>
+  </CTABanner.ButtonGroup>
+</CTABanner>
+```
+
 ### Alignment
 
 The content alignment can be changed using the `align` prop on the root `CTABanner`. This can be configured to either `start` or `center`.
@@ -251,11 +307,11 @@ render(<App />)
 
 ### CTABanner.Heading
 
-| name       | type                         | default     | required | description                                                                                                               |
-| ---------- | ---------------------------- | ----------- | -------- | ------------------------------------------------------------------------------------------------------------------------- |
-| `children` | `ReactNode`, `ReactNode[]`   | `undefined` | `true`   | Content to be displayed inside the `CTABanner.Heading` component                                                          |
-| `as`       | <CTABannerHeadingAsProp />   | `'h3'`      | `false`  | Heading level                                                                                                             |
-| `size`     | <CTABannerHeadingSizeProp /> | `'3'`       | `false`  | Visual heading size, irrespective of level. Note: `balanced` and `minimal` variants override the visual size through CSS. |
+| name       | type                         | default     | required | description                                                                                                                  |
+| ---------- | ---------------------------- | ----------- | -------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| `children` | `ReactNode`, `ReactNode[]`   | `undefined` | `true`   | Content to be displayed inside the `CTABanner.Heading` component. Wrap text in `<b>` to apply duotone emphasis.              |
+| `as`       | <CTABannerHeadingAsProp />   | `'h3'`      | `false`  | Heading level                                                                                                                |
+| `size`     | <CTABannerHeadingSizeProp /> | `'3'`       | `false`  | Visual heading size, irrespective of level. Note: the `minimal` variant defaults the visual size to `'6'` when not provided. |
 
 ### CTABanner.Description
 
@@ -281,6 +337,20 @@ render(<App />)
 | `src` | `string` | `undefined` | `true`   | The image source URL                      |
 | `alt` | `string` | `undefined` | `true`   | Accessible alternative text for the image |
 
+### CTABanner.Logo
+
+| name       | type        | default     | required | description                                                                           |
+| ---------- | ----------- | ----------- | -------- | ------------------------------------------------------------------------------------- |
+| `children` | `ReactNode` | `undefined` | `true`   | The logo to display, typically an inline SVG so it can be styled and stay accessible. |
+
+### CTABanner.Link
+
+| name       | type                    | default     | required | description                                           |
+| ---------- | ----------------------- | ----------- | -------- | ----------------------------------------------------- |
+| `children` | `ReactNode`             | `undefined` | `true`   | The link text                                         |
+| `href`     | `string`                | `undefined` | `true`   | The link target URL                                   |
+| `variant`  | `'default'`, `'accent'` | `'accent'`  | `false`  | Visual variant. Defaults to `accent` inside CTABanner |
+
 ## Related components
 
 - [BreakoutBanner](/components/BreakoutBanner)
@@ -70,7 +70,8 @@
     }
   },
   "bento": {
-    "heading": "Grupo Boticario steigert die Produktivität von Entwicklern mit Copilot um 94 %.",
+    "headingPrefix": "Grupo Boticario steigert die Produktivität von Entwicklern",
+    "headingEmphasis": "mit Copilot um 94 %.",
     "linkText": "Kundengeschichte lesen",
     "imageAlt": "Teammitglieder von Grupo Boticario arbeiten gemeinsam im Büro"
   },

@@ -70,7 +70,8 @@
     }
   },
   "bento": {
-    "heading": "Grupo Boticario increases developer productivity by 94% with Copilot.",
+    "headingPrefix": "Grupo Boticario increases developer productivity by",
+    "headingEmphasis": "94% with Copilot.",
     "linkText": "Read customer story",
     "imageAlt": "Grupo Boticario team members collaborating in an office setting"
   },

@@ -70,7 +70,8 @@
     }
   },
   "bento": {
-    "heading": "Grupo Boticario aumenta la productividad de sus desarrolladores en un 94 % con Copilot.",
+    "headingPrefix": "Grupo Boticario aumenta la productividad de sus desarrolladores",
+    "headingEmphasis": "en un 94 % con Copilot.",
     "linkText": "Leer caso de cliente",
     "imageAlt": "Miembros del equipo de Grupo Boticario colaborando en una oficina"
   },

@@ -70,7 +70,8 @@
     }
   },
   "bento": {
-    "heading": "Grupo Boticario augmente la productivité des développeurs de 94 % avec Copilot.",
+    "headingPrefix": "Grupo Boticario augmente la productivité des développeurs",
+    "headingEmphasis": "de 94 % avec Copilot.",
     "linkText": "Lire le témoignage client",
     "imageAlt": "Des membres de l'équipe Grupo Boticario collaborent dans un bureau"
   },

@@ -70,7 +70,8 @@
     }
   },
   "bento": {
-    "heading": "Grupo Boticario は Copilot により開発者の生産性を 94% 向上させました。",
+    "headingPrefix": "Grupo Boticario は",
+    "headingEmphasis": "Copilot により開発者の生産性を 94% 向上させました。",
     "linkText": "お客様事例を読む",
     "imageAlt": "オフィスで共同作業する Grupo Boticario のチームメンバー"
   },

@@ -70,7 +70,8 @@
     }
   },
   "bento": {
-    "heading": "O Grupo Boticário aumenta a produtividade dos desenvolvedores em 94% com o Copilot.",
+    "headingPrefix": "O Grupo Boticário aumenta a produtividade dos desenvolvedores",
+    "headingEmphasis": "em 94% com o Copilot.",
     "linkText": "Ler a história do cliente",
     "imageAlt": "Membros da equipe do Grupo Boticário colaborando em um escritório"
   },

@@ -16,5 +16,29 @@ module.exports = {
       value: 'var(--brand-color-canvas-subtle)',
       dark: 'var(--brand-color-canvas-subtle)',
     },
+    color: {
+      logo: {
+        muted: {
+          value: 'var(--brand-color-text-muted)',
+          dark: 'var(--brand-color-text-muted)',
+        },
+        emphasis: {
+          value: 'var(--brand-color-text-default)',
+          dark: 'var(--brand-color-text-default)',
+        },
+        filter: {
+          muted: {
+            value:
+              'brightness(0) saturate(100%) invert(37%) sepia(7%) saturate(778%) hue-rotate(171deg) brightness(96%) contrast(91%)',
+            dark: 'brightness(0) saturate(100%) invert(61%) sepia(8%) saturate(430%) hue-rotate(171deg) brightness(94%) contrast(92%)',
+          },
+          emphasis: {
+            value:
+              'brightness(0) saturate(100%) invert(12%) sepia(20%) saturate(450%) hue-rotate(172deg) brightness(100%) contrast(91%)',
+            dark: 'brightness(0) saturate(100%) invert(91%) sepia(2%) saturate(2455%) hue-rotate(193deg) brightness(107%) contrast(98%)',
+          },
+        },
+      },
+    },
   },
 }
@@ -203,8 +203,8 @@
           "dark": "var(--brand-color-text-default)"
         },
         "emphasis": {
-          "value": "#1a7f37",
-          "dark": "#5FED83"
+          "value": "var(--brand-color-text-emphasized)",
+          "dark": "var(--brand-color-text-emphasized)"
         }
       }
     }

@@ -3,6 +3,12 @@ set -euo pipefail
 
 REPO_ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/../../../.." && pwd)"
 
+if [[ "${GITHUB_ACTIONS:-}" != "true" ]] && (echo > /dev/tcp/127.0.0.1/6006) >/dev/null 2>&1; then
+  echo "ERROR: Port 6006 is already in use." >&2
+  echo "Stop your local Storybook dev server before running visual tests," >&2
+  exit 1
+fi
+
 cd "${REPO_ROOT}"
 npm run build:lib
 

@@ -3,6 +3,12 @@ set -euo pipefail
 
 REPO_ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/../../../.." && pwd)"
 
+if [[ "${GITHUB_ACTIONS:-}" != "true" ]] && (echo > /dev/tcp/127.0.0.1/6006) >/dev/null 2>&1; then
+  echo "ERROR: Port 6006 is already in use." >&2
+  echo "Stop your local Storybook dev server before updating visual snapshots," >&2
+  exit 1
+fi
+
 # Run all tests with npm run test:visual.
 # Optionally: Run single stories
 # Examples:

@@ -363,4 +363,9 @@ const Visual = ({
   )
 }
 
+/**
+ * Use Bento to present content in a responsive grid layout.
+ * @deprecated Bento is deprecated and will be removed in a future release. Use CTABanner or River instead.
+ * @see https://primer.style/brand/components/Bento
+ */
 export const Bento = Object.assign(Root, {Item, Visual, Content, Heading: _Heading})