diff --git a/.changeset/seven-hornets-jam.md b/.changeset/seven-hornets-jam.md
new file mode 100644
index 00000000000..2699e13c8dd
--- /dev/null
+++ b/.changeset/seven-hornets-jam.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Adds button element selector to FilteredSearch button styles
diff --git a/docs/content/CheckboxGroup.mdx b/docs/content/CheckboxGroup.mdx
index a0eb1fcee03..a18bb96daaf 100644
--- a/docs/content/CheckboxGroup.mdx
+++ b/docs/content/CheckboxGroup.mdx
@@ -1,5 +1,6 @@
 ---
 title: CheckboxGroup
+componentId: checkbox_group
 description: Renders a set of checkboxes to let users make one or more selections from a short list of options
 status: Alpha
 source: https://github.com/primer/react/blob/main/src/CheckboxGroup/CheckboxGroup.tsx
diff --git a/docs/content/Dialog2.mdx b/docs/content/Dialog.mdx
similarity index 99%
rename from docs/content/Dialog2.mdx
rename to docs/content/Dialog.mdx
index f10a2788dd3..3a6ad2eee77 100644
--- a/docs/content/Dialog2.mdx
+++ b/docs/content/Dialog.mdx
@@ -1,5 +1,6 @@
 ---
-title: Dialog v2
+title: Dialog
+componentId: dialog
 status: Alpha
 ---
 
@@ -53,7 +54,7 @@ By default, the Dialog component implements the design and interactions defined
       <>
         <Button onClick={openDialog}>Open</Button>
         {isOpen && (
-          <Dialog2
+          <Dialog
             title="Dialog example"
             subtitle={
               <>
@@ -64,7 +65,7 @@ By default, the Dialog component implements the design and interactions defined
             onClose={closeDialog}
           >
             <Text fontFamily="sans-serif">Some content</Text>
-          </Dialog2>
+          </Dialog>
         )}
       </>
     )
diff --git a/docs/content/FilteredSearch.md b/docs/content/FilteredSearch.md
index 77ba62fcae7..d94eef2bd86 100644
--- a/docs/content/FilteredSearch.md
+++ b/docs/content/FilteredSearch.md
@@ -12,14 +12,16 @@ The FilteredSearch component helps style a Dropdown and a TextInput side-by-side
 
 ```jsx live
 <FilteredSearch>
-  <Dropdown>
-    <Dropdown.Button>Filter</Dropdown.Button>
-    <Dropdown.Menu direction="sw">
-      <Dropdown.Item>Item 1</Dropdown.Item>
-      <Dropdown.Item>Item 2</Dropdown.Item>
-      <Dropdown.Item>Item 3</Dropdown.Item>
-    </Dropdown.Menu>
-  </Dropdown>
+  <ActionMenu>
+    <ActionMenu.Button as="summary">Filter</ActionMenu.Button>
+    <ActionMenu.Overlay>
+      <ActionList direction="sw">
+        <ActionList.Item>Item 1</ActionList.Item>
+        <ActionList.Item>Item 2</ActionList.Item>
+        <ActionList.Item>Item 3</ActionList.Item>
+      </ActionList>
+    </ActionMenu.Overlay>
+  </ActionMenu>
   <TextInput icon={SearchIcon} />
 </FilteredSearch>
 ```
diff --git a/docs/content/IconButton.mdx b/docs/content/IconButton.mdx
index 68409d6d40e..0edea279283 100644
--- a/docs/content/IconButton.mdx
+++ b/docs/content/IconButton.mdx
@@ -1,5 +1,6 @@
 ---
 title: IconButton
+componentId: icon_button
 status: Alpha
 source: https://github.com/primer/react/tree/main/src/Button2
 storybook: '/react/storybook?path=/story/composite-components-button2'
diff --git a/docs/content/LinkButton.mdx b/docs/content/LinkButton.mdx
deleted file mode 100644
index 4ba5ad8d208..00000000000
--- a/docs/content/LinkButton.mdx
+++ /dev/null
@@ -1,107 +0,0 @@
----
-title: LinkButton
-status: Alpha
-source: https://github.com/primer/react/tree/main/src/Button2
-storybook: '/react/storybook?path=/story/composite-components-button2'
-description: It is a combination of a button and link. Use this to make your link look like a button.
----
-
-## Usage
-
-### Installation
-
-```js
-import {LinkButton} from '@primer/react/drafts'
-```
-
-### Default
-
-The `LinkButton` can be considered an extension of `Button` component. It accepts all of the same props along with new link specific props like `to` and `href`.
-
-```jsx live drafts
-<LinkButton as="a" href="https://primer.style/">
-  Link to Primer
-</LinkButton>
-```
-
-### Other examples of using a LinkButton
-
-`LinkButton` also
-
-- supports the three different sizes. `small`, `medium`, `large`.
-- supports the different variants in [Button]('../Button2')
-- supports leadingIcon and trailingIcon
-
-```jsx live drafts
-<Box>
-  <LinkButton>Small link</LinkButton>
-  <LinkButton size="large" sx={{mt: 2}}>
-    Large link
-  </LinkButton>
-  <LinkButton variant="invisible" sx={{mt: 2}}>
-    Invisible link
-  </LinkButton>
-  <LinkButton variant="danger" sx={{mt: 2}}>
-    Danger link
-  </LinkButton>
-  <LinkButton trailingIcon={ArrowRightIcon} sx={{mt: 2}}>
-    Link with arrow
-  </LinkButton>
-</Box>
-```
-
-## API reference
-
-Native `<button>` HTML attributes are forwarded to the underlying React `button` component and are not listed below.
-
-### Button
-
-<PropsTable>
-  <PropsTableRow name="children" required type="React.ReactNode" description="This will be the Button description." />
-  <PropsTableRow
-    name="variant"
-    type="'default' | 'primary' | 'danger' | 'outline' | 'invisible'"
-    description="Changes the look and feel of the button which is different for each variant"
-  />
-  <PropsTableRow
-    name="size"
-    type="'small' | 'medium' | 'large'"
-    description="Changes the size of the icon button component"
-  />
-  <PropsTableRow
-    name="leadingIcon"
-    type="Component"
-    description="provide an octicon. It will be placed before the text of the button"
-  />
-  <PropsTableRow
-    name="trailingIcon"
-    type="Component"
-    description="provide an octicon. It will be placed after the text of the button"
-  />
-  <PropsTableRow
-    name="as"
-    type="Component | 'string'"
-    description="This will use the tag provided in the `as` property. Simultaneously will accept all the new props associated with the new component.For eg- If your `as` value is `ReactRouterLink`, then the prop `to` will be supported in this component "
-  />
-  <PropsTableSxRow />
-</PropsTable>
-
-## Component status
-
-<ComponentChecklist
-  items={{
-    propsDocumented: true,
-    noUnnecessaryDeps: true,
-    adaptsToThemes: true,
-    adaptsToScreenSizes: true,
-    fullTestCoverage: true,
-    usedInProduction: false,
-    usageExamplesDocumented: true,
-    designReviewed: false,
-    a11yReviewed: false,
-    stableApi: false,
-    addressedApiFeedback: false,
-    hasDesignGuidelines: false,
-    hasFigmaComponent: false
-  }}
-/>
diff --git a/docs/content/PageLayout.mdx b/docs/content/PageLayout.mdx
index cc062402fa2..5396abdb8ef 100644
--- a/docs/content/PageLayout.mdx
+++ b/docs/content/PageLayout.mdx
@@ -1,5 +1,6 @@
 ---
 title: PageLayout
+componentId: page_layout
 status: Alpha
 # description: TODO
 source: https://github.com/primer/react/tree/main/src/PageLayout
diff --git a/docs/content/Popover.md b/docs/content/Popover.md
index 7ff6ce5e729..efc9bc3b1fd 100644
--- a/docs/content/Popover.md
+++ b/docs/content/Popover.md
@@ -14,9 +14,9 @@ import {Popover} from '@primer/react'
 
 ```jxs live
 <Box position="relative">
-  <Text textAlign="center" display="block">
-    <ButtonPrimary>Hello!</ButtonPrimary>
-  </Text>
+  <Box justifyContent="center" display="flex">
+    <Button variant="primary">Hello!</Button>
+  </Box>
 
   <Popover relative open={true} caret="top">
     <Popover.Content sx={{mt: 2}}>
diff --git a/docs/content/RadioGroup.mdx b/docs/content/RadioGroup.mdx
index a5cbf373f20..99d2ae75b79 100644
--- a/docs/content/RadioGroup.mdx
+++ b/docs/content/RadioGroup.mdx
@@ -1,5 +1,6 @@
 ---
 title: RadioGroup
+componentId: radio_group
 description: Renders a set of radio inputs to let users make a single selection from a short list of options
 status: Alpha
 source: https://github.com/primer/react/blob/main/src/RadioGroup/RadioGroup.tsx
diff --git a/docs/content/SelectPanel.mdx b/docs/content/SelectPanel.mdx
index c6f77512445..a044fc2af21 100644
--- a/docs/content/SelectPanel.mdx
+++ b/docs/content/SelectPanel.mdx
@@ -45,9 +45,9 @@ function DemoComponent() {
   return (
     <SelectPanel
       renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-        <DropdownButton aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+        <Button trailingIcon={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
           {children || 'Select Labels'}
-        </DropdownButton>
+        </Button>
       )}
       placeholderText="Filter Labels"
       open={open}
diff --git a/docs/content/SubNav.md b/docs/content/SubNav.md
index 7fecd4f8454..701dc47e262 100644
--- a/docs/content/SubNav.md
+++ b/docs/content/SubNav.md
@@ -48,20 +48,22 @@ This ensures that the NavLink gets `activeClassName='selected'`
 ```jsx live
 <SubNav aria-label="Main">
   <FilteredSearch>
-    <Dropdown>
-      <Dropdown.Button>Filter</Dropdown.Button>
-      <Dropdown.Menu direction="sw">
-        <Dropdown.Item>
-          <a href="#">Item 1</a>
-        </Dropdown.Item>
-        <Dropdown.Item>
-          <a href="#">Item 2</a>
-        </Dropdown.Item>
-        <Dropdown.Item>
-          <a href="#">Item 3</a>
-        </Dropdown.Item>
-      </Dropdown.Menu>
-    </Dropdown>
+    <ActionMenu>
+      <ActionMenu.Button>Filter</ActionMenu.Button>
+      <ActionMenu.Overlay>
+        <ActionList direction="sw">
+          <ActionList.Item>
+            <a href="#">Item 1</a>
+          </ActionList.Item>
+          <ActionList.Item>
+            <a href="#">Item 2</a>
+          </ActionList.Item>
+          <ActionList.Item>
+            <a href="#">Item 3</a>
+          </ActionList.Item>
+        </ActionList>
+      </ActionMenu.Overlay>
+    </ActionMenu>
     <TextInput type="search" icon={SearchIcon} width={320} />
   </FilteredSearch>
   <SubNav.Links>
diff --git a/docs/content/deprecated/ActionList.mdx b/docs/content/deprecated/ActionList.mdx
index 1bcf8880fc0..c25de07a382 100644
--- a/docs/content/deprecated/ActionList.mdx
+++ b/docs/content/deprecated/ActionList.mdx
@@ -1,6 +1,5 @@
 ---
-componentId: action_list
-title: ActionList
+title: ActionList (legacy)
 status: Deprecated
 source: https://github.com/primer/react/tree/main/src/deprecated/ActionList
 ---
diff --git a/docs/content/deprecated/ActionMenu.mdx b/docs/content/deprecated/ActionMenu.mdx
index 0fa65bbc4b9..967d91761c6 100644
--- a/docs/content/deprecated/ActionMenu.mdx
+++ b/docs/content/deprecated/ActionMenu.mdx
@@ -1,6 +1,5 @@
 ---
-componentId: action_menu
-title: ActionMenu
+title: ActionMenu (legacy)
 status: Deprecated
 source: https://github.com/primer/react/tree/main/src/deprecated/ActionMenu.tsx
 ---
diff --git a/docs/content/deprecated/BorderBox.md b/docs/content/deprecated/BorderBox.md
index 2be97d6e22a..3a978b1c2e4 100644
--- a/docs/content/deprecated/BorderBox.md
+++ b/docs/content/deprecated/BorderBox.md
@@ -1,5 +1,4 @@
 ---
-componentId: border_box
 title: BorderBox
 status: Deprecated
 ---
diff --git a/docs/content/deprecated/Buttons.mdx b/docs/content/deprecated/Buttons.mdx
index c16aeb384b5..592d6cd58ed 100644
--- a/docs/content/deprecated/Buttons.mdx
+++ b/docs/content/deprecated/Buttons.mdx
@@ -1,6 +1,5 @@
 ---
-componentId: button
-title: Button
+title: Button (legacy)
 status: deprecated
 source: https://github.com/primer/react/blob/main/src/Button
 storybook: '/react/storybook?path=/story/composite-components-button--default-button'
diff --git a/docs/content/deprecated/ChoiceInputField.mdx b/docs/content/deprecated/ChoiceInputField.mdx
index d4c9b640c31..7ad92201e56 100644
--- a/docs/content/deprecated/ChoiceInputField.mdx
+++ b/docs/content/deprecated/ChoiceInputField.mdx
@@ -1,5 +1,4 @@
 ---
-componentId: choiceInputField
 title: ChoiceInputField
 status: Deprecated
 description: The ChoiceInputField component is used to render a labelled checkbox or radio inputs with optional  hint text.
diff --git a/docs/content/deprecated/Dialog.md b/docs/content/deprecated/Dialog.md
index dcd79b30623..feabc4ac1f9 100644
--- a/docs/content/deprecated/Dialog.md
+++ b/docs/content/deprecated/Dialog.md
@@ -1,11 +1,11 @@
 ---
-title: Dialog
+title: Dialog (legacy)
 status: Deprecated
 ---
 
 ## Deprecation
 
-Use [Dialog2](/Dialog2) instead.
+Use the [new version of Dialog](/Dialog) instead.
 
 **Before**
 
@@ -23,7 +23,7 @@ Use [Dialog2](/Dialog2) instead.
 ```jsx deprecated
 {
   open && (
-    <Dialog2
+    <Dialog
       title="Dialog example"
       subtitle={
         <>
@@ -34,13 +34,11 @@ Use [Dialog2](/Dialog2) instead.
       onClose={() => setOpen(false)}
     >
       <Text fontFamily="sans-serif">Some content</Text>
-    </Dialog2>
+    </Dialog>
   )
 }
 ```
 
-import State from '../../components/State'
-
 The dialog component is used for all modals. It renders on top of the rest of the app with an overlay.
 
 You'll need to manage the `isOpen` state in a wrapper component of your own and pass in a function to be used to close the Dialog. For documentation purposes only we've created a mock `State` to handle this, but you should handle the state in the component you consume `Dialog` in or in a wrapper component.
@@ -111,7 +109,7 @@ You can also pass any non-text content into the header:
             </Text>
             <Box display="flex" mt={3} justifyContent="flex-end">
               <Button sx={{mr: 1}}>Cancel</Button>
-              <ButtonDanger>Delete</ButtonDanger>
+              <Button variant="danger">Delete</Button>
             </Box>
           </Box>
         </Dialog>
diff --git a/docs/content/deprecated/DropdownMenu.mdx b/docs/content/deprecated/DropdownMenu.mdx
index df48fbc532c..7b03ceb72c5 100644
--- a/docs/content/deprecated/DropdownMenu.mdx
+++ b/docs/content/deprecated/DropdownMenu.mdx
@@ -1,5 +1,4 @@
 ---
-componentId: dropdown_menu
 title: DropdownMenu
 status: Deprecated
 ---
diff --git a/docs/content/deprecated/Flex.md b/docs/content/deprecated/Flex.md
index 5ad6838dfc8..631e973a3ef 100644
--- a/docs/content/deprecated/Flex.md
+++ b/docs/content/deprecated/Flex.md
@@ -1,5 +1,4 @@
 ---
-componentId: flex
 title: Flex
 status: Deprecated
 ---
diff --git a/docs/content/deprecated/FormGroup.md b/docs/content/deprecated/FormGroup.md
index 143c750db0e..cb0a3143274 100644
--- a/docs/content/deprecated/FormGroup.md
+++ b/docs/content/deprecated/FormGroup.md
@@ -1,5 +1,4 @@
 ---
-componentId: form_group
 title: FormGroup
 status: Deprecated
 ---
diff --git a/docs/content/deprecated/Grid.md b/docs/content/deprecated/Grid.md
index 905630fe9e7..7f1d6810a3e 100644
--- a/docs/content/deprecated/Grid.md
+++ b/docs/content/deprecated/Grid.md
@@ -1,5 +1,4 @@
 ---
-componentId: grid
 title: Grid
 status: Deprecated
 ---
diff --git a/docs/content/deprecated/InputField.mdx b/docs/content/deprecated/InputField.mdx
index 6da7689f800..5a613bfa5bc 100644
--- a/docs/content/deprecated/InputField.mdx
+++ b/docs/content/deprecated/InputField.mdx
@@ -1,5 +1,4 @@
 ---
-componentId: inputField
 title: InputField
 status: Deprecated
 description: The InputField component is used to render a labelled text input and, optionally, associated validation text and hint text.
diff --git a/docs/content/deprecated/Label.mdx b/docs/content/deprecated/Label.mdx
index 6546cc905ec..e8ce7b7dbef 100644
--- a/docs/content/deprecated/Label.mdx
+++ b/docs/content/deprecated/Label.mdx
@@ -1,5 +1,5 @@
 ---
-title: Label
+title: Label (legacy)
 description: Use Label components to add contextual metadata to a design.
 status: Deprecated
 source: https://github.com/primer/react/blob/main/src/Label.tsx
diff --git a/docs/content/deprecated/Position.md b/docs/content/deprecated/Position.md
index fb2006117ca..8faae3c9475 100644
--- a/docs/content/deprecated/Position.md
+++ b/docs/content/deprecated/Position.md
@@ -1,5 +1,4 @@
 ---
-componentId: position
 title: Position
 status: Deprecated
 ---
diff --git a/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js b/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js
index 6532f85324d..f89af5a7a60 100644
--- a/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js
+++ b/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js
@@ -1,46 +1,10 @@
 import * as doctocatComponents from '@primer/gatsby-theme-doctocat'
-import {
-  AlertIcon,
-  ArchiveIcon,
-  ArrowRightIcon,
-  CalendarIcon,
-  CheckIcon,
-  DotIcon,
-  FilterIcon,
-  FlameIcon,
-  GearIcon,
-  GitCommitIcon,
-  IterationsIcon,
-  KebabHorizontalIcon,
-  LawIcon,
-  LinkIcon,
-  MailIcon,
-  MarkGithubIcon,
-  NoteIcon,
-  NumberIcon,
-  SmileyIcon,
-  PencilIcon,
-  PersonIcon,
-  ProjectIcon,
-  SearchIcon,
-  SingleSelectIcon,
-  StarIcon,
-  TrashIcon,
-  TypographyIcon,
-  VersionsIcon,
-  XIcon,
-  ZapIcon,
-  TriangleDownIcon
-} from '@primer/octicons-react'
+import * as octicons from '@primer/octicons-react'
 import * as primerComponents from '@primer/react'
 import * as drafts from '@primer/react/drafts'
 import * as deprecated from '@primer/react/deprecated'
 import {Placeholder} from '@primer/react/Placeholder'
 import React from 'react'
-import {AnchoredOverlay} from '../../../../src/AnchoredOverlay'
-import {ConfirmationDialog, useConfirm} from '../../../../src/Dialog/ConfirmationDialog'
-import {Dialog as Dialog2} from '../../../../src/Dialog/Dialog'
-import {SelectPanel} from '../../../../src/SelectPanel/SelectPanel'
 import State from '../../../components/State'
 
 const ReactRouterLink = ({to, ...props}) => {
@@ -52,46 +16,11 @@ export default function resolveScope(metastring) {
   return {
     ...doctocatComponents,
     ...primerComponents,
+    ...octicons,
     ...(metastring.includes('drafts') ? drafts : {}),
     ...(metastring.includes('deprecated') ? deprecated : {}),
     ReactRouterLink,
     State,
-    CheckIcon,
-    SearchIcon,
-    ZapIcon,
-    XIcon,
-    DotIcon,
-    SmileyIcon,
-    PersonIcon,
-    MailIcon,
-    GitCommitIcon,
-    FlameIcon,
-    MarkGithubIcon,
-    NoteIcon,
-    ProjectIcon,
-    FilterIcon,
-    GearIcon,
-    TypographyIcon,
-    VersionsIcon,
-    LinkIcon,
-    LawIcon,
-    StarIcon,
-    AlertIcon,
-    ArrowRightIcon,
-    KebabHorizontalIcon,
-    PencilIcon,
-    ArchiveIcon,
-    TrashIcon,
-    CalendarIcon,
-    IterationsIcon,
-    NumberIcon,
-    SingleSelectIcon,
-    TriangleDownIcon,
-    Dialog2,
-    ConfirmationDialog,
-    useConfirm,
-    AnchoredOverlay,
-    SelectPanel,
     Placeholder
   }
 }
diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
index 30143970b9c..59369018686 100644
--- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml
+++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
@@ -65,8 +65,10 @@
       url: /CircleOcticon
     - title: CounterLabel
       url: /CounterLabel
-    - title: Details & useDetails
+    - title: Details
       url: /Details
+    - title: Dialog
+      url: /Dialog
     - title: FilteredSearch
       url: /FilteredSearch
     - title: FilterList
@@ -143,23 +145,23 @@
       url: /Truncate
     - title: UnderlineNav
       url: /UnderlineNav
-- title: Drafts
-  children:
+# - title: Drafts
+#   children:
 - title: Deprecated
   children:
-    - title: ActionList
+    - title: ActionList (legacy)
       url: /deprecated/ActionList
-    - title: ActionMenu
+    - title: ActionMenu (legacy)
       url: /deprecated/ActionMenu
     - title: BorderBox
       url: /deprecated/BorderBox
-    - title: Buttons
+    - title: Buttons (legacy)
       url: /deprecated/Buttons
     - title: ChoiceFieldset
       url: /deprecated/ChoiceFieldset
     - title: ChoiceInputField
       url: /deprecated/ChoiceInputField
-    - title: Dialog
+    - title: Dialog (legacy)
       url: /deprecated/Dialog
     - title: Dropdown
       url: /deprecated/Dropdown
diff --git a/src/FilteredSearch.tsx b/src/FilteredSearch.tsx
index 2e7bf8de368..888a9cc7ade 100644
--- a/src/FilteredSearch.tsx
+++ b/src/FilteredSearch.tsx
@@ -7,7 +7,8 @@ const FilteredSearch = styled.div<SxProp>`
   display: flex;
   align-items: stretch;
 
-  summary {
+  summary,
+  > button {
     border-radius: 0;
     border-top-left-radius: ${get('radii.2')};
     border-bottom-left-radius: ${get('radii.2')};
diff --git a/src/__tests__/__snapshots__/FilteredSearch.test.tsx.snap b/src/__tests__/__snapshots__/FilteredSearch.test.tsx.snap
index c1e3a865678..b093bbf8a7f 100644
--- a/src/__tests__/__snapshots__/FilteredSearch.test.tsx.snap
+++ b/src/__tests__/__snapshots__/FilteredSearch.test.tsx.snap
@@ -12,7 +12,8 @@ exports[`FilteredSearch renders consistently 1`] = `
   align-items: stretch;
 }
 
-.c0 summary {
+.c0 summary,
+.c0 > button {
   border-radius: 0;
   border-top-left-radius: 6px;
   border-bottom-left-radius: 6px;