diff --git a/.changeset/beige-dots-buy.md b/.changeset/beige-dots-buy.md
new file mode 100644
index 00000000000..0bea1978ff6
--- /dev/null
+++ b/.changeset/beige-dots-buy.md
@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+Truncate 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/Truncate.md b/docs/content/Truncate.md
index 9d398b930b1..1325f27e598 100644
--- a/docs/content/Truncate.md
+++ b/docs/content/Truncate.md
@@ -44,21 +44,12 @@ You can use the `expandable` boolean prop to display the truncated text on hover
```
-## System props
-
-
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-
-
-Truncate components get `TYPOGRAPHY` and `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
## Component props
-| Name | Type | Default | Description |
-| :--------- | :------ | :-----: | :----------------------------------------------------------- |
-| as | String | `div` | Sets the HTML tag for the component |
-| maxWidth | Number | 125 | Sets the max-width of the text |
-| inline | Boolean | false | displays text as inline block and vertical aligns to the top |
-| expandable | Boolean | false | allows the truncated text to be displayed on hover |
+| Name | Type | Default | Description |
+| :--------- | :---------------- | :-----: | :----------------------------------------------------------- |
+| as | String | `div` | Sets the HTML tag for the component |
+| maxWidth | Number | 125 | Sets the max-width of the text |
+| inline | Boolean | false | displays text as inline block and vertical aligns to the top |
+| expandable | Boolean | false | allows the truncated text to be displayed on hover |
+| sx | SystemStyleObject | {} | Style to be applied to the component |
diff --git a/src/Truncate.tsx b/src/Truncate.tsx
index 043956b1310..f49df8044b8 100644
--- a/src/Truncate.tsx
+++ b/src/Truncate.tsx
@@ -1,6 +1,5 @@
import styled from 'styled-components'
import {maxWidth, MaxWidthProps} from 'styled-system'
-import {COMMON, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
import sx, {SxProp} from './sx'
import {ComponentProps} from './utils/types'
@@ -9,13 +8,9 @@ type StyledTruncateProps = {
inline?: boolean
expandable?: boolean
} & MaxWidthProps &
- SystemTypographyProps &
- SystemCommonProps &
SxProp
const Truncate = styled.div`
- ${TYPOGRAPHY}
- ${COMMON}
display: ${props => (props.inline ? 'inline-block' : 'inherit')};
overflow: hidden;
text-overflow: ellipsis;
diff --git a/src/__tests__/Truncate.types.test.tsx b/src/__tests__/Truncate.types.test.tsx
new file mode 100644
index 00000000000..59e92ff650f
--- /dev/null
+++ b/src/__tests__/Truncate.types.test.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import Truncate from '../Truncate'
+
+export function shouldAcceptCallWithNoProps() {
+ return
+}
+
+export function shouldNotAcceptSystemProps() {
+ // @ts-expect-error system props should not be accepted
+ return
+}