---
title: Minimal footer
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']
ready: true
source: https://github.com/primer/brand/blob/main/packages/react/src/MinimalFooter/MinimalFooter.tsx
figma: https://www.figma.com/file/BJ95AjraesmRCWsKA013GS/Primer-Brand?node-id=4686%3A30927&t=QKh20cPDVIFtBCHj-0
storybook: '/brand/storybook/?path=/story/components-minimalfooter--playground'
---

```js
import {MinimalFooter} from '@primer/react-brand'
```

## Examples

### Default

```jsx
<MinimalFooter />
```

### Footer links

Use up to five `MinimalFooter.Link` children. Links can render as anchors or buttons.

```jsx
<MinimalFooter>
  <MinimalFooter.Link href="https://github.com/organizations/enterprise_plan">Try GitHub for free</MinimalFooter.Link>
  <MinimalFooter.Link href="https://github.com/enterprise">Enterprise</MinimalFooter.Link>
  <MinimalFooter.Link href="https://github.com/enterprise/contact">Email us</MinimalFooter.Link>
</MinimalFooter>
```

### Footnotes

```jsx
<MinimalFooter>
  <MinimalFooter.Footnotes>
    <Text>
      <sup>1</sup>By signing up, GitHub may use your information to personalize and measure the effectiveness of
      enterprise business ads, including those you see off of GitHub, promotional communications or marketing you
      receive related to the Enterprise Marketing Pages. We will send you relevant emails and promotional information
      based on your GitHub profile and any additional information provided in the sign-up form. If you change your mind,
      you can unsubscribe at any time (an unsubscribe link is provided in every email). For more information on how
      GitHub uses your personal information, please see the{' '}
      <InlineLink
        href="https://docs.github.com/en/site-policy/privacy-policies/github-privacy-statement"
        target="_blank"
      >
        GitHub Privacy Statement
      </InlineLink>
      .
    </Text>
  </MinimalFooter.Footnotes>
</MinimalFooter>
```

### Footer social links

`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
<Stack>
  Hide all social links:
  <MinimalFooter socialLinks={false} />
  <br />
  Only show GitHub social link:
  <MinimalFooter socialLinks={['github']} />
</Stack>
```

### Center component

Use `centerComponent` for an exceptional page-specific control or status indicator between the top and bottom sections.

```jsx
<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
<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                            |
| `centerComponent`    | `ReactElement`                                                                                                      |                                      `undefined`                                      | Renders an optional component between the top and bottom sections. |
| `children`           | `'MinimalFooter.Link' \| 'MinimalFooter.Footnotes' \| 'MinimalFooter.BackToTop'`                                    |                                      `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` | Label for a link in the top 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>`.