diff --git a/.changeset/moody-buttons-swim.md b/.changeset/moody-buttons-swim.md
new file mode 100644
index 00000000000..0e494d7ff6a
--- /dev/null
+++ b/.changeset/moody-buttons-swim.md
@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+Dialog 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/Dialog.md b/docs/content/Dialog.md
index fb89a80dacb..46a16893bc2 100644
--- a/docs/content/Dialog.md
+++ b/docs/content/Dialog.md
@@ -84,25 +84,22 @@ You can also pass any non-text content into the header:
```
-## System props
-
-
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-
+## Component props
-`Dialog` components get the `COMMON` and `LAYOUT` categories of system props. `Dialog.Header` components get `COMMON`, `LAYOUT`, and `FLEX` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+### Dialog
-## Component props
+| Prop name | Type | Default | Description |
+| :-------------- | :---------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| isOpen | Boolean | | Set whether or not the dialog is shown |
+| onDismiss | Function | | A user-provided function that should close the dialog |
+| returnFocusRef | React ref | | The element to restore focus back to after the `Dialog` is closed |
+| initialFocusRef | React ref | | Element inside of the `Dialog` you'd like to be focused when the Dialog is opened. If nothing is passed to `initialFocusRef` the close button is focused. |
+| aria-labelledby | string | | Pass an id to use for the aria-label. Use either a `aria-label` or an `aria-labelledby` but not both. |
+| aria-label | string | | Pass a label to be used to describe the Dialog. Use either a `aria-label` or an `aria-labelledby` but not both. |
+| sx | SystemStyleObject | {} | Style to be applied to the component |
-| Prop name | Type | Description |
-| :-------------- | :-------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| isOpen | Boolean | Set whether or not the dialog is shown |
-| onDismiss | Function | A user-provided function that should close the dialog |
-| returnFocusRef | React ref | The element to restore focus back to after the `Dialog` is closed |
-| initialFocusRef | React ref | Element inside of the `Dialog` you'd like to be focused when the Dialog is opened. If nothing is passed to `initialFocusRef` the close button is focused. |
-| aria-labelledby | string | Pass an id to use for the aria-label. Use either a `aria-label` or an `aria-labelledby` but not both. |
-| aria-label | string | Pass a label to be used to describe the Dialog. Use either a `aria-label` or an `aria-labelledby` but not both. |
+### Dialog.Header
-`Dialog.Header` does not take any non-system props.
+| Prop name | Type | Default | Description |
+| :-------- | :---------------- | :------ | :----------------------------------- |
+| sx | SystemStyleObject | {} | Style to be applied to the component |
diff --git a/src/Dialog.tsx b/src/Dialog.tsx
index 4f1aa8f0440..aee39d5979f 100644
--- a/src/Dialog.tsx
+++ b/src/Dialog.tsx
@@ -1,7 +1,7 @@
import React, {forwardRef, useRef} from 'react'
import styled from 'styled-components'
import ButtonClose from './Button/ButtonClose'
-import {COMMON, get, LAYOUT, SystemCommonProps, SystemLayoutProps} from './constants'
+import {get} from './constants'
import Box from './Box'
import useDialog from './hooks/useDialog'
import sx, {SxProp} from './sx'
@@ -14,9 +14,7 @@ const noop = () => null
type StyledDialogBaseProps = {
narrow?: boolean
wide?: boolean
-} & SystemLayoutProps &
- SystemCommonProps &
- SxProp
+} & SxProp
const DialogBase = styled.div`
box-shadow: ${get('shadows.shadow.large')};
@@ -39,8 +37,6 @@ const DialogBase = styled.div`
height: 100vh;
}
- ${LAYOUT};
- ${COMMON};
${sx};
`
diff --git a/src/__tests__/Dialog.types.test.tsx b/src/__tests__/Dialog.types.test.tsx
new file mode 100644
index 00000000000..de6b44c65ea
--- /dev/null
+++ b/src/__tests__/Dialog.types.test.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import Dialog from '../Dialog'
+
+export function shouldAcceptCallWithNoProps() {
+ return
+}
+
+export function shouldNotAcceptSystemProps() {
+ // @ts-expect-error system props should not be accepted
+ return
+}