diff --git a/docs/content/ActionList.mdx b/docs/content/ActionList.mdx
index bb602fb235f..13dc782f735 100644
--- a/docs/content/ActionList.mdx
+++ b/docs/content/ActionList.mdx
@@ -14,7 +14,7 @@ import {LinkIcon, AlertIcon, ArrowRightIcon} from '@primer/octicons-react'
import InlineCode from '@primer/gatsby-theme-doctocat/src/components/inline-code'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
diff --git a/docs/content/ActionMenu.mdx b/docs/content/ActionMenu.mdx
index 582ea6eced5..243fd67b978 100644
--- a/docs/content/ActionMenu.mdx
+++ b/docs/content/ActionMenu.mdx
@@ -13,7 +13,7 @@ import data from '../../src/ActionMenu/ActionMenu.docs.json'
import {Box, Avatar, ActionList, ActionMenu} from '@primer/react'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
diff --git a/docs/content/AnchoredOverlay.mdx b/docs/content/AnchoredOverlay.mdx
index a3c2de115c5..d025974d46a 100644
--- a/docs/content/AnchoredOverlay.mdx
+++ b/docs/content/AnchoredOverlay.mdx
@@ -10,7 +10,7 @@ import data from '../../src/AnchoredOverlay/AnchoredOverlay.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
An `AnchoredOverlay` provides an anchor that will open a floating overlay positioned relative to the anchor.
The overlay can be opened and navigated using keyboard or mouse.
diff --git a/docs/content/Autocomplete.mdx b/docs/content/Autocomplete.mdx
index 09ad025b3b2..4667d822702 100644
--- a/docs/content/Autocomplete.mdx
+++ b/docs/content/Autocomplete.mdx
@@ -11,7 +11,7 @@ import data from '../../src/Autocomplete/Autocomplete.docs.json'
import {Autocomplete} from '@primer/react'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
The `Autocomplete` component is comprised of an `Autocomplete.Input` component that a user types into, and a `Autocomplete.Menu` component that displays the list of selectable values.
diff --git a/docs/content/Avatar.mdx b/docs/content/Avatar.mdx
index 4cebeb4bb92..718561b978b 100644
--- a/docs/content/Avatar.mdx
+++ b/docs/content/Avatar.mdx
@@ -9,7 +9,7 @@ import data from '../../src/Avatar/Avatar.docs.json'
import {Avatar, Box} from '@primer/react'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
```js
import {Avatar} from '@primer/react'
diff --git a/docs/content/AvatarPair.mdx b/docs/content/AvatarPair.mdx
index 9d55f63c61d..6fe658244e8 100644
--- a/docs/content/AvatarPair.mdx
+++ b/docs/content/AvatarPair.mdx
@@ -8,7 +8,7 @@ source: https://github.com/primer/react/blob/main/src/AvatarPair
import data from '../../src/AvatarPair/AvatarPair.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
```js
import {AvatarPair} from '@primer/react'
diff --git a/docs/content/AvatarStack.mdx b/docs/content/AvatarStack.mdx
index 25e03bf6fad..ca326e378a8 100644
--- a/docs/content/AvatarStack.mdx
+++ b/docs/content/AvatarStack.mdx
@@ -11,7 +11,7 @@ import data from '../../src/AvatarStack/AvatarStack.docs.json'
import {AvatarStack} from '@primer/react'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
```js
import {AvatarStack} from '@primer/react'
diff --git a/docs/content/Box.mdx b/docs/content/Box.mdx
index 1f87e187200..1fdc7fdcd18 100644
--- a/docs/content/Box.mdx
+++ b/docs/content/Box.mdx
@@ -9,7 +9,7 @@ source: https://github.com/primer/react/blob/main/src/Box.tsx
import data from '../../src/Box/Box.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
```js
import {Box} from '@primer/react'
diff --git a/docs/content/BranchName.mdx b/docs/content/BranchName.mdx
index 434c336ae4f..41f5bbee151 100644
--- a/docs/content/BranchName.mdx
+++ b/docs/content/BranchName.mdx
@@ -8,7 +8,7 @@ source: https://github.com/primer/react/blob/main/src/BranchName/BranchName.tsx
import data from '../../src/BranchName/BranchName.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
```js
import {BranchName} from '@primer/react'
diff --git a/docs/content/Breadcrumbs.mdx b/docs/content/Breadcrumbs.mdx
index 75dc045480d..d4459aad7a8 100644
--- a/docs/content/Breadcrumbs.mdx
+++ b/docs/content/Breadcrumbs.mdx
@@ -9,7 +9,7 @@ source: https://github.com/primer/react/blob/main/src/Breadcrumbs/Breadcrumbs.ts
import data from '../../src/Breadcrumbs/Breadcrumbs.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
```js
import {Breadcrumbs} from '@primer/react'
diff --git a/docs/content/Button.mdx b/docs/content/Button.mdx
index 638c7a303f6..1730d875a56 100644
--- a/docs/content/Button.mdx
+++ b/docs/content/Button.mdx
@@ -10,7 +10,7 @@ description: Use button for the main actions on a page or form.
import data from '../../src/Button/Button.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
```js
import {Button} from '@primer/react'
diff --git a/docs/content/ButtonGroup.mdx b/docs/content/ButtonGroup.mdx
index de12cceb89b..67f447d6c3f 100644
--- a/docs/content/ButtonGroup.mdx
+++ b/docs/content/ButtonGroup.mdx
@@ -9,7 +9,7 @@ storybook: '/react/storybook?path=/story/components-buttongroup--default'
import data from '../../src/ButtonGroup/ButtonGroup.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
```js
import {ButtonGroup} from '@primer/react'
diff --git a/docs/content/Checkbox.mdx b/docs/content/Checkbox.mdx
index a834915c95d..7c140f7def5 100644
--- a/docs/content/Checkbox.mdx
+++ b/docs/content/Checkbox.mdx
@@ -10,7 +10,7 @@ componentId: checkbox
import data from '../../src/Checkbox/Checkbox.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
## Examples
diff --git a/docs/content/CheckboxGroup.mdx b/docs/content/CheckboxGroup.mdx
index dce9e417ed7..0bdef56a2ed 100644
--- a/docs/content/CheckboxGroup.mdx
+++ b/docs/content/CheckboxGroup.mdx
@@ -13,7 +13,7 @@ import {CheckboxGroup, Checkbox, Box} from '@primer/components'
import {CheckIcon, XIcon, AlertIcon} from '@primer/octicons-react'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
## Examples
diff --git a/docs/content/CircleBadge.mdx b/docs/content/CircleBadge.mdx
index 587a95e1755..6dfd355eecb 100644
--- a/docs/content/CircleBadge.mdx
+++ b/docs/content/CircleBadge.mdx
@@ -8,7 +8,7 @@ source: https://github.com/primer/react/blob/main/src/CircleBadge
import data from '../../src/CircleBadge/CircleBadge.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
```js
import {CircleBadge} from '@primer/react'
diff --git a/docs/content/CounterLabel.mdx b/docs/content/CounterLabel.mdx
index 5e79ac1a4a9..e79d3eb7838 100644
--- a/docs/content/CounterLabel.mdx
+++ b/docs/content/CounterLabel.mdx
@@ -9,7 +9,7 @@ source: https://github.com/primer/react/blob/main/src/CounterLabel/CounterLabel.
import data from '../../src/CounterLabel/CounterLabel.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
## Example
diff --git a/docs/content/Details.mdx b/docs/content/Details.mdx
index c81f1f91b7d..92689216bb0 100644
--- a/docs/content/Details.mdx
+++ b/docs/content/Details.mdx
@@ -9,7 +9,7 @@ storybook: '/react/storybook/?path=/story/components-details--default'
import data from '../../src/Details/Details.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
`Details` is a styled `details` element for use with the `useDetails` hook. The `useDetails` hook returns the `open` state, a `setOpen` function to manually change the open state, and **`getDetailsProps` which must be spread onto your `Details` element in order for `Details` to get receive the proper behaviors provided by the hook**. See [Kent Dodd's article on this pattern](https://kentcdodds.com/blog/how-to-give-rendering-control-to-users-with-prop-getters).
diff --git a/docs/content/Dialog.mdx b/docs/content/Dialog.mdx
index 88a9e6d0e3d..d277c4baef9 100644
--- a/docs/content/Dialog.mdx
+++ b/docs/content/Dialog.mdx
@@ -7,7 +7,7 @@ source: https://github.com/primer/react/blob/main/src/Dialog
import data from '../../src/Dialog.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
The dialog component is used for all modals. It renders on top of the rest of the app with an overlay.
diff --git a/docs/content/Flash.mdx b/docs/content/Flash.mdx
index 52bf91e3fb7..6cf5c0ba9b9 100644
--- a/docs/content/Flash.mdx
+++ b/docs/content/Flash.mdx
@@ -8,7 +8,7 @@ source: https://github.com/primer/react/blob/main/src/Flash
import data from '../../src/Flash/Flash.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
```js
import {Flash} from '@primer/react'
diff --git a/docs/content/FormControl.mdx b/docs/content/FormControl.mdx
index c57363c5c49..0e2c07d21b7 100644
--- a/docs/content/FormControl.mdx
+++ b/docs/content/FormControl.mdx
@@ -24,7 +24,7 @@ import {
Text,
} from '@primer/react'
-
+
## Examples
diff --git a/docs/content/Header.mdx b/docs/content/Header.mdx
index d0a5ab1fafc..b89cb38d84f 100644
--- a/docs/content/Header.mdx
+++ b/docs/content/Header.mdx
@@ -9,7 +9,7 @@ componentId: header
import data from '../../src/Header/Header.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
## Examples
diff --git a/docs/content/Heading.mdx b/docs/content/Heading.mdx
index 10b8a07b875..62f0c47de4e 100644
--- a/docs/content/Heading.mdx
+++ b/docs/content/Heading.mdx
@@ -10,7 +10,7 @@ componentId: heading
import data from '../../src/Heading/Heading.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
The Heading component will render an html `h2` tag without any default styling. Other heading level elements `h1-h6` are available through use of the `as` prop (see [System Props](/system-props) for additional explanation). Please reference the [w3 recommendations for headings](https://www.w3.org/WAI/tutorials/page-structure/headings/) to ensure your headings provide an accessible experience for screen reader users.
diff --git a/docs/content/IconButton.mdx b/docs/content/IconButton.mdx
index b5c35cdc2c2..10c24327d46 100644
--- a/docs/content/IconButton.mdx
+++ b/docs/content/IconButton.mdx
@@ -10,7 +10,7 @@ description: An accessible button component with no text and only icon.
import data from '../../src/Button/IconButton.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
## Usage
diff --git a/docs/content/Label.mdx b/docs/content/Label.mdx
index 7a04b9def31..81e919cb902 100644
--- a/docs/content/Label.mdx
+++ b/docs/content/Label.mdx
@@ -10,7 +10,7 @@ description: Use Label components to add contextual metadata to a design.
import data from '../../src/Label/Label.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
## Examples
diff --git a/docs/content/LabelGroup.mdx b/docs/content/LabelGroup.mdx
index a1bc35754cc..a440d7f9f24 100644
--- a/docs/content/LabelGroup.mdx
+++ b/docs/content/LabelGroup.mdx
@@ -9,7 +9,7 @@ componentId: label_group
import data from '../../src/LabelGroup/LabelGroup.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
## Example
diff --git a/docs/content/Link.mdx b/docs/content/Link.mdx
index a43c1892756..4b200526a8c 100644
--- a/docs/content/Link.mdx
+++ b/docs/content/Link.mdx
@@ -9,7 +9,7 @@ storybook: '/react/storybook/?path=/story/components-link--default'
import data from '../../src/Link/Link.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
The Link component styles anchor tags with default hyperlink color cues and hover text decoration. `Link` is used for destinations, or moving from one page to another.
diff --git a/docs/content/NavList.mdx b/docs/content/NavList.mdx
index 364fd555758..b4a08fa6635 100644
--- a/docs/content/NavList.mdx
+++ b/docs/content/NavList.mdx
@@ -10,7 +10,7 @@ storybook: '/react/storybook/?path=/story/components-navlist--simple'
import data from '../../src/NavList/NavList.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
```js
import {NavList} from '@primer/react'
diff --git a/docs/content/Overlay.mdx b/docs/content/Overlay.mdx
index 05a4124100d..c26208e62c5 100644
--- a/docs/content/Overlay.mdx
+++ b/docs/content/Overlay.mdx
@@ -10,7 +10,7 @@ storybook: '/react/storybook?path=/story/private-components-overlay--dropdown-ov
import data from '../../src/Overlay/Overlay.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
```js
import {Overlay} from '@primer/react'
diff --git a/docs/content/PageLayout.mdx b/docs/content/PageLayout.mdx
index cd3e4909c63..90933a779d0 100644
--- a/docs/content/PageLayout.mdx
+++ b/docs/content/PageLayout.mdx
@@ -11,7 +11,7 @@ a11yReviewed: true
import data from '../../src/PageLayout/PageLayout.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
```js
import {PageLayout} from '@primer/react'
diff --git a/docs/content/Pagehead.md b/docs/content/Pagehead.md
index 422cb7eb89a..5493d53f168 100644
--- a/docs/content/Pagehead.md
+++ b/docs/content/Pagehead.md
@@ -9,7 +9,7 @@ status: Alpha
import data from '../../src/Pagehead/Pagehead.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
```js
import {Pagehead} from '@primer/react'
diff --git a/docs/content/Pagination.md b/docs/content/Pagination.md
index c92b3936764..f10d9f4fb83 100644
--- a/docs/content/Pagination.md
+++ b/docs/content/Pagination.md
@@ -12,7 +12,7 @@ import data from '../../src/Pagination/Pagination.docs.json'
import State from '../components/State'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
```js
import {Pagination} from '@primer/react'
diff --git a/docs/content/PointerBox.mdx b/docs/content/PointerBox.mdx
index c834b422936..a25d0d0ebf7 100644
--- a/docs/content/PointerBox.mdx
+++ b/docs/content/PointerBox.mdx
@@ -9,7 +9,7 @@ source: https://github.com/primer/react/blob/main/src/PointerBox
import data from '../../src/PointerBox/PointerBox.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
## Examples
diff --git a/docs/content/Popover.md b/docs/content/Popover.md
index 827fac62dee..b5f4d622110 100644
--- a/docs/content/Popover.md
+++ b/docs/content/Popover.md
@@ -9,7 +9,7 @@ source: https://github.com/primer/react/blob/main/src/Popover
import data from '../../src/Popover/Popover.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
```js
import {Popover} from '@primer/react'
diff --git a/docs/content/ProgressBar.mdx b/docs/content/ProgressBar.mdx
index af1ba92caf9..d563b137f6e 100644
--- a/docs/content/ProgressBar.mdx
+++ b/docs/content/ProgressBar.mdx
@@ -8,7 +8,7 @@ source: https://github.com/primer/react/blob/main/src/ProgressBar
import data from '../../src/ProgressBar/ProgressBar.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
```js
import {ProgressBar} from '@primer/react'
diff --git a/docs/content/Radio.mdx b/docs/content/Radio.mdx
index a8cd818773f..095794fc792 100644
--- a/docs/content/Radio.mdx
+++ b/docs/content/Radio.mdx
@@ -10,7 +10,7 @@ storybook: '/react/storybook?path=/story/components-forms-radiogroup'
import data from '../../src/Radio/Radio.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
## Examples
diff --git a/docs/content/RadioGroup.mdx b/docs/content/RadioGroup.mdx
index b3ccf8a3f24..03e14e1c267 100644
--- a/docs/content/RadioGroup.mdx
+++ b/docs/content/RadioGroup.mdx
@@ -13,7 +13,7 @@ import {RadioGroup, Radio, Box} from '@primer/components'
import {CheckIcon, XIcon, AlertIcon} from '@primer/octicons-react'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
## Examples
diff --git a/docs/content/RelativeTime.mdx b/docs/content/RelativeTime.mdx
index 432c8ce56d0..d0ce4156286 100644
--- a/docs/content/RelativeTime.mdx
+++ b/docs/content/RelativeTime.mdx
@@ -8,7 +8,7 @@ source: https://github.com/primer/react/blob/main/src/RelativeTime
import data from '../../src/RelativeTime/RelativeTime.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
```js
import {RelativeTime} from '@primer/react'
diff --git a/docs/content/SegmentedControl.mdx b/docs/content/SegmentedControl.mdx
index 1015ef1e4e0..2b68e4fedaf 100644
--- a/docs/content/SegmentedControl.mdx
+++ b/docs/content/SegmentedControl.mdx
@@ -10,7 +10,7 @@ storybook: '/react/storybook/?path=/story/components-segmentedcontrol'
import data from '../../src/SegmentedControl/SegmentedControl.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
diff --git a/docs/content/Select.mdx b/docs/content/Select.mdx
index 972c204c960..e9af0a3d76b 100644
--- a/docs/content/Select.mdx
+++ b/docs/content/Select.mdx
@@ -13,7 +13,7 @@ import data from '../../src/Select/Select.docs.json'
import {Select, Text} from '@primer/react'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
## Examples
diff --git a/docs/content/SelectPanel.mdx b/docs/content/SelectPanel.mdx
index 6861ab13ef6..c7bdf3e7ab7 100644
--- a/docs/content/SelectPanel.mdx
+++ b/docs/content/SelectPanel.mdx
@@ -8,7 +8,7 @@ source: https://github.com/primer/react/blob/main/src/SelectPanel
import data from '../../src/SelectPanel/SelectPanel.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
A `SelectPanel` provides an anchor that will open an overlay with a list of selectable items, and a text input to filter the selectable items
diff --git a/docs/content/Spinner.mdx b/docs/content/Spinner.mdx
index faaecc2e53d..d128cfb2843 100644
--- a/docs/content/Spinner.mdx
+++ b/docs/content/Spinner.mdx
@@ -9,7 +9,7 @@ source: https://github.com/primer/react/blob/main/src/Spinner/Spinner.tsx
import data from '../../src/Spinner/Spinner.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
```jsx live
diff --git a/docs/content/SplitPageLayout.mdx b/docs/content/SplitPageLayout.mdx
index d9b500ae643..2f717c3fe0f 100644
--- a/docs/content/SplitPageLayout.mdx
+++ b/docs/content/SplitPageLayout.mdx
@@ -11,7 +11,7 @@ a11yReviewed: true
import data from '../../src/SplitPageLayout/SplitPageLayout.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
```js
import {SplitPageLayout} from '@primer/react'
diff --git a/docs/content/StateLabel.mdx b/docs/content/StateLabel.mdx
index c9ebc0e6172..46524e9222a 100644
--- a/docs/content/StateLabel.mdx
+++ b/docs/content/StateLabel.mdx
@@ -9,7 +9,7 @@ source: https://github.com/primer/react/tree/main/src/StateLabel
import data from '../../src/StateLabel/StateLabel.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
## Examples
diff --git a/docs/content/SubNav.mdx b/docs/content/SubNav.mdx
index 414736fd76f..9aa7fd15d38 100644
--- a/docs/content/SubNav.mdx
+++ b/docs/content/SubNav.mdx
@@ -8,7 +8,7 @@ source: https://github.com/primer/react/blob/main/src/SubNav
import data from '../../src/SubNav/SubNav.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
**Attention:** Make sure to properly label your `SubNav` with an `aria-label` to provide context about the type of navigation contained in `SubNav`.
diff --git a/docs/content/TabNav.mdx b/docs/content/TabNav.mdx
index 5d8b78a72a6..12d6df799d3 100644
--- a/docs/content/TabNav.mdx
+++ b/docs/content/TabNav.mdx
@@ -8,7 +8,7 @@ source: https://github.com/primer/react/blob/main/src/TabNav
import data from '../../src/TabNav/TabNav.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
**Attention:** Make sure to properly label your `TabNav` with an `aria-label` to provide context about the type of navigation contained in `TabNav`.
diff --git a/docs/content/Text.mdx b/docs/content/Text.mdx
index ce565b5e73c..b74665c8928 100644
--- a/docs/content/Text.mdx
+++ b/docs/content/Text.mdx
@@ -9,7 +9,7 @@ source: https://github.com/primer/react/blob/main/src/Text
import data from '../../src/Text/Text.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
The Text component is a wrapper component that will apply typography styles to the text inside.
diff --git a/docs/content/TextInput.mdx b/docs/content/TextInput.mdx
index 962c9dca719..adc99462668 100644
--- a/docs/content/TextInput.mdx
+++ b/docs/content/TextInput.mdx
@@ -9,7 +9,7 @@ storybook: '/react/storybook?path=/story/components-forms-textinput--default'
import data from '../../src/TextInput/TextInput.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
TextInput is a form component to add default styling to the native text input.
diff --git a/docs/content/Textarea.mdx b/docs/content/Textarea.mdx
index cbc0060791b..123227b5d3e 100644
--- a/docs/content/Textarea.mdx
+++ b/docs/content/Textarea.mdx
@@ -12,7 +12,7 @@ import data from '../../src/Textarea/Textarea.docs.json'
import {Textarea} from '@primer/react'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
diff --git a/docs/content/Timeline.mdx b/docs/content/Timeline.mdx
index 18ad0fff75d..d9f0ccb1ada 100644
--- a/docs/content/Timeline.mdx
+++ b/docs/content/Timeline.mdx
@@ -8,7 +8,7 @@ source: https://github.com/primer/react/blob/main/src/Timeline
import data from '../../src/Timeline/Timeline.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
The Timeline.Item component is used to display items on a vertical timeline, connected by Timeline.Badge elements.
diff --git a/docs/content/ToggleSwitch.mdx b/docs/content/ToggleSwitch.mdx
index ac870ed1f7f..965041bb6b4 100644
--- a/docs/content/ToggleSwitch.mdx
+++ b/docs/content/ToggleSwitch.mdx
@@ -10,7 +10,7 @@ storybook: '/react/storybook?path=/story/components-toggleswitch-examples--defau
import data from '../../src/ToggleSwitch/ToggleSwitch.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
## Examples
diff --git a/docs/content/Token.mdx b/docs/content/Token.mdx
index 1c1ef93f54b..37b61b60403 100644
--- a/docs/content/Token.mdx
+++ b/docs/content/Token.mdx
@@ -11,7 +11,7 @@ import data from '../../src/Token/Token.docs.json'
import {AvatarToken, IssueLabelToken, Token} from '@primer/react'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
The default `Token` can be used for most cases, but specialized token components are provided for specific use cases (see below for more info).
diff --git a/docs/content/Tooltip.mdx b/docs/content/Tooltip.mdx
index a0e47870e2a..1f8006a5da8 100644
--- a/docs/content/Tooltip.mdx
+++ b/docs/content/Tooltip.mdx
@@ -8,7 +8,7 @@ source: https://github.com/primer/react/blob/main/src/Tooltip/Tooltip.tsx
import data from '../../src/Tooltip/Tooltip.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
The Tooltip component adds a tooltip to add context to interactive elements on the page.
diff --git a/docs/content/TreeView.mdx b/docs/content/TreeView.mdx
index 3531a1957da..853017fea0c 100644
--- a/docs/content/TreeView.mdx
+++ b/docs/content/TreeView.mdx
@@ -11,7 +11,7 @@ storybook: '/react/storybook?path=/story/components-treeview'
import data from '../../src/TreeView/TreeView.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
```js
import {TreeView} from '@primer/react'
diff --git a/docs/content/Truncate.mdx b/docs/content/Truncate.mdx
index c69b20ed52a..379570ca5d1 100644
--- a/docs/content/Truncate.mdx
+++ b/docs/content/Truncate.mdx
@@ -8,7 +8,7 @@ source: https://github.com/primer/react/blob/main/src/Truncate
import data from '../../src/Truncate/Truncate.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
The Truncate component will shorten text with an ellipsis. Always add a `title` attribute to the truncated element so the full text remains accessible.
diff --git a/docs/content/UnderlineNav.mdx b/docs/content/UnderlineNav.mdx
index d2d87cc386b..55610bbe7db 100644
--- a/docs/content/UnderlineNav.mdx
+++ b/docs/content/UnderlineNav.mdx
@@ -11,7 +11,7 @@ storybook: '/react/storybook/?path=/story/components-underlinenav--playground'
import data from '../../src/UnderlineNav/UnderlineNav.docs.json'
import DeprecationBanner from '../components/DeprecationBanner'
-
+
```js
import {UnderlineNav} from '@primer/react'
diff --git a/docs/content/deprecated/ActionList.mdx b/docs/content/deprecated/ActionList.mdx
index cccbdbe6642..7521164bd0f 100644
--- a/docs/content/deprecated/ActionList.mdx
+++ b/docs/content/deprecated/ActionList.mdx
@@ -8,7 +8,7 @@ An `ActionList` is a list of items which can be activated or selected. `ActionLi
## Deprecation
-Use [new version of ActionList](/ActionList) with composable API, design updates and accessibility fixes.
+Use [new version of ActionList](/components/action-list/react/latest) with composable API, design updates and accessibility fixes.
### Before
diff --git a/docs/content/deprecated/ActionMenu.mdx b/docs/content/deprecated/ActionMenu.mdx
index 7f5821798d9..ce1c4f5f817 100644
--- a/docs/content/deprecated/ActionMenu.mdx
+++ b/docs/content/deprecated/ActionMenu.mdx
@@ -8,7 +8,7 @@ An `ActionMenu` is an ActionList-based component for creating a menu of actions
## Deprecation
-Use [new version of ActionMenu](/ActionMenu) with composable API, design updates and accessibility fixes.
+Use [new version of ActionMenu](/components/action-menu/react/latest) with composable API, design updates and accessibility fixes.
### Before
diff --git a/docs/content/deprecated/Buttons.mdx b/docs/content/deprecated/Buttons.mdx
index 3da951cec97..a7cf9a41e55 100644
--- a/docs/content/deprecated/Buttons.mdx
+++ b/docs/content/deprecated/Buttons.mdx
@@ -7,7 +7,7 @@ storybook: '/react/storybook?path=/story/components-button--default-button'
## Deprecation
-Use [Button](/Button) instead.
+Use [Button](/components/button/react/latest) instead.
`Button` is used for actions, like in forms, while `Link` is used for destinations, or moving from one page to another.
diff --git a/docs/content/deprecated/SideNav.md b/docs/content/deprecated/SideNav.md
index 96977974ac8..63472ef9a2b 100644
--- a/docs/content/deprecated/SideNav.md
+++ b/docs/content/deprecated/SideNav.md
@@ -8,7 +8,7 @@ The Side Nav is a vertical list of navigational links, typically used on the lef
## Deprecation
-Use [NavList](/NavList) instead.
+Use [NavList](/components/nav-list/react/latest) instead.
### Before
diff --git a/docs/content/deprecated/UnderlineNav.mdx b/docs/content/deprecated/UnderlineNav.mdx
index efecffd117f..4ca66550907 100644
--- a/docs/content/deprecated/UnderlineNav.mdx
+++ b/docs/content/deprecated/UnderlineNav.mdx
@@ -10,7 +10,7 @@ Use the UnderlineNav component to style navigation with a minimal underlined sel
## Deprecation
-Use [the new version of UnderlineNav](/UnderlineNav) with design and accessibility updates.
+Use [the new version of UnderlineNav](/components/react/underline-nav/latest) with design and accessibility updates.
**Attention:** Make sure to properly label your `UnderlineNav` with an `aria-label` to provide context about the type of navigation contained in `UnderlineNav`.