primer · danielguillan · Jul 16, 2026 · Jul 29, 2026 · Jul 30, 2026 · Jul 30, 2026
@@ -0,0 +1,9 @@
+---
+'@primer/brand-primitives': minor
+'@primer/react-brand': minor
+---
+
+Updated `MinimalFooter` visual design and added a center component prop and back to top control.
+
+- Added the optional `centerComponent` prop for exceptional page-specific content and the optional `MinimalFooter.BackToTop` control.
+- Replaced the full GitHub logo with the GitHub logomark and reorganized the footer into top, center, and bottom sections.
@@ -1,6 +1,6 @@
 ---
 title: Minimal footer
-description: Use the minimal footer component to provide a global footer featuring legal links, GitHub logomarks and footnotes.
+description: Use the minimal footer component to provide a global footer featuring legal links, social links, and optional footnotes.
 keywords: ['legal', 'copyright', 'social', 'links', 'footnotes']
 show-tabs: false
 ready: true
@@ -27,6 +27,8 @@ import {MinimalFooter} from '@primer/react-brand'
 
 ### Footer links
 
+Use up to five `MinimalFooter.Link` children. Links can render as anchors or buttons.
+
 ```jsx live
 <MinimalFooter>
   <MinimalFooter.Link href="https://github.com/organizations/enterprise_plan">Try GitHub for free</MinimalFooter.Link>
@@ -61,7 +63,7 @@ import {MinimalFooter} from '@primer/react-brand'
 
 ### Footer social links
 
-`MinimalFooter` will render all supported social links by default. Social links can be removed however, by passing `socialLinks={false}`. Alteratively, pass an array of valid social links to filter the default list.
+`MinimalFooter` will render all supported social links by default. Social links can be removed however, by passing `socialLinks={false}`. Alternatively, pass an array of valid social links to filter and reorder the default list.
 
 ```jsx live
 <Stack>
@@ -73,27 +75,69 @@ import {MinimalFooter} from '@primer/react-brand'
 </Stack>
 ```
 
+### Center component
+
+Use `centerComponent` for an exceptional page-specific control or status indicator between the top and bottom sections.
+
+```jsx live
+<MinimalFooter
+  centerComponent={
+    <Stack direction="horizontal" gap="condensed" padding="none">
+      <Text size="200" variant="muted">
+        Status:
+      </Text>
+      <InlineLink href="https://www.githubstatus.com" size="200">
+        All systems operational
+      </InlineLink>
+    </Stack>
+  }
+/>
+```
+
+### Back to top
+
+Use `MinimalFooter.BackToTop` to opt into a control in the top row that scrolls the document back to the top.
+
+After keyboard activation, focus moves to the first `<main>` element, falling back to `<body>` or `<html>` when a main landmark is unavailable. Use `focusTargetId` to identify a different semantic top-of-page destination.
+
+```jsx live
+<MinimalFooter socialLinks={false}>
+  <MinimalFooter.BackToTop>Back to top</MinimalFooter.BackToTop>
+</MinimalFooter>
+```
+
 ## Component props
 
 ### MinimalFooter
 
-| Name                 | Type                                                                                             |                                        Default                                        | Description                                            |
-| :------------------- | :----------------------------------------------------------------------------------------------- | :-----------------------------------------------------------------------------------: | :----------------------------------------------------- |
-| `className`          | `string`                                                                                         |                                                                                       | Sets a custom class on the root element                |
-| `children`           | <MinimalFooterChildrenProp />                                                                    |                                      `undefined`                                      | Valid child components                                 |
-| `copyrightStatement` | `string` \| `ReactElement`                                                                       |                                                                                       | The copyright statement to be displayed in the footer. |
-| `logoHref`           | `string`                                                                                         |                                `'https://github.com'`                                 | The href for the GitHub logo.                          |
-| `socialLinks`        | `['x', 'github', 'linkedin', 'youtube', 'facebook', 'twitch', 'tiktok', 'instagram']` \| `false` | `['x', 'github', 'linkedin', 'youtube', 'facebook', 'twitch', 'tiktok', 'instagram']` | Array of valid strings or `false` to hide all links    |
+| Name                 | Type                                                                                                                |                                        Default                                        | Description                                                        |
+| :------------------- | :------------------------------------------------------------------------------------------------------------------ | :-----------------------------------------------------------------------------------: | :----------------------------------------------------------------- |
+| `className`          | `string`                                                                                                            |                                                                                       | Sets a custom class on the root element                            |
+| `centerComponent`    | `ReactElement`                                                                                                      |                                      `undefined`                                      | Renders an optional component between the top and bottom sections. |
+| `children`           | <MinimalFooterChildrenProp />                                                                                       |                                      `undefined`                                      | Valid child components                                             |
+| `copyrightStatement` | `string` \| `ReactElement`                                                                                          |                        Current-year GitHub copyright statement                        | The copyright statement displayed in the bottom section.           |
+| `logoHref`           | `string`                                                                                                            |                                `'https://github.com'`                                 | The href for the GitHub logomark.                                  |
+| `socialLinks`        | `Array<'x' \| 'github' \| 'linkedin' \| 'youtube' \| 'facebook' \| 'twitch' \| 'tiktok' \| 'instagram'>` \| `false` | `['x', 'github', 'linkedin', 'youtube', 'facebook', 'twitch', 'tiktok', 'instagram']` | Ordered subset of social links, or `false` to hide all links.      |
 
 ### MinimalFooter.Link
 
-| Name       | Type              |   Default   | Description                         |
-| :--------- | :---------------- | :---------: | :---------------------------------- |
-| `as`       | `'a'`, `'button'` |    `'a'`    | Applies the underlying HTML element |
-| `children` | `string`          | `undefined` | Link label text                     |
+| Name       | Type              |   Default   | Description                            |
+| :--------- | :---------------- | :---------: | :------------------------------------- |
+| `as`       | `'a'`, `'button'` |    `'a'`    | Applies the underlying HTML element    |
+| `children` | `string`          | `undefined` | Label for a link in the bottom section |
 
 ### MinimalFooter.Footnotes
 
 | Name       | Type         |   Default   | Description                                                           |
 | :--------- | :----------- | :---------: | :-------------------------------------------------------------------- |
 | `children` | ReactElement | `undefined` | Use Primer Brand `Text` components to benefit from inherited styling. |
+
+### MinimalFooter.BackToTop
+
+| Name            | Type                |   Default   | Description                                                                                                                                                    |
+| :-------------- | :------------------ | :---------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children`      | `ReactNode`         |  Required   | The visible and accessible localized label.                                                                                                                    |
+| `focusTargetId` | `string`            | `undefined` | ID of the semantic top-of-page element that receives focus after keyboard activation. Defaults to the first `<main>`, then falls back to `<body>` or `<html>`. |
+| `onClick`       | `MouseEventHandler` | `undefined` | Runs before the built-in behavior. Call `event.preventDefault()` to cancel scrolling and focus transfer.                                                       |
+
+All other props, including ARIA and `data-*` attributes, forward to the underlying `<button>`.
@@ -2,5 +2,8 @@
 import {PropTableValues} from '@primer/doctocat-nextjs/components'
 
 export const MinimalFooterChildrenProp = () => (
-  <PropTableValues values={['MinimalFooter.Link', 'MinimalFooter.Footnotes']} addLineBreaks />
+  <PropTableValues
+    values={['MinimalFooter.Link', 'MinimalFooter.Footnotes', 'MinimalFooter.BackToTop']}
+    addLineBreaks
+  />
 )
@@ -0,0 +1,9 @@
+{
+  "footer": {
+    "backToTop": {
+      "minTarget": {
+        "value": "{base.size.44}"
+      }
+    }
+  }
+}
@@ -1,12 +1,50 @@
 {
   "footer": {
+    "borderColor": {
+      "value": "var(--base-color-scale-green-6)",
+      "dark": "var(--base-color-scale-green-3)"
+    },
     "bg": {
       "color": {
         "value": "var(--base-color-scale-white)",
         "dark": "var(--base-color-scale-gray-9)"
       }
     },
+    "backToTop": {
+      "borderColor": {
+        "rest": {
+          "value": "var(--base-color-scale-gray-2)",
+          "dark": "var(--base-color-scale-gray-6)"
+        },
+        "hover": {
+          "value": "var(--base-color-scale-gray-2)",
+          "dark": "rgba(255, 255, 255, 0.12)"
+        },
+        "active": {
+          "value": "var(--base-color-scale-gray-2)",
+          "dark": "rgba(255, 255, 255, 0.12)"
+        }
+      },
+      "bgColor": {
+        "rest": {
+          "value": "rgba(0, 0, 0, 0.01)",
+          "dark": "rgba(0, 0, 0, 0.01)"
+        },
+        "hover": {
+          "value": "rgba(0, 0, 0, 0.1164)",
+          "dark": "rgba(255, 255, 255, 0.16)"
+        },
+        "active": {
+          "value": "rgba(0, 0, 0, 0.2104)",
+          "dark": "rgba(255, 255, 255, 0.24)"
+        }
+      }
+    },
     "socialIcon": {
+      "restFilter": {
+        "value": "sepia(37%) saturate(152%) hue-rotate(77deg) brightness(57%)",
+        "dark": "saturate(73%) hue-rotate(-89deg) brightness(110%)"
+      },
       "hoverFilter": {
         "value": "brightness(0)",
         "dark": "brightness(2)"

@@ -1,7 +1,10 @@
 import React from 'react'
 import type {Meta, StoryObj} from '@storybook/react'
+import {CheckCircleFillIcon} from '@primer/octicons-react'
+import {expect, within} from 'storybook/test'
 import {MinimalFooter} from '.'
-import {InlineLink, Text, ThemeProvider} from '..'
+import {InlineLink, Text, ThemeProvider, Token} from '..'
+import {RedlineBackground} from '../component-helpers'
 
 export default {
   title: 'Components/MinimalFooter/Features',
@@ -92,12 +95,12 @@ export const FilteredSocialLinks: Story = {
 
 export const ReversedSocialLinks: Story = {
   render: () => (
-    <MinimalFooter socialLinks={['x', 'github', 'linkedin', 'youtube', 'facebook', 'twitch', 'tiktok', 'instagram']} />
+    <MinimalFooter socialLinks={['instagram', 'tiktok', 'twitch', 'facebook', 'youtube', 'linkedin', 'github', 'x']} />
   ),
 }
 
 export const DefaultNarrow: Story = {
-  name: 'Default (Narrow viewport)',
+  name: 'Default, narrow view (mobile)',
   globals: {
     viewport: {value: 'iphonexr'},
   },
@@ -127,6 +130,18 @@ export const DefaultNarrow: Story = {
       <MinimalFooter.Link href="https://github.com/enterprise/contact">Email us</MinimalFooter.Link>
     </MinimalFooter>
   ),
+  play: async ({canvasElement}) => {
+    const socialLinks = within(canvasElement).getByRole('list')
+    const bottom = socialLinks.closest('section')
+    const container = bottom?.firstElementChild
+
+    if (!container) {
+      throw new Error('Expected the social footer layout to render')
+    }
+
+    expect(socialLinks.getBoundingClientRect().right).toBeLessThanOrEqual(container.getBoundingClientRect().right)
+    expect(document.documentElement.scrollWidth).toBe(document.documentElement.clientWidth)
+  },
 }
 
 export const DarkTheme: Story = {
@@ -136,3 +151,90 @@ export const DarkTheme: Story = {
     </ThemeProvider>
   ),
 }
+
+export const CustomContent: Story = {
+  render: () => (
+    <MinimalFooter
+      centerComponent={
+        <Token as="a" href="https://www.githubstatus.com" variant="accent" leadingVisual={<CheckCircleFillIcon />}>
+          All systems operational
+        </Token>
+      }
+    />
+  ),
+}
+
+export const BackToTop: Story = {
+  render: () => (
+    <main>
+      <RedlineBackground style={{height: '120vh'}}>
+        <Text as="p" align="center" weight="semibold">
+          Scroll down to test the back-to-top functionality
+        </Text>
+      </RedlineBackground>
+      <MinimalFooter>
+        <MinimalFooter.BackToTop>Back to top</MinimalFooter.BackToTop>
+      </MinimalFooter>
+    </main>
+  ),
+}
+
+const ResponsiveExample = ({socialLinks = true}: {socialLinks?: boolean}) => (
+  <MinimalFooter
+    centerComponent={
+      <Token as="a" href="https://www.githubstatus.com" variant="accent" leadingVisual={<CheckCircleFillIcon />}>
+        All systems operational
+      </Token>
+    }
+    copyrightStatement="GitHub, Inc. © 2026. All rights reserved."
+    socialLinks={socialLinks ? undefined : false}
+  >
+    <MinimalFooter.Footnotes>
+      <Text>
+        <sup>1</sup>Additional terms may apply. See the{' '}
+        <InlineLink href="https://docs.github.com/en/site-policy/privacy-policies/github-privacy-statement">
+          GitHub Privacy Statement
+        </InlineLink>
+        .
+      </Text>
+    </MinimalFooter.Footnotes>
+    <MinimalFooter.BackToTop>Back to top</MinimalFooter.BackToTop>
+    <MinimalFooter.Link href="#">Sitemap</MinimalFooter.Link>
+    <MinimalFooter.Link href="#">What is Git?</MinimalFooter.Link>
+    <MinimalFooter.Link href="#">Manage cookies</MinimalFooter.Link>
+    <MinimalFooter.Link href="#">Do not share or sell my personal information</MinimalFooter.Link>
+    <MinimalFooter.Link href="#">Terms of Service</MinimalFooter.Link>
+  </MinimalFooter>
+)
+
+export const NarrowView: Story = {
+  name: 'Narrow view (mobile)',
+  globals: {
+    viewport: {value: 'iphonexr'},
+  },
+  render: () => <ResponsiveExample />,
+}
+
+export const RegularView: Story = {
+  name: 'Regular view (tablet)',
+  globals: {
+    viewport: {value: 'ipad10p'},
+  },
+  render: () => <ResponsiveExample />,
+}
+
+export const NarrowViewNoSocialLinks: Story = {
+  name: 'Narrow view, no social links (mobile)',
+  globals: {
+    viewport: {value: 'iphonexr'},
+  },
+  render: () => <ResponsiveExample socialLinks={false} />,
+}
+
+export const RegularViewNoSocialLinks: Story = {
+  name: 'Regular view, no social links (tablet)',
+  globals: {
+    viewport: {value: 'ipad10p'},
+  },
+  render: () => <ResponsiveExample socialLinks={false} />,
+}