diff --git a/.changeset/legal-pigs-tan.md b/.changeset/legal-pigs-tan.md
new file mode 100644
index 000000000000..36781344fc61
--- /dev/null
+++ b/.changeset/legal-pigs-tan.md
@@ -0,0 +1,19 @@
+---
+'@braid-design-system/docs-ui': minor
+---
+
+**TitleLink:** Added new component for rendering linkable headings with an optional copy-to-clipboard interaction. Should be wrapped in your required typographic component.
+
+**EXAMPLE:**
+```jsx
+<Heading level="2">
+  <TitleLink>Getting started</TitleLink>
+</Heading>
+```
+
+With copy-to-clipboard:
+```jsx
+<CategoryHeading component="h3">
+  <TitleLink copyable>Appearance</TitleLink>
+</CategoryHeading>
+```
diff --git a/.changeset/red-drinks-float.md b/.changeset/red-drinks-float.md
new file mode 100644
index 000000000000..5f34abb35b96
--- /dev/null
+++ b/.changeset/red-drinks-float.md
@@ -0,0 +1,16 @@
+---
+'braid-design-system': minor
+---
+
+---
+updated:
+  - vars
+---
+
+**vars:** Exposed `vars.transition`. Transition CSS variables are available in stylesheets and runtime styles.
+
+**EXAMPLE USAGE:**
+```ts
+export const myStyle = style({
+  transition: vars.transition.fast,
+});
\ No newline at end of file
diff --git a/.changeset/slick-ways-exist.md b/.changeset/slick-ways-exist.md
new file mode 100644
index 000000000000..501a59346918
--- /dev/null
+++ b/.changeset/slick-ways-exist.md
@@ -0,0 +1,10 @@
+---
+'@braid-design-system/docs-ui': minor
+---
+
+**CategoryHeading:** Added new component for rendering category-style navigation headings.
+
+**EXAMPLE USAGE:**
+```jsx
+<CategoryHeading component="h2">Layout</CategoryHeading>
+```
diff --git a/.changeset/some-states-battle.md b/.changeset/some-states-battle.md
new file mode 100644
index 000000000000..b14ee671b423
--- /dev/null
+++ b/.changeset/some-states-battle.md
@@ -0,0 +1,28 @@
+---
+'braid-design-system': minor
+---
+
+---
+updated:
+  - Badge
+---
+
+**Badge:** Added aria-hidden and aria-label props.
+
+`aria-hidden` allows a badge to be hidden from assistive technology
+
+`aria-label` allows visible badge text to be overridden with a more descriptive label for screen readers
+
+
+**EXAMPLE USAGE:**
+```jsx
+  <Badge aria-hidden>
+    Deprecated
+  </Badge>
+```
+
+```jsx
+  <Badge aria-label="You have 2 notifications">
+    2
+  </Badge>
+```
\ No newline at end of file
diff --git a/packages/braid-design-system/src/css.ts b/packages/braid-design-system/src/css.ts
index 8f966ee7e1da..e508e272af34 100644
--- a/packages/braid-design-system/src/css.ts
+++ b/packages/braid-design-system/src/css.ts
@@ -24,6 +24,7 @@ const {
   borderRadius,
   borderWidth,
   shadow,
+  transition,
 } = internalVars;
 
 const vars = {
@@ -38,6 +39,7 @@ const vars = {
   borderRadius,
   borderWidth,
   shadow,
+  transition,
 };
 
 function atoms(props: Omit<Atoms, 'background'>) {
diff --git a/packages/braid-design-system/src/lib/components/Badge/Badge.tsx b/packages/braid-design-system/src/lib/components/Badge/Badge.tsx
index 241d8727e40f..8ce41cfb71aa 100644
--- a/packages/braid-design-system/src/lib/components/Badge/Badge.tsx
+++ b/packages/braid-design-system/src/lib/components/Badge/Badge.tsx
@@ -39,6 +39,8 @@ export interface BadgeProps {
   data?: DataAttributeMap;
   tabIndex?: BoxProps['tabIndex'];
   'aria-describedby'?: string;
+  'aria-hidden'?: boolean;
+  'aria-label'?: string;
 }
 
 const lightModeBackgroundForTone = {
@@ -74,6 +76,8 @@ export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
       data,
       tabIndex,
       'aria-describedby': ariaDescribedBy,
+      'aria-hidden': ariaHidden,
+      'aria-label': ariaLabel,
       ...restProps
     },
     ref,
@@ -112,6 +116,8 @@ export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
             ref={ref}
             tabIndex={tabIndex}
             aria-describedby={ariaDescribedBy}
+            aria-hidden={ariaHidden}
+            aria-label={ariaLabel}
             title={
               title ??
               (!ariaDescribedBy ? stringifyChildren(children) : undefined)
diff --git a/packages/braid-design-system/src/lib/css/vars.docs.tsx b/packages/braid-design-system/src/lib/css/vars.docs.tsx
index 878193339d75..d7b395b0ac1a 100644
--- a/packages/braid-design-system/src/lib/css/vars.docs.tsx
+++ b/packages/braid-design-system/src/lib/css/vars.docs.tsx
@@ -32,7 +32,7 @@ const Row = ({
   hideCanvas?: boolean;
   darkCanvas?: boolean;
 }) => (
-  <Columns space="large" alignY="center">
+  <Columns space="large" alignY="center" collapseBelow="tablet">
     <Column>
       <Text>
         <Hidden below="tablet">vars{group ? `.${group}` : null}.</Hidden>
@@ -49,16 +49,22 @@ const Row = ({
   </Columns>
 );
 
-const ContentWidthValue = ({ var: varName }: { var: string }) => {
-  const [size, setSize] = useState(0);
+const CssVarValue = ({
+  var: varName,
+  property,
+}: {
+  var: string;
+  property: 'width' | 'transition';
+}) => {
+  const [value, setValue] = useState('');
   const { themeKey } = useThemeSettings();
   const ref = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
     if (ref.current && themeKey) {
-      setSize(ref.current.offsetWidth);
+      setValue(getComputedStyle(ref.current)[property]);
     }
-  }, [themeKey]);
+  }, [themeKey, property]);
 
   return (
     <>
@@ -68,9 +74,9 @@ const ContentWidthValue = ({ var: varName }: { var: string }) => {
         pointerEvents="none"
         opacity={0}
         ref={ref}
-        style={{ width: varName }}
+        style={{ [property]: varName } as any}
       />
-      {size > 0 ? `${size}px` : '&nbsp;'}
+      {value || '\u00a0'}
     </>
   );
 };
@@ -106,7 +112,7 @@ const varDocs: Record<keyof typeof vars, ReactNodeNoStrings> = {
           {index > 0 ? <Divider /> : null}
           <Row key={widthName} group="contentWidth" name={widthName} hideCanvas>
             <Text>
-              <ContentWidthValue var={widthVar} />
+              <CssVarValue var={widthVar} property="width" />
             </Text>
           </Row>
         </Fragment>
@@ -283,6 +289,27 @@ const varDocs: Record<keyof typeof vars, ReactNodeNoStrings> = {
       ))}
     </Stack>
   ),
+  transition: (
+    <Stack space="large">
+      {Object.entries(vars.transition).map(
+        ([transitionName, transitionVar], index) => (
+          <Fragment key={transitionName}>
+            {index > 0 ? <Divider /> : null}
+            <Row
+              key={transitionName}
+              group="transition"
+              name={transitionName}
+              hideCanvas
+            >
+              <Text>
+                <CssVarValue var={transitionVar} property="transition" />
+              </Text>
+            </Row>
+          </Fragment>
+        ),
+      )}
+    </Stack>
+  ),
 } as const;
 
 const docs: CssDoc = {
diff --git a/packages/docs-ui/src/components/CategoryHeading/CategoryHeading.tsx b/packages/docs-ui/src/components/CategoryHeading/CategoryHeading.tsx
new file mode 100644
index 000000000000..147637248ae7
--- /dev/null
+++ b/packages/docs-ui/src/components/CategoryHeading/CategoryHeading.tsx
@@ -0,0 +1,16 @@
+import { Box, Text } from 'braid-design-system';
+import type { ComponentProps, ReactNode } from 'react';
+
+type CategoryHeadingProps = {
+  children: ReactNode;
+  component?: ComponentProps<typeof Text>['component'];
+};
+
+export const CategoryHeading = ({
+  children,
+  component,
+}: CategoryHeadingProps) => (
+  <Text size="xsmall" weight="medium" component={component}>
+    <Box style={{ textTransform: 'uppercase' }}>{children}</Box>
+  </Text>
+);
diff --git a/packages/docs-ui/src/components/SideNavigation/SideNavigationSection.tsx b/packages/docs-ui/src/components/SideNavigation/SideNavigationSection.tsx
index ca10bb399488..dac282a04423 100644
--- a/packages/docs-ui/src/components/SideNavigation/SideNavigationSection.tsx
+++ b/packages/docs-ui/src/components/SideNavigation/SideNavigationSection.tsx
@@ -1,4 +1,6 @@
-import { Box, HiddenVisually, Stack, Text } from 'braid-design-system';
+import { Box, HiddenVisually, Stack } from 'braid-design-system';
+
+import { CategoryHeading } from '../CategoryHeading/CategoryHeading';
 
 import { SideNavigationItem } from './SideNavigationItem';
 
@@ -11,9 +13,7 @@ interface SideNavigationSection {
 }
 
 const Title = ({ children }: { children: string }) => (
-  <Text size="xsmall" weight="medium" component="h2">
-    {children}
-  </Text>
+  <CategoryHeading component="h2">{children}</CategoryHeading>
 );
 
 const ItemList = ({ items }: { items: SideNavigationItem[] }) => (
diff --git a/packages/docs-ui/src/components/TitleLink/TitleLink.css.ts b/packages/docs-ui/src/components/TitleLink/TitleLink.css.ts
new file mode 100644
index 000000000000..dc68b097e96e
--- /dev/null
+++ b/packages/docs-ui/src/components/TitleLink/TitleLink.css.ts
@@ -0,0 +1,29 @@
+import { style } from '@vanilla-extract/css';
+import { atoms, vars } from 'braid-design-system/css';
+
+export const titleLink = style([
+  atoms({
+    display: 'flex',
+    borderRadius: 'small',
+    gap: 'xsmall',
+    alignItems: 'center',
+  }),
+  {
+    maxWidth: 'fit-content',
+    scrollMarginBlockStart: vars.space.small,
+    outlineOffset: vars.space.xsmall,
+  },
+]);
+
+export const isCopying = style({});
+
+export const showIcon = style({
+  selectors: {
+    [`${titleLink}:hover &, ${titleLink}:focus-visible &, ${isCopying}&`]: {
+      opacity: 1,
+    },
+    [`${titleLink}:hover &`]: {
+      transition: vars.transition.fast,
+    },
+  },
+});
diff --git a/packages/docs-ui/src/components/TitleLink/TitleLink.tsx b/packages/docs-ui/src/components/TitleLink/TitleLink.tsx
new file mode 100644
index 000000000000..0f535fd8f5b0
--- /dev/null
+++ b/packages/docs-ui/src/components/TitleLink/TitleLink.tsx
@@ -0,0 +1,97 @@
+import {
+  Box,
+  IconLink,
+  Link,
+  TooltipRenderer,
+  Text,
+  IconPositive,
+} from 'braid-design-system';
+import type { MouseEventHandler, ReactNode, RefCallback } from 'react';
+
+import { useCopy } from '../../utils/useCopy';
+
+import * as styles from './TitleLink.css';
+
+const slugify = (string: string) =>
+  string
+    .replace(/[\s?]/g, '-')
+    .replace('--', '-')
+    .replace(/-$/, '')
+    .toLowerCase();
+
+type TriggerProps = {
+  ref: RefCallback<HTMLElement>;
+  tabIndex: 0;
+  'aria-describedby': string;
+};
+
+const TitleLinkAnchor = ({
+  slug,
+  onClick,
+  children,
+  triggerProps,
+  copying,
+}: {
+  slug: string;
+  onClick?: MouseEventHandler<HTMLAnchorElement>;
+  children: ReactNode;
+  triggerProps?: TriggerProps;
+  copying?: boolean;
+}) => (
+  <Box component="span" id={slug} tabIndex={-1}>
+    <Link
+      href={`#${slug}`}
+      className={styles.titleLink}
+      onClick={onClick}
+      {...triggerProps}
+    >
+      {children}
+      <Box
+        component="span"
+        opacity={0}
+        className={[styles.showIcon, copying && styles.isCopying]}
+      >
+        {copying ? <IconPositive tone="positive" /> : <IconLink />}
+      </Box>
+    </Link>
+  </Box>
+);
+
+type TitleLink = { copyable?: boolean } & (
+  | { children: string }
+  | { children: ReactNode; label: string }
+);
+
+export const TitleLink = ({ copyable = false, ...restProps }: TitleLink) => {
+  const label = 'label' in restProps ? restProps.label : restProps.children;
+  const slug = slugify(label);
+  const { copying, onCopyClick } = useCopy();
+
+  const handleClick: MouseEventHandler<HTMLAnchorElement> = (event) => {
+    if (event.metaKey) {
+      return;
+    }
+    event.preventDefault();
+    const anchor = event.currentTarget as HTMLAnchorElement;
+    onCopyClick(anchor.href);
+  };
+
+  if (!copyable) {
+    return <TitleLinkAnchor slug={slug}>{restProps.children}</TitleLinkAnchor>;
+  }
+
+  return (
+    <TooltipRenderer placement="right" tooltip={<Text>Copy to clipboard</Text>}>
+      {({ triggerProps }) => (
+        <TitleLinkAnchor
+          slug={slug}
+          onClick={handleClick}
+          triggerProps={triggerProps}
+          copying={copying}
+        >
+          {restProps.children}
+        </TitleLinkAnchor>
+      )}
+    </TooltipRenderer>
+  );
+};
diff --git a/packages/docs-ui/src/index.ts b/packages/docs-ui/src/index.ts
index 4b13a6b97cc1..9a7bcda64168 100644
--- a/packages/docs-ui/src/index.ts
+++ b/packages/docs-ui/src/index.ts
@@ -6,3 +6,5 @@ export {
   KeyboardShortcut,
   KeyboardIcon,
 } from './components/KeyboardShortcut/KeyboardShortcut';
+export { TitleLink } from './components/TitleLink/TitleLink';
+export { CategoryHeading } from './components/CategoryHeading/CategoryHeading';
diff --git a/packages/docs-ui/src/utils/useCopy.ts b/packages/docs-ui/src/utils/useCopy.ts
new file mode 100644
index 000000000000..572a105963a9
--- /dev/null
+++ b/packages/docs-ui/src/utils/useCopy.ts
@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react';
+
+export const useCopy = () => {
+  const [copying, setCopying] = useState(false);
+
+  useEffect(() => {
+    if (copying) {
+      const timer = setTimeout(() => {
+        setCopying(false);
+      }, 2000);
+      return () => clearTimeout(timer);
+    }
+  }, [copying]);
+
+  const onCopyClick = async (content: string) => {
+    if (!copying) {
+      setCopying(true);
+      await navigator.clipboard.writeText(content);
+    }
+  };
+
+  return {
+    copying,
+    onCopyClick,
+  };
+};
diff --git a/packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap b/packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap
index f1bd60932e8f..6ebc96d2ccf4 100644
--- a/packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap
+++ b/packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap
@@ -160,6 +160,8 @@ exports[`Badge 1`] = `
   exportType: component,
   props: {
     aria-describedby?: string
+    aria-hidden?: boolean
+    aria-label?: string
     bleedY?: boolean
     children: 
         | (string | number)[]
diff --git a/site/src/App/CategoryHeading/CategoryHeading.tsx b/site/src/App/CategoryHeading/CategoryHeading.tsx
deleted file mode 100644
index 683337d85904..000000000000
--- a/site/src/App/CategoryHeading/CategoryHeading.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Box, Text } from 'braid-design-system';
-import type { ComponentProps } from 'react';
-
-export const CategoryHeading = ({
-  children,
-  component,
-}: {
-  children: React.ReactNode;
-  component?: ComponentProps<typeof Text>['component'];
-}) => (
-  <Box style={{ textTransform: 'uppercase' }}>
-    <Text size="xsmall" weight="medium" component={component}>
-      {children}
-    </Text>
-  </Box>
-);
diff --git a/site/src/App/DocNavigation/DocDetails.tsx b/site/src/App/DocNavigation/DocDetails.tsx
index 19ffb03c7a83..e7f9077a1a80 100644
--- a/site/src/App/DocNavigation/DocDetails.tsx
+++ b/site/src/App/DocNavigation/DocDetails.tsx
@@ -1,4 +1,4 @@
-import { LinkableHeading } from '@braid-design-system/docs-ui';
+import { CategoryHeading, TitleLink } from '@braid-design-system/docs-ui';
 import {
   Box,
   Stack,
@@ -6,6 +6,7 @@ import {
   TextLink,
   Secondary,
   Text,
+  Heading,
 } from 'braid-src/lib/components';
 import { PlayroomStateProvider } from 'braid-src/lib/playroom/playroomState';
 import { useContext, useMemo } from 'react';
@@ -196,7 +197,9 @@ export const DocDetails = () => {
 
               {'accessibility' in docs && docs.accessibility ? (
                 <Stack space={headingSpacing}>
-                  <LinkableHeading level="3">Accessibility</LinkableHeading>
+                  <Heading level="3">
+                    <TitleLink>Accessibility</TitleLink>
+                  </Heading>
                   {docs.accessibility}
                 </Stack>
               ) : null}
@@ -206,46 +209,55 @@ export const DocDetails = () => {
                   .filter(([, docSectionChildren]) =>
                     docSectionChildren.some(hasContent),
                   )
-                  .map(([sectionKey, docSectionChildren]) => (
-                    <Stack key={sectionKey} space="medium">
-                      <LinkableHeading level="2" label={sectionKey}>
-                        {getSectionHeading(sectionKey)}
-                      </LinkableHeading>
-                      <Stack space={innerSectionSpacing}>
-                        {docSectionChildren.map(
-                          (example: { label?: string }, index: number) => (
-                            <DocSection
-                              key={index}
-                              section={example}
-                              headingSpacing={headingSpacing}
-                            />
-                          ),
-                        )}
-                        {sectionKey === 'bestPractices' &&
-                        'alternatives' in docs &&
-                        docs.alternatives.length > 0 ? (
-                          <Stack space={headingSpacing}>
-                            <LinkableHeading level="3">
-                              Alternatives
-                            </LinkableHeading>
-                            <List space="medium">
-                              {docs.alternatives.map((alt) => (
-                                <Text key={`${alt.name}`}>
-                                  <TextLink
-                                    hitArea="large"
-                                    href={`/${alt.section || 'components'}/${alt.name}`}
-                                  >
-                                    {alt.name}
-                                  </TextLink>{' '}
-                                  <Secondary>— {alt.description}</Secondary>
-                                </Text>
-                              ))}
-                            </List>
-                          </Stack>
-                        ) : null}
+                  .map(([sectionKey, docSectionChildren]) => {
+                    const heading = getSectionHeading(sectionKey);
+                    return (
+                      <Stack key={sectionKey} space="medium">
+                        <CategoryHeading component="h2">
+                          <TitleLink copyable label={heading}>
+                            {heading}
+                          </TitleLink>
+                        </CategoryHeading>
+
+                        <Stack space={innerSectionSpacing}>
+                          {docSectionChildren.map(
+                            (example: { label?: string }, index: number) => (
+                              <DocSection
+                                key={index}
+                                section={example}
+                                headingSpacing={headingSpacing}
+                              />
+                            ),
+                          )}
+                          {sectionKey === 'bestPractices' &&
+                          'alternatives' in docs &&
+                          docs.alternatives.length > 0 ? (
+                            <Stack space={headingSpacing}>
+                              <Heading level="3">
+                                <TitleLink label="Alternatives">
+                                  Alternatives
+                                </TitleLink>
+                              </Heading>
+
+                              <List space="medium">
+                                {docs.alternatives.map((alt) => (
+                                  <Text key={`${alt.name}`}>
+                                    <TextLink
+                                      hitArea="large"
+                                      href={`/${alt.section || 'components'}/${alt.name}`}
+                                    >
+                                      {alt.name}
+                                    </TextLink>{' '}
+                                    <Secondary>— {alt.description}</Secondary>
+                                  </Text>
+                                ))}
+                              </List>
+                            </Stack>
+                          ) : null}
+                        </Stack>
                       </Stack>
-                    </Stack>
-                  ))}
+                    );
+                  })}
 
               {(docs.additional || []).map((example, index) => (
                 <DocSection
@@ -259,7 +271,9 @@ export const DocDetails = () => {
               !hasBestPractices &&
               docs.alternatives.length > 0 ? (
                 <Stack space={headingSpacing}>
-                  <LinkableHeading level="3">Alternatives</LinkableHeading>
+                  <Heading level="3">
+                    <TitleLink label="Alternatives">Alternatives</TitleLink>
+                  </Heading>
                   <List space="medium">
                     {docs.alternatives.map((alt) => (
                       <Text key={`${alt.name}`}>
diff --git a/site/src/App/DocNavigation/DocProps.tsx b/site/src/App/DocNavigation/DocProps.tsx
index 50ed19327994..7d4a4b1fc33d 100644
--- a/site/src/App/DocNavigation/DocProps.tsx
+++ b/site/src/App/DocNavigation/DocProps.tsx
@@ -1,4 +1,4 @@
-import { LinkableHeading } from '@braid-design-system/docs-ui';
+import { TitleLink } from '@braid-design-system/docs-ui';
 import type {
   NormalisedPropType,
   ExportDoc,
@@ -13,6 +13,7 @@ import {
   TooltipRenderer,
   TextLink,
   IconInfo,
+  Heading,
 } from 'braid-src/lib/components';
 import partition from 'lodash.partition';
 import { Fragment, useContext, useMemo } from 'react';
@@ -199,7 +200,10 @@ export const DocProps = () => {
         {Array.isArray(propsToDocument) ? (
           propsToDocument.map((c) => (
             <Stack space="large" key={c}>
-              <LinkableHeading level="3">{c}</LinkableHeading>
+              <Heading level="3">
+                <TitleLink>{c}</TitleLink>
+              </Heading>
+
               <ComponentProps componentName={c} />
             </Stack>
           ))
@@ -208,9 +212,9 @@ export const DocProps = () => {
         )}
 
         <Stack space="large">
-          <LinkableHeading level="3" component="h4">
-            Further References
-          </LinkableHeading>
+          <Heading level="3" component="h4">
+            <TitleLink>Further References</TitleLink>
+          </Heading>
           <Text>
             <TextLink href={sourceUrl}>View Source</TextLink>
           </Text>
diff --git a/site/src/App/DocNavigation/DocReleases.tsx b/site/src/App/DocNavigation/DocReleases.tsx
index 75d7559fa70e..19d0b9374986 100644
--- a/site/src/App/DocNavigation/DocReleases.tsx
+++ b/site/src/App/DocNavigation/DocReleases.tsx
@@ -1,4 +1,4 @@
-import { LinkableHeading } from '@braid-design-system/docs-ui';
+import { TitleLink } from '@braid-design-system/docs-ui';
 import {
   Box,
   Stack,
@@ -64,7 +64,10 @@ export const DocReleases = () => {
                 ) : null}
                 <Stack space="large">
                   <Spread space="small" alignY="center">
-                    <LinkableHeading level="3">{`v${version}`}</LinkableHeading>
+                    <Heading level="3">
+                      <TitleLink copyable>{`v${version}`}</TitleLink>
+                    </Heading>
+
                     {historyItem.time ? (
                       <Badge
                         bleedY
diff --git a/site/src/App/DocNavigation/DocSection.tsx b/site/src/App/DocNavigation/DocSection.tsx
index 085e2f43e68c..7d49da01328d 100644
--- a/site/src/App/DocNavigation/DocSection.tsx
+++ b/site/src/App/DocNavigation/DocSection.tsx
@@ -1,5 +1,11 @@
-import { LinkableHeading } from '@braid-design-system/docs-ui';
-import { Stack, Badge } from 'braid-src/lib/components';
+import { TitleLink } from '@braid-design-system/docs-ui';
+import {
+  Stack,
+  Badge,
+  Heading,
+  Bleed,
+  HiddenVisually,
+} from 'braid-src/lib/components';
 import type { ResponsiveSpace } from 'braid-src/lib/css/atoms/atoms';
 import { PlayroomStateProvider } from 'braid-src/lib/playroom/playroomState';
 
@@ -13,34 +19,42 @@ export const DocSection = ({
 }: {
   section: ComponentExample;
   headingSpacing?: ResponsiveSpace;
-}) => (
-  <Stack space={headingSpacing}>
-    {section.label ? (
-      <LinkableHeading
-        level="3"
-        badge={
-          section.deprecated ? (
-            <Badge tone="caution">Deprecated</Badge>
-          ) : undefined
-        }
-      >
-        {section.label}
-      </LinkableHeading>
-    ) : null}
-    {section.description ?? null}
-    {section.code || section.Example ? (
-      <PlayroomStateProvider>
-        <DocExample
-          code={section.code}
-          Example={section.Example}
-          Container={section.Container}
-          background={section.background}
-          showCodeByDefault={
-            section.showCodeByDefault || section.Example === undefined
-          }
-          playroom={section.playroom}
-        />
-      </PlayroomStateProvider>
-    ) : null}
-  </Stack>
-);
+}) => {
+  const { deprecated } = section;
+  return (
+    <Stack space="small">
+      {deprecated ? (
+        <Bleed left="xsmall">
+          <Badge tone="caution">Deprecated</Badge>
+        </Bleed>
+      ) : undefined}
+      <Stack space={headingSpacing}>
+        {section.label ? (
+          <Heading level="3">
+            <TitleLink label={section.label} copyable>
+              {section.label}
+              {deprecated ? (
+                <HiddenVisually>, deprecated</HiddenVisually>
+              ) : null}
+            </TitleLink>
+          </Heading>
+        ) : null}
+        {section.description ?? null}
+        {section.code || section.Example ? (
+          <PlayroomStateProvider>
+            <DocExample
+              code={section.code}
+              Example={section.Example}
+              Container={section.Container}
+              background={section.background}
+              showCodeByDefault={
+                section.showCodeByDefault || section.Example === undefined
+              }
+              playroom={section.playroom}
+            />
+          </PlayroomStateProvider>
+        ) : null}
+      </Stack>
+    </Stack>
+  );
+};
diff --git a/site/src/App/JumpToModal/SearchResults.tsx b/site/src/App/JumpToModal/SearchResults.tsx
index cbef4c05ea70..05fcbdf3eb61 100644
--- a/site/src/App/JumpToModal/SearchResults.tsx
+++ b/site/src/App/JumpToModal/SearchResults.tsx
@@ -1,4 +1,7 @@
-import { KeyboardShortcut } from '@braid-design-system/docs-ui';
+import {
+  KeyboardShortcut,
+  CategoryHeading,
+} from '@braid-design-system/docs-ui';
 import {
   Box,
   Stack,
@@ -8,8 +11,6 @@ import {
   Spread,
 } from 'braid-src/lib/components';
 
-import { CategoryHeading } from '../CategoryHeading/CategoryHeading';
-
 import type { GroupedResults, SearchItem } from './getSearchItems';
 
 interface SearchResultsProps {