diff --git a/.changeset/little-bats-repeat.md b/.changeset/little-bats-repeat.md
new file mode 100644
index 00000000000..24a7bc73c0e
--- /dev/null
+++ b/.changeset/little-bats-repeat.md
@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+Header no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
diff --git a/docs/content/Header.md b/docs/content/Header.md
index 26548ad3fb3..632262a9c50 100644
--- a/docs/content/Header.md
+++ b/docs/content/Header.md
@@ -53,27 +53,25 @@ All items directly under the Header component should be a `Header.Item` componen
```
-## System props
-
-
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-
+## Component props
-`Header` and `Header.Item` components get `COMMON` and `BORDER` system props. `Header.Link` component gets `COMMON`, `BORDER`, and `TYPOGRAPHY` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+### Header
-## Component props
+| Name | Type | Default | Description |
+| :--- | :---------------- | :-----: | :----------------------------------- |
+| sx | SystemStyleObject | {} | Style to be applied to the component |
### Header.Item
-| Prop name | Type | Description |
-| :-------- | :------ | :----------------------------------------- |
-| full | Boolean | stretches item to fill the available space |
+| Name | Type | Default | Description |
+| :--- | :---------------- | :-----: | :----------------------------------------- |
+| full | Boolean | | stretches item to fill the available space |
+| sx | SystemStyleObject | {} | Style to be applied to the component |
### Header.Link
-| Prop name | Type | Description |
-| :-------- | :----- | :---------------------------------- |
-| as | String | sets the HTML tag for the component |
-| href | String | URL to be used for the Link |
+| Name | Type | Default | Description |
+| :--- | :---------------- | :-----: | :----------------------------------- |
+| as | String | | sets the HTML tag for the component |
+| href | String | | URL to be used for the Link |
+| sx | SystemStyleObject | {} | Style to be applied to the component |
diff --git a/src/Header.tsx b/src/Header.tsx
index ac4bc8af8e3..4476b47c0d5 100644
--- a/src/Header.tsx
+++ b/src/Header.tsx
@@ -1,16 +1,13 @@
// eslint-disable-next-line import/no-namespace
import * as History from 'history'
import styled, {css} from 'styled-components'
-import {BORDER, COMMON, get, SystemBorderProps, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
+import {get} from './constants'
import sx, {SxProp} from './sx'
import {ComponentProps} from './utils/types'
-type StyledHeaderItemProps = {full?: boolean} & SystemCommonProps & SxProp
-type StyledHeaderProps = SystemBorderProps & SystemCommonProps & SxProp
-type StyledHeaderLinkProps = {to?: History.LocationDescriptor} & SystemCommonProps &
- SxProp &
- SystemTypographyProps &
- SystemBorderProps
+type StyledHeaderItemProps = {full?: boolean} & SxProp
+type StyledHeaderProps = SxProp
+type StyledHeaderLinkProps = {to?: History.LocationDescriptor} & SxProp
const Header = styled.div`
z-index: 32;
@@ -23,8 +20,6 @@ const Header = styled.div`
align-items: center;
flex-wrap: nowrap;
- ${COMMON}
- ${BORDER}
${sx};
`
const HeaderItem = styled.div`
@@ -40,8 +35,6 @@ const HeaderItem = styled.div`
flex: auto;
`};
- ${COMMON};
- ${BORDER};
${sx};
`
@@ -70,9 +63,6 @@ const HeaderLink = styled.a.attrs(({to}) => {
color: ${get('colors.header.text')};
}
- ${COMMON};
- ${BORDER};
- ${TYPOGRAPHY};
${sx};
`
diff --git a/src/__tests__/Header.types.test.tsx b/src/__tests__/Header.types.test.tsx
new file mode 100644
index 00000000000..65da425b161
--- /dev/null
+++ b/src/__tests__/Header.types.test.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import Header from '../Header'
+
+export function shouldAcceptCallWithNoProps() {
+ return
+}
+
+export function shouldNotAcceptSystemProps() {
+ return (
+ <>
+ {/* @ts-expect-error system props should not be accepted */}
+
+ {/* @ts-expect-error system props should not be accepted */}
+
+ {/* @ts-expect-error system props should not be accepted */}
+
+ >
+ )
+}