diff --git a/.changeset/orange-mugs-pay.md b/.changeset/orange-mugs-pay.md
new file mode 100644
index 00000000000..1ccd8772b0e
--- /dev/null
+++ b/.changeset/orange-mugs-pay.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Dialog: Enhance the design by implementing our new Button in the footer and the IconButton in the header, and setting subtitles to regular.
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-colorblind-linux.png
index 4ade13d1164..75b3b5e4912 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-dimmed-linux.png
index 9145e1d4d00..28fd65715e1 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-dimmed-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-high-contrast-linux.png
index 8da4b5d1a10..1b40f29a226 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-linux.png
index 0a21cb90295..8413fcedec9 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-tritanopia-linux.png
index d38cfd9ec4a..1e9926a6e75 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-colorblind-linux.png
index 8a91df84971..440f5a571ed 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-high-contrast-linux.png
index 9944f0684e6..dfa830899b7 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-linux.png
index dcd8a43c24c..00892c90f5a 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-tritanopia-linux.png
index 01863d37c89..7267c69a11a 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Default-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-colorblind-linux.png
index df5c8ca4157..45c4aae953e 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-dimmed-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-dimmed-linux.png
index d80273a6153..90ae49aca01 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-dimmed-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-high-contrast-linux.png
index fd1c0eb1171..1c16bda3eac 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-linux.png
index 49d7d9d048e..0948594a3dc 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-tritanopia-linux.png
index a94fd6f73ee..ea4b334ba67 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-colorblind-linux.png
index 99b276f4e6a..1926454d435 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-high-contrast-linux.png
index 51e087edc6d..05712bbb5f7 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-linux.png
index 22f2387bc05..f22dbc446e0 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-tritanopia-linux.png
index c9b7b4dc628..cc577db6c0a 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Stress-Test-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-colorblind-linux.png
index 788b8879f86..56f4b563598 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-dimmed-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-dimmed-linux.png
index 44e4755718a..cf7c800229d 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-dimmed-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-high-contrast-linux.png
index 6572a74c19a..4f15fb9c904 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-linux.png
index bd38664f3ca..5d05e9f60a7 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-tritanopia-linux.png
index 3440426eec0..df1c31699be 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-colorblind-linux.png
index 94168902683..a9b0e411c69 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-high-contrast-linux.png
index 380af28d9dc..b2c6f0d3ab3 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-linux.png
index f7cb338eb12..75a44dce781 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-linux.png differ
diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-tritanopia-linux.png
index 8e9e05cfac5..29c7c85a549 100644
Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-With-Custom-Renderers-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-colorblind-non-sticky-pane-1-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-colorblind-non-sticky-pane-1-linux.png
new file mode 100644
index 00000000000..487a06d209d
Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-colorblind-non-sticky-pane-1-linux.png differ
diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-dimmed-non-sticky-pane-1-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-dimmed-non-sticky-pane-1-linux.png
new file mode 100644
index 00000000000..89c1782b092
Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-dimmed-non-sticky-pane-1-linux.png differ
diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-high-contrast-non-sticky-pane-1-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-high-contrast-non-sticky-pane-1-linux.png
new file mode 100644
index 00000000000..4c41fd26a9c
Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-high-contrast-non-sticky-pane-1-linux.png differ
diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-non-sticky-pane-1-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-non-sticky-pane-1-linux.png
new file mode 100644
index 00000000000..9808ba75b7c
Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-non-sticky-pane-1-linux.png differ
diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-tritanopia-non-sticky-pane-1-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-tritanopia-non-sticky-pane-1-linux.png
new file mode 100644
index 00000000000..487a06d209d
Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-tritanopia-non-sticky-pane-1-linux.png differ
diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-light-colorblind-non-sticky-pane-1-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-light-colorblind-non-sticky-pane-1-linux.png
new file mode 100644
index 00000000000..819bf67ddf3
Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-light-colorblind-non-sticky-pane-1-linux.png differ
diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-light-high-contrast-non-sticky-pane-1-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-light-high-contrast-non-sticky-pane-1-linux.png
new file mode 100644
index 00000000000..348c3376fc3
Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-light-high-contrast-non-sticky-pane-1-linux.png differ
diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-light-non-sticky-pane-1-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-light-non-sticky-pane-1-linux.png
new file mode 100644
index 00000000000..a4f3d0c6e25
Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-light-non-sticky-pane-1-linux.png differ
diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-light-tritanopia-non-sticky-pane-1-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-light-tritanopia-non-sticky-pane-1-linux.png
new file mode 100644
index 00000000000..819bf67ddf3
Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-light-tritanopia-non-sticky-pane-1-linux.png differ
diff --git a/src/Dialog.stories.tsx b/src/Dialog.stories.tsx
index d085e9271fb..e1305a1dcbc 100644
--- a/src/Dialog.stories.tsx
+++ b/src/Dialog.stories.tsx
@@ -8,7 +8,7 @@ import {Dialog, DialogWidth, DialogHeight} from './Dialog/Dialog'
 /* Dialog Version 1? */
 
 export default {
-  title: 'Components/DialogV1',
+  title: 'Deprecated/Components/Dialog',
   component: Dialog,
   decorators: [
     Story => {
diff --git a/src/Dialog/Dialog.features.stories.tsx b/src/Dialog/Dialog.features.stories.tsx
index 33331260526..5993931098b 100644
--- a/src/Dialog/Dialog.features.stories.tsx
+++ b/src/Dialog/Dialog.features.stories.tsx
@@ -209,6 +209,59 @@ export const StressTest = ({width, height, subtitle}: DialogStoryProps) => {
   )
 }
 
+export const SmallButtons = ({width, height}: DialogStoryProps) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const onDialogClose = useCallback(() => setIsOpen(false), [])
+  return (
+    <>
+      <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
+        Show dialog
+      </Button>
+      {isOpen && (
+        <Dialog
+          title="Your title"
+          onClose={onDialogClose}
+          width={width}
+          height={height}
+          footerButtons={[
+            {buttonType: 'normal', content: 'Cancel', onClick: onDialogClose, size: 'small'},
+            {buttonType: 'primary', content: 'Submit', autoFocus: true, size: 'small'},
+          ]}
+        >
+          {lipsum}
+        </Dialog>
+      )}
+    </>
+  )
+}
+
+export const ButtonLink = ({width, height}: DialogStoryProps) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const onDialogClose = useCallback(() => setIsOpen(false), [])
+  return (
+    <>
+      <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
+        Show dialog
+      </Button>
+      {isOpen && (
+        <Dialog
+          title="Your title"
+          onClose={onDialogClose}
+          width={width}
+          height={height}
+          footerButtons={[
+            {buttonType: 'default', content: 'View all', as: 'a', href: 'https://github.com', autoFocus: true},
+          ]}
+        >
+          {lipsum}
+        </Dialog>
+      )}
+    </>
+  )
+}
+
 // repro for https://github.com/github/primer/issues/2480
 export const ReproMultistepDialogWithConditionalFooter = ({width, height}: DialogStoryProps) => {
   const [isOpen, setIsOpen] = useState(false)
diff --git a/src/Dialog/Dialog.tsx b/src/Dialog/Dialog.tsx
index f5511aea6bd..6ee156ceaac 100644
--- a/src/Dialog/Dialog.tsx
+++ b/src/Dialog/Dialog.tsx
@@ -1,12 +1,13 @@
 import React, {useCallback, useEffect, useRef, useState} from 'react'
 import styled from 'styled-components'
-import Button, {ButtonPrimary, ButtonDanger, ButtonProps} from '../deprecated/Button'
 import Box from '../Box'
+import {IconButton, Button, ButtonProps} from '../index'
+
 import {get} from '../constants'
 import {useOnEscapePress, useProvidedRefOrCreate} from '../hooks'
 import {useFocusTrap} from '../hooks/useFocusTrap'
 import sx, {SxProp} from '../sx'
-import Octicon from '../Octicon'
+import {defaultSxProp} from '../utils/defaultSxProp'
 import {XIcon} from '@primer/octicons-react'
 import {useFocusZone} from '../hooks/useFocusZone'
 import {FocusKeys} from '@primer/behaviors'
@@ -22,11 +23,12 @@ const ANIMATION_DURATION = '200ms'
  * Props that characterize a button to be rendered into the footer of
  * a Dialog.
  */
+
 export type DialogButtonProps = Omit<ButtonProps, 'content'> & {
   /**
    * The type of Button element to use
    */
-  buttonType?: 'normal' | 'primary' | 'danger'
+  buttonType?: 'normal' | 'default' | 'primary' | 'danger' // 'normal' to avoid a breaking change. Remove in the future in favor of 'variant`
 
   /**
    * The Button's inner text
@@ -215,6 +217,10 @@ const StyledDialog = styled.div<StyledDialogProps>`
   ${sx};
 `
 
+const CloseButton = ({onClose}: {onClose: () => void}) => {
+  return <IconButton aria-label="Close" onClick={onClose} variant="invisible" icon={XIcon} />
+}
+
 const DefaultHeader: React.FC<React.PropsWithChildren<DialogHeaderProps>> = ({
   dialogLabelId,
   title,
@@ -232,7 +238,7 @@ const DefaultHeader: React.FC<React.PropsWithChildren<DialogHeaderProps>> = ({
           <Dialog.Title id={dialogLabelId}>{title ?? 'Dialog'}</Dialog.Title>
           {subtitle && <Dialog.Subtitle id={dialogDescriptionId}>{subtitle}</Dialog.Subtitle>}
         </Box>
-        <Dialog.CloseButton onClose={onCloseClick} />
+        <CloseButton onClose={onCloseClick} />
       </Box>
     </Dialog.Header>
   )
@@ -351,6 +357,7 @@ const Title = styled.h1<SxProp>`
 const Subtitle = styled.h2<SxProp>`
   font-size: ${get('fontSizes.0')};
   color: ${get('colors.fg.muted')};
+  font-weight: ${get('fontWeights.normal')};
   margin: 0; /* override default margin */
   margin-top: ${get('space.1')};
 
@@ -378,11 +385,6 @@ const Footer = styled.div<SxProp>`
   ${sx};
 `
 
-const buttonTypes = {
-  normal: Button,
-  primary: ButtonPrimary,
-  danger: ButtonDanger,
-}
 const Buttons: React.FC<React.PropsWithChildren<{buttons: DialogButtonProps[]}>> = ({buttons}) => {
   const autoFocusRef = useProvidedRefOrCreate<HTMLButtonElement>(buttons.find(button => button.autoFocus)?.ref)
   let autoFocusCount = 0
@@ -399,40 +401,21 @@ const Buttons: React.FC<React.PropsWithChildren<{buttons: DialogButtonProps[]}>>
   return (
     <>
       {buttons.map((dialogButtonProps, index) => {
-        const {content, buttonType = 'normal', autoFocus = false, ...buttonProps} = dialogButtonProps
-        const ButtonElement = buttonTypes[buttonType]
+        const {content, buttonType = 'normal', autoFocus = false, ...rest} = dialogButtonProps
         return (
-          <ButtonElement
+          <Button
             key={index}
-            {...buttonProps}
-            variant={buttonType}
+            variant={buttonType === 'normal' ? 'default' : buttonType}
+            {...rest}
             ref={autoFocus && autoFocusCount === 0 ? (autoFocusCount++, autoFocusRef) : null}
           >
             {content}
-          </ButtonElement>
+          </Button>
         )
       })}
     </>
   )
 }
-const DialogCloseButton = styled(Button)`
-  border-radius: 4px;
-  background: transparent;
-  border: 0;
-  vertical-align: middle;
-  color: ${get('colors.fg.muted')};
-  padding: ${get('space.2')};
-  align-self: flex-start;
-  line-height: normal;
-  box-shadow: none;
-`
-const CloseButton: React.FC<React.PropsWithChildren<{onClose: () => void}>> = ({onClose}) => {
-  return (
-    <DialogCloseButton aria-label="Close" onClick={onClose}>
-      <Octicon icon={XIcon} />
-    </DialogCloseButton>
-  )
-}
 
 /**
  * A dialog is a type of overlay that can be used for confirming actions, asking
@@ -461,6 +444,6 @@ export const Dialog = Object.assign(_Dialog, {
   Subtitle,
   Body,
   Footer,
-  Buttons,
   CloseButton,
+  Buttons,
 })