diff --git a/.changeset/healthy-pens-boil.md b/.changeset/healthy-pens-boil.md
new file mode 100644
index 00000000000..a69698b45f8
--- /dev/null
+++ b/.changeset/healthy-pens-boil.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Add `data-component` attributes for Blankslate, BranchName, Breadcrumbs, ButtonGroup, Checkbox, CheckboxGroup, CircleBadge, ConfirmationDialog, CounterLabel, and Dialog to provide stable selectors.
diff --git a/packages/react/src/Blankslate/Blankslate.test.tsx b/packages/react/src/Blankslate/Blankslate.test.tsx
index c55859c1478..46e2824c9d5 100644
--- a/packages/react/src/Blankslate/Blankslate.test.tsx
+++ b/packages/react/src/Blankslate/Blankslate.test.tsx
@@ -23,6 +23,38 @@ describe('Blankslate', () => {
     expect(container.firstChild!.firstChild).toHaveAttribute('data-spacious', '')
   })
 
+  it('renders data-component attributes', () => {
+    const {container} = render(
+      <Blankslate>
+        <Blankslate.Visual>
+          <svg aria-hidden="true" data-testid="test-icon" />
+        </Blankslate.Visual>
+        <Blankslate.Heading>Test Heading</Blankslate.Heading>
+        <Blankslate.Description>Test description</Blankslate.Description>
+        <Blankslate.PrimaryAction>Primary action</Blankslate.PrimaryAction>
+        <Blankslate.SecondaryAction href="https://example.com">Secondary action</Blankslate.SecondaryAction>
+      </Blankslate>,
+    )
+
+    expect(container.querySelector('[data-component="Blankslate"]')).toBeInTheDocument()
+
+    expect(
+      container.querySelector('[data-component="Blankslate"] [data-component="Blankslate.Visual"]'),
+    ).toBeInTheDocument()
+    expect(
+      container.querySelector('[data-component="Blankslate"] [data-component="Blankslate.Heading"]'),
+    ).toBeInTheDocument()
+    expect(
+      container.querySelector('[data-component="Blankslate"] [data-component="Blankslate.Description"]'),
+    ).toBeInTheDocument()
+    expect(
+      container.querySelector('[data-component="Blankslate"] [data-component="Blankslate.PrimaryAction"]'),
+    ).toBeInTheDocument()
+    expect(
+      container.querySelector('[data-component="Blankslate"] [data-component="Blankslate.SecondaryAction"]'),
+    ).toBeInTheDocument()
+  })
+
   describe('Blankslate.Visual', () => {
     it('should render a visual element', () => {
       render(
diff --git a/packages/react/src/Blankslate/Blankslate.tsx b/packages/react/src/Blankslate/Blankslate.tsx
index d0c532089ea..fa785e9991b 100644
--- a/packages/react/src/Blankslate/Blankslate.tsx
+++ b/packages/react/src/Blankslate/Blankslate.tsx
@@ -45,6 +45,7 @@ function Blankslate({border, children, narrow, spacious, className, size = 'medi
       <div {...rest} className={classes.Container}>
         <div
           className={clsx(classes.Blankslate, className)}
+          data-component="Blankslate"
           data-border={border ? '' : undefined}
           data-narrow={narrow ? '' : undefined}
           data-spacious={spacious ? '' : undefined}
@@ -61,7 +62,7 @@ type BlankslateVisualProps = React.HTMLAttributes<HTMLElement>
 
 function Visual({children, className, ...rest}: BlankslateVisualProps) {
   return (
-    <span {...rest} className={clsx('Blankslate-Visual', classes.Visual, className)}>
+    <span {...rest} className={clsx('Blankslate-Visual', classes.Visual, className)} data-component="Blankslate.Visual">
       {children}
     </span>
   )
@@ -73,7 +74,11 @@ type BlankslateHeadingProps = React.HTMLAttributes<HTMLElement> & {
 
 function Heading({as: Component = 'h2', children, className, ...rest}: BlankslateHeadingProps) {
   return (
-    <Component {...rest} className={clsx('Blankslate-Heading', classes.Heading, className)}>
+    <Component
+      {...rest}
+      className={clsx('Blankslate-Heading', classes.Heading, className)}
+      data-component="Blankslate.Heading"
+    >
       {children}
     </Component>
   )
@@ -83,7 +88,11 @@ type BlankslateDescriptionProps = React.HTMLAttributes<HTMLElement>
 
 function Description({children, className, ...rest}: BlankslateDescriptionProps) {
   return (
-    <p {...rest} className={clsx('Blankslate-Description', classes.Description, className)}>
+    <p
+      {...rest}
+      className={clsx('Blankslate-Description', classes.Description, className)}
+      data-component="Blankslate.Description"
+    >
       {children}
     </p>
   )
@@ -101,7 +110,7 @@ type BlankslatePrimaryActionProps =
 function PrimaryAction({children, href, ...props}: BlankslatePrimaryActionProps) {
   const {size} = useBlankslate()
   return (
-    <div className={clsx('Blankslate-Action', classes.Action)}>
+    <div className={clsx('Blankslate-Action', classes.Action)} data-component="Blankslate.PrimaryAction">
       <Button
         {...props}
         as={href ? 'a' : 'button'}
@@ -121,7 +130,7 @@ type BlankslateSecondaryActionProps = React.PropsWithChildren<{
 
 function SecondaryAction({children, href}: BlankslateSecondaryActionProps) {
   return (
-    <div className={clsx('Blankslate-Action', classes.Action)}>
+    <div className={clsx('Blankslate-Action', classes.Action)} data-component="Blankslate.SecondaryAction">
       <Link href={href}>{children}</Link>
     </div>
   )
diff --git a/packages/react/src/BranchName/BranchName.tsx b/packages/react/src/BranchName/BranchName.tsx
index aeb7bf4ff20..d9ef8ef363b 100644
--- a/packages/react/src/BranchName/BranchName.tsx
+++ b/packages/react/src/BranchName/BranchName.tsx
@@ -16,7 +16,7 @@ export type BranchNameProps<As extends React.ElementType> = PolymorphicProps<
 function BranchName<As extends React.ElementType>(props: BranchNameProps<As>, ref: ForwardedRef<any>) {
   const {as: Component = 'a', className, children, ...rest} = props
   return (
-    <Component {...rest} ref={ref} className={clsx(className, classes.BranchName)}>
+    <Component {...rest} ref={ref} className={clsx(className, classes.BranchName)} data-component="BranchName">
       {children}
     </Component>
   )
diff --git a/packages/react/src/BranchName/__tests__/BranchName.test.tsx b/packages/react/src/BranchName/__tests__/BranchName.test.tsx
index 3b89ce3c2d2..77fad41a94a 100644
--- a/packages/react/src/BranchName/__tests__/BranchName.test.tsx
+++ b/packages/react/src/BranchName/__tests__/BranchName.test.tsx
@@ -6,8 +6,14 @@ import {implementsClassName} from '../../utils/testing'
 
 describe('BranchName', () => {
   implementsClassName(BranchName, classes.BranchName)
+
   it('renders an <a> by default', () => {
     const {container} = HTMLRender(<BranchName />)
     expect(container.firstChild?.nodeName).toEqual('A')
   })
+
+  it('renders data-component attribute', () => {
+    const {container} = HTMLRender(<BranchName />)
+    expect(container.querySelector('[data-component="BranchName"]')).toBeInTheDocument()
+  })
 })
diff --git a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
index 8d5ae785ba6..cd8749fd35a 100644
--- a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
@@ -101,7 +101,7 @@ const BreadcrumbsMenuItem = React.forwardRef<HTMLDetailsElement, BreadcrumbsMenu
     })
 
     return (
-      <Details ref={detailsRefCallback} className={classes.MenuDetails}>
+      <Details ref={detailsRefCallback} className={classes.MenuDetails} data-component="Breadcrumbs.MenuItem">
         <IconButton
           as="summary"
           role="button"
@@ -285,7 +285,11 @@ function Breadcrumbs({className, children, style, overflow = 'wrap', variant = '
 
   const finalChildren = React.useMemo(() => {
     if (overflow === 'wrap' || menuItems.length === 0) {
-      return React.Children.map(children, child => <li className={classes.ItemWrapper}>{child}</li>)
+      return React.Children.map(children, child => (
+        <li className={classes.ItemWrapper} data-component="Breadcrumbs.ItemWrapper">
+          {child}
+        </li>
+      ))
     }
 
     let effectiveMenuItems = [...menuItems]
@@ -335,6 +339,7 @@ function Breadcrumbs({className, children, style, overflow = 'wrap', variant = '
       ref={containerRef}
       data-overflow={overflow}
       data-variant={variant}
+      data-component="Breadcrumbs"
     >
       <BreadcrumbsList>{finalChildren}</BreadcrumbsList>
     </nav>
@@ -372,6 +377,7 @@ const BreadcrumbsItem = fixedForwardRef(
         className={clsx(className, classes.Item, selected && 'selected')}
         aria-current={selected ? 'page' : undefined}
         ref={ref}
+        data-component="Breadcrumbs.Item"
         {...rest}
       />
     )
diff --git a/packages/react/src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx b/packages/react/src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx
index a4cbe37aa14..f3af64cded9 100644
--- a/packages/react/src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx
+++ b/packages/react/src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx
@@ -29,11 +29,31 @@ globalThis.ResizeObserver = vi.fn().mockImplementation(function () {
 
 describe('Breadcrumbs', () => {
   implementsClassName(Breadcrumbs, classes.BreadcrumbsBase)
+
   it('renders a <nav>', () => {
     const {container} = HTMLRender(<Breadcrumbs />)
     expect(container.firstChild?.nodeName).toEqual('NAV')
   })
 
+  it('renders data-component attributes', () => {
+    const {container} = renderWithTheme(
+      <Breadcrumbs overflow="wrap">
+        <Breadcrumbs.Item href="/home">Home</Breadcrumbs.Item>
+        <Breadcrumbs.Item href="/docs">Docs</Breadcrumbs.Item>
+      </Breadcrumbs>,
+    )
+
+    expect(container.querySelector('[data-component="Breadcrumbs"]')).toBeInTheDocument()
+
+    expect(
+      container.querySelector('[data-component="Breadcrumbs"] [data-component="Breadcrumbs.Item"]'),
+    ).toBeInTheDocument()
+
+    expect(
+      container.querySelector('[data-component="Breadcrumbs"] [data-component="Breadcrumbs.ItemWrapper"]'),
+    ).toBeInTheDocument()
+  })
+
   it('renders breadcrumb items correctly', () => {
     HTMLRender(
       <Breadcrumbs>
diff --git a/packages/react/src/Breadcrumbs/__tests__/BreadcrumbsItem.test.tsx b/packages/react/src/Breadcrumbs/__tests__/BreadcrumbsItem.test.tsx
index 05ffb86477a..3d4099c25ae 100644
--- a/packages/react/src/Breadcrumbs/__tests__/BreadcrumbsItem.test.tsx
+++ b/packages/react/src/Breadcrumbs/__tests__/BreadcrumbsItem.test.tsx
@@ -6,11 +6,32 @@ import {implementsClassName} from '../../utils/testing'
 
 describe('Breadcrumbs.Item', () => {
   implementsClassName(Breadcrumbs.Item, classes.Item)
+
   it('renders an <a> by default', () => {
     const {container} = HTMLRender(<Breadcrumbs.Item />)
     expect(container.firstChild?.nodeName).toEqual('A')
   })
 
+  it('renders data-component attribute', () => {
+    const {container} = HTMLRender(<Breadcrumbs.Item />)
+    expect(container.querySelector('[data-component="Breadcrumbs.Item"]')).toBeInTheDocument()
+  })
+
+  it('renders Breadcrumbs.MenuItem data-component when overflow="menu"', () => {
+    const {container} = HTMLRender(
+      <Breadcrumbs overflow="menu">
+        <Breadcrumbs.Item href="#">1</Breadcrumbs.Item>
+        <Breadcrumbs.Item href="#">2</Breadcrumbs.Item>
+        <Breadcrumbs.Item href="#">3</Breadcrumbs.Item>
+        <Breadcrumbs.Item href="#">4</Breadcrumbs.Item>
+        <Breadcrumbs.Item href="#">5</Breadcrumbs.Item>
+        <Breadcrumbs.Item href="#">6</Breadcrumbs.Item>
+      </Breadcrumbs>,
+    )
+
+    expect(container.querySelector('[data-component="Breadcrumbs.MenuItem"]')).toBeInTheDocument()
+  })
+
   it('respects the "selected" prop', () => {
     const {container} = HTMLRender(<Breadcrumbs.Item selected />)
     expect(container.firstChild).toMatchSnapshot()
diff --git a/packages/react/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap b/packages/react/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap
index 532e0315ca2..90f7ab710cb 100644
--- a/packages/react/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap
+++ b/packages/react/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap
@@ -4,5 +4,6 @@ exports[`Breadcrumbs.Item > respects the "selected" prop 1`] = `
 <a
   aria-current="page"
   class="prc-Breadcrumbs-Item-V05wG selected"
+  data-component="Breadcrumbs.Item"
 />
 `;
diff --git a/packages/react/src/ButtonGroup/ButtonGroup.test.tsx b/packages/react/src/ButtonGroup/ButtonGroup.test.tsx
index c53cdf1b5f1..fb8fc7e0039 100644
--- a/packages/react/src/ButtonGroup/ButtonGroup.test.tsx
+++ b/packages/react/src/ButtonGroup/ButtonGroup.test.tsx
@@ -12,6 +12,11 @@ describe('ButtonGroup', () => {
     expect(container.getByTestId('button-group').tagName).toBe('DIV')
   })
 
+  it('renders data-component attribute', () => {
+    const {container} = render(<ButtonGroup />)
+    expect(container.querySelector('[data-component="ButtonGroup"]')).toBeInTheDocument()
+  })
+
   it('should respect role prop', () => {
     render(<ButtonGroup role="toolbar" />)
     expect(screen.getByRole('toolbar')).toBeInTheDocument()
diff --git a/packages/react/src/ButtonGroup/ButtonGroup.tsx b/packages/react/src/ButtonGroup/ButtonGroup.tsx
index eff345f616b..1bf04bb3278 100644
--- a/packages/react/src/ButtonGroup/ButtonGroup.tsx
+++ b/packages/react/src/ButtonGroup/ButtonGroup.tsx
@@ -27,8 +27,14 @@ const ButtonGroup = React.forwardRef(function ButtonGroup(
   })
 
   return (
-    //@ts-expect-error it needs a non nullable ref
-    <BaseComponent ref={buttonRef} className={clsx(className, classes.ButtonGroup)} role={role} {...rest}>
+    <BaseComponent
+      //@ts-expect-error it needs a non nullable ref
+      ref={buttonRef}
+      className={clsx(className, classes.ButtonGroup)}
+      role={role}
+      {...rest}
+      data-component="ButtonGroup"
+    >
       {buttons}
     </BaseComponent>
   )
diff --git a/packages/react/src/Checkbox/Checkbox.test.tsx b/packages/react/src/Checkbox/Checkbox.test.tsx
index 253baa55b83..1ab500ffdbd 100644
--- a/packages/react/src/Checkbox/Checkbox.test.tsx
+++ b/packages/react/src/Checkbox/Checkbox.test.tsx
@@ -20,6 +20,11 @@ describe('Checkbox', () => {
     expect(checkbox).toBeDefined()
   })
 
+  it('renders data-component attribute', () => {
+    const {getByRole} = render(<Checkbox />)
+    expect(getByRole('checkbox')).toHaveAttribute('data-component', 'Checkbox')
+  })
+
   it('renders an unchecked checkbox by default', () => {
     const {getByRole} = render(<Checkbox />)
 
diff --git a/packages/react/src/Checkbox/Checkbox.tsx b/packages/react/src/Checkbox/Checkbox.tsx
index 365d037990f..6e54d07cfdd 100644
--- a/packages/react/src/Checkbox/Checkbox.tsx
+++ b/packages/react/src/Checkbox/Checkbox.tsx
@@ -34,6 +34,7 @@ export type CheckboxProps = {
    * Used during form submission and to identify which checkbox inputs are selected
    */
   value?: string
+  'data-component'?: string
 } & Exclude<InputHTMLAttributes<HTMLInputElement>, 'value'>
 
 /**
@@ -41,7 +42,19 @@ export type CheckboxProps = {
  */
 const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
   (
-    {checked, className, defaultChecked, indeterminate, disabled, onChange, required, validationStatus, value, ...rest},
+    {
+      checked,
+      className,
+      defaultChecked,
+      indeterminate,
+      disabled,
+      onChange,
+      required,
+      validationStatus,
+      value,
+      ['data-component']: dataComponent,
+      ...rest
+    },
     ref,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ): ReactElement<any> => {
@@ -89,8 +102,14 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
         checkbox.setAttribute('aria-checked', checkbox.checked ? 'true' : 'false')
       }
     })
-    // @ts-expect-error inputProp needs a non nullable ref
-    return <input {...inputProps} className={clsx(className, sharedClasses.Input, classes.Checkbox)} />
+    return (
+      // @ts-expect-error inputProp needs a non nullable ref
+      <input
+        {...inputProps}
+        data-component={dataComponent ?? 'Checkbox'}
+        className={clsx(className, sharedClasses.Input, classes.Checkbox)}
+      />
+    )
   },
 )
 
diff --git a/packages/react/src/CheckboxGroup/CheckboxGroup.test.tsx b/packages/react/src/CheckboxGroup/CheckboxGroup.test.tsx
index eba8cea6ca8..f752ae2d5c9 100644
--- a/packages/react/src/CheckboxGroup/CheckboxGroup.test.tsx
+++ b/packages/react/src/CheckboxGroup/CheckboxGroup.test.tsx
@@ -19,6 +19,39 @@ describe('CheckboxGroup', () => {
     vi.restoreAllMocks()
   })
 
+  it('renders data-component attribute', () => {
+    const {getByRole} = render(
+      <CheckboxGroup>
+        <CheckboxGroup.Label>Choices</CheckboxGroup.Label>
+        <FormControl>
+          <Checkbox value="one" />
+          <FormControl.Label>Choice one</FormControl.Label>
+        </FormControl>
+      </CheckboxGroup>,
+    )
+
+    expect(getByRole('group')).toHaveAttribute('data-component', 'CheckboxGroup')
+  })
+
+  it('renders data-component attributes for subcomponents', () => {
+    const {container} = render(
+      <CheckboxGroup>
+        <CheckboxGroup.Label>Choices</CheckboxGroup.Label>
+        <CheckboxGroup.Caption>Help text</CheckboxGroup.Caption>
+        <CheckboxGroup.Validation variant="error">Error text</CheckboxGroup.Validation>
+
+        <FormControl>
+          <Checkbox value="one" />
+          <FormControl.Label>Choice one</FormControl.Label>
+        </FormControl>
+      </CheckboxGroup>,
+    )
+
+    expect(container.querySelector('[data-component="CheckboxGroup.Label"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="CheckboxGroup.Caption"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="CheckboxGroup.Validation"]')).toBeInTheDocument()
+  })
+
   it('renders a disabled group of inputs', () => {
     const {getAllByRole, getByRole} = render(
       <CheckboxGroup disabled>
diff --git a/packages/react/src/CheckboxGroup/CheckboxGroup.tsx b/packages/react/src/CheckboxGroup/CheckboxGroup.tsx
index fd064c7973c..267228e8d7c 100644
--- a/packages/react/src/CheckboxGroup/CheckboxGroup.tsx
+++ b/packages/react/src/CheckboxGroup/CheckboxGroup.tsx
@@ -66,7 +66,7 @@ const CheckboxGroup: FCWithSlotMarker<React.PropsWithChildren<CheckboxGroupProps
         },
       }}
     >
-      <CheckboxOrRadioGroup disabled={disabled} {...rest}>
+      <CheckboxOrRadioGroup parentName="CheckboxGroup" disabled={disabled} {...rest}>
         {children}
       </CheckboxOrRadioGroup>
     </CheckboxGroupContext.Provider>
diff --git a/packages/react/src/CircleBadge/CircleBadge.test.tsx b/packages/react/src/CircleBadge/CircleBadge.test.tsx
index 23cee0ca0a9..32284a3d06d 100644
--- a/packages/react/src/CircleBadge/CircleBadge.test.tsx
+++ b/packages/react/src/CircleBadge/CircleBadge.test.tsx
@@ -9,6 +9,12 @@ const imgInput = <img alt="Example" src="primer.jpg" />
 
 describe('CircleBadge', () => {
   implementsClassName(CircleBadge, classes.CircleBadge)
+
+  it('renders data-component attribute', () => {
+    const {container} = HTMLRender(<CircleBadge />)
+    expect(container.querySelector('[data-component="CircleBadge"]')).toBeInTheDocument()
+  })
+
   it('respects the inline prop', () => {
     const {container} = HTMLRender(<CircleBadge inline />)
     expect(container.firstChild).toMatchSnapshot()
@@ -47,5 +53,10 @@ describe('CircleBadge', () => {
       const {container} = HTMLRender(<CircleBadge.Icon icon={CheckIcon} />)
       expect(container.firstChild).toBeInTheDocument()
     })
+
+    it('renders data-component attribute', () => {
+      const {container} = HTMLRender(<CircleBadge.Icon icon={CheckIcon} />)
+      expect(container.querySelector('[data-component="CircleBadge.Icon"]')).toBeInTheDocument()
+    })
   })
 })
diff --git a/packages/react/src/CircleBadge/CircleBadge.tsx b/packages/react/src/CircleBadge/CircleBadge.tsx
index 0d106c78d50..1015f4c007f 100644
--- a/packages/react/src/CircleBadge/CircleBadge.tsx
+++ b/packages/react/src/CircleBadge/CircleBadge.tsx
@@ -31,13 +31,16 @@ const sizeStyles = ({size, variant = 'medium'}: CircleBadgeProps<React.ElementTy
 const CircleBadge = <As extends React.ElementType>({as: Component = 'div', ...props}: CircleBadgeProps<As>) => (
   <Component
     {...props}
+    data-component="CircleBadge"
     className={clsx(styles.CircleBadge, props.className)}
     data-inline={props.inline ? '' : undefined}
     style={sizeStyles(props)}
   />
 )
 
-const CircleBadgeIcon = (props: OcticonProps) => <Octicon className={styles.CircleBadgeIcon} {...props} />
+const CircleBadgeIcon = (props: OcticonProps) => (
+  <Octicon {...props} data-component="CircleBadge.Icon" className={clsx(styles.CircleBadgeIcon, props.className)} />
+)
 
 CircleBadgeIcon.displayName = 'CircleBadge.Icon'
 
diff --git a/packages/react/src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap b/packages/react/src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap
index a8175b56391..62e8a2d029d 100644
--- a/packages/react/src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap
+++ b/packages/react/src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`CircleBadge > respects the inline prop 1`] = `
 <div
   class="prc-CircleBadge-CircleBadge-LZ7wp"
+  data-component="CircleBadge"
   data-inline=""
   style="width: 96px; height: 96px;"
 />
@@ -11,6 +12,7 @@ exports[`CircleBadge > respects the inline prop 1`] = `
 exports[`CircleBadge > respects the variant prop 1`] = `
 <div
   class="prc-CircleBadge-CircleBadge-LZ7wp"
+  data-component="CircleBadge"
   style="width: 128px; height: 128px;"
   variant="large"
 />
@@ -19,6 +21,7 @@ exports[`CircleBadge > respects the variant prop 1`] = `
 exports[`CircleBadge > uses the size prop to override the variant prop 1`] = `
 <div
   class="prc-CircleBadge-CircleBadge-LZ7wp"
+  data-component="CircleBadge"
   size="20"
   style="width: 20px; height: 20px;"
   variant="large"
diff --git a/packages/react/src/ConfirmationDialog/ConfirmationDialog.test.tsx b/packages/react/src/ConfirmationDialog/ConfirmationDialog.test.tsx
index 42ad61a00cb..eeb91d7e9fd 100644
--- a/packages/react/src/ConfirmationDialog/ConfirmationDialog.test.tsx
+++ b/packages/react/src/ConfirmationDialog/ConfirmationDialog.test.tsx
@@ -118,6 +118,18 @@ const LoadingStates = ({
 }
 
 describe('ConfirmationDialog', () => {
+  it('renders data-component attribute', () => {
+    const {getByRole} = render(
+      <BaseStyles>
+        <ConfirmationDialog title="Confirm" onClose={() => {}}>
+          Test content
+        </ConfirmationDialog>
+      </BaseStyles>,
+    )
+
+    expect(getByRole('alertdialog')).toHaveAttribute('data-component', 'ConfirmationDialog')
+  })
+
   it('focuses the primary action when opened and the confirmButtonType is not set', async () => {
     const {getByText, getByRole} = render(<Basic />)
     fireEvent.click(getByText('Show dialog'))
diff --git a/packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx b/packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx
index 33e9bd966f4..c13fe632cad 100644
--- a/packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx
+++ b/packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx
@@ -124,6 +124,7 @@ export const ConfirmationDialog: React.FC<React.PropsWithChildren<ConfirmationDi
   const footerButtons = [cancelButton, confirmButton]
   return (
     <Dialog
+      data-component="ConfirmationDialog"
       onClose={onClose}
       title={title}
       footerButtons={footerButtons}
diff --git a/packages/react/src/CounterLabel/CounterLabel.test.tsx b/packages/react/src/CounterLabel/CounterLabel.test.tsx
index 3a17d97ad9b..bce22dd6ce6 100644
--- a/packages/react/src/CounterLabel/CounterLabel.test.tsx
+++ b/packages/react/src/CounterLabel/CounterLabel.test.tsx
@@ -12,6 +12,11 @@ describe('CounterLabel', () => {
     expect(container.firstChild?.nodeName).toEqual('SPAN')
   })
 
+  it('renders data-component attribute', () => {
+    const {container} = HTMLRender(<CounterLabel>1234</CounterLabel>)
+    expect(container.querySelector('[data-component="CounterLabel"]')).toBeInTheDocument()
+  })
+
   it('renders the counter correctly', () => {
     const {container} = HTMLRender(<CounterLabel>12K</CounterLabel>)
     expect(container.firstChild).toHaveTextContent('12K')
diff --git a/packages/react/src/CounterLabel/CounterLabel.tsx b/packages/react/src/CounterLabel/CounterLabel.tsx
index 36edb110401..73571731399 100644
--- a/packages/react/src/CounterLabel/CounterLabel.tsx
+++ b/packages/react/src/CounterLabel/CounterLabel.tsx
@@ -11,11 +11,12 @@ export type CounterLabelProps = React.PropsWithChildren<
     scheme?: 'primary' | 'secondary'
     variant?: 'primary' | 'secondary'
     className?: string
+    'data-component'?: string
   }
 >
 
 const CounterLabel = forwardRef<HTMLSpanElement, CounterLabelProps>(
-  ({variant, scheme, className, children, ...rest}, forwardedRef) => {
+  ({variant, scheme, className, children, ['data-component']: dataComponent, ...rest}, forwardedRef) => {
     const label = <VisuallyHidden>&nbsp;({children})</VisuallyHidden>
 
     const inferredVariant = variant || scheme || 'secondary'
@@ -29,7 +30,11 @@ const CounterLabel = forwardRef<HTMLSpanElement, CounterLabelProps>(
 
     return (
       <>
-        <span {...counterProps} className={clsx(className, classes.CounterLabel)}>
+        <span
+          {...counterProps}
+          data-component={dataComponent ?? 'CounterLabel'}
+          className={clsx(className, classes.CounterLabel)}
+        >
           {children}
         </span>
         {label}
diff --git a/packages/react/src/Dialog/Dialog.test.tsx b/packages/react/src/Dialog/Dialog.test.tsx
index 0f05e4fd0c2..1304ace3faa 100644
--- a/packages/react/src/Dialog/Dialog.test.tsx
+++ b/packages/react/src/Dialog/Dialog.test.tsx
@@ -52,6 +52,77 @@ describe('Dialog', () => {
     expect(getByRole('dialog')).not.toHaveAttribute('data-has-footer')
   })
 
+  it('renders data-component attribute', () => {
+    const {getByRole} = render(<Dialog onClose={() => {}}>Content</Dialog>)
+    expect(getByRole('dialog')).toHaveAttribute('data-component', 'Dialog')
+  })
+
+  it('allows overriding the root data-component attribute', () => {
+    const {getByRole} = render(
+      <Dialog data-component="ConfirmationDialog" onClose={() => {}}>
+        Content
+      </Dialog>,
+    )
+    expect(getByRole('dialog')).toHaveAttribute('data-component', 'ConfirmationDialog')
+  })
+
+  it('renders data-component hooks for Dialog subcomponents', () => {
+    const {getByRole} = render(
+      <Dialog
+        onClose={() => {}}
+        title="Title"
+        subtitle="Subtitle"
+        renderHeader={props => (
+          <Dialog.Header>
+            <Dialog.Title id={props.dialogLabelId}>{props.title}</Dialog.Title>
+            <Dialog.Subtitle id={props.dialogDescriptionId}>{props.subtitle}</Dialog.Subtitle>
+            <Dialog.CloseButton onClose={() => {}} />
+          </Dialog.Header>
+        )}
+        renderBody={() => <Dialog.Body>Body</Dialog.Body>}
+        renderFooter={() => <Dialog.Footer>Footer</Dialog.Footer>}
+      />,
+    )
+
+    const dialog = getByRole('dialog')
+
+    expect(dialog.querySelector('[data-component="Dialog.Header"]')).toBeInTheDocument()
+    expect(dialog.querySelector('[data-component="Dialog.Title"]')).toBeInTheDocument()
+    expect(dialog.querySelector('[data-component="Dialog.Subtitle"]')).toBeInTheDocument()
+    expect(dialog.querySelector('[data-component="Dialog.CloseButton"]')).toBeInTheDocument()
+    expect(dialog.querySelector('[data-component="Dialog.Body"]')).toBeInTheDocument()
+    expect(dialog.querySelector('[data-component="Dialog.Footer"]')).toBeInTheDocument()
+  })
+
+  it('adds a Dialog-scoped data-component hook for footer buttons (and not for body buttons)', () => {
+    const {getByRole, getByText} = render(
+      <Dialog
+        onClose={() => {}}
+        footerButtons={[
+          {buttonType: 'primary', content: 'Submit'},
+          {buttonType: 'default', content: 'Cancel'},
+        ]}
+      >
+        <Button>Body button</Button>
+      </Dialog>,
+    )
+
+    const dialog = getByRole('dialog')
+
+    // ensure footer buttons have the data-component hook
+    const footerButtonHooks = dialog.querySelectorAll('[data-component="Dialog.FooterButton"]')
+    expect(footerButtonHooks).toHaveLength(2)
+
+    // ensure we're targeting the correct buttons
+    expect(footerButtonHooks[0]).toHaveTextContent('Submit')
+    expect(footerButtonHooks[1]).toHaveTextContent('Cancel')
+
+    // ensure we're not targeting other buttons
+    const bodyButton = getByText('Body button').closest('button')
+    expect(bodyButton).toBeTruthy()
+    expect(bodyButton?.closest('[data-component="Dialog.FooterButton"]')).toBeNull()
+  })
+
   it('calls `onClose` when clicking the close button', async () => {
     const user = userEvent.setup()
     const onClose = vi.fn()
diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx
index 449b9659292..6d955260f21 100644
--- a/packages/react/src/Dialog/Dialog.tsx
+++ b/packages/react/src/Dialog/Dialog.tsx
@@ -59,6 +59,7 @@ export type DialogButtonProps = Omit<ButtonProps, 'content'> & {
  * Props to customize the rendering of the Dialog.
  */
 export interface DialogProps {
+  'data-component'?: string
   /**
    * Title of the Dialog. Also serves as the aria-label for this Dialog.
    */
@@ -256,6 +257,7 @@ const DIALOG_CONTEXT_VALUE = Object.freeze({})
 
 const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogProps>>((props, forwardedRef) => {
   const {
+    'data-component': dataComponentProp,
     title = 'Dialog',
     subtitle = '',
     renderHeader,
@@ -376,6 +378,7 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
           }),
         )
 
+  const dataComponent = dataComponentProp ?? 'Dialog'
   return (
     <DialogContext.Provider value={DIALOG_CONTEXT_VALUE}>
       <Portal>
@@ -403,6 +406,7 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
             data-footer-button-layout={hasFooter ? footerButtonLayout : undefined}
             className={clsx(className, classes.Dialog)}
             style={style}
+            data-component={dataComponent}
           >
             {header}
             <ScrollableRegion aria-labelledby={dialogLabelId} className={classes.DialogOverflowWrapper}>
@@ -420,14 +424,14 @@ _Dialog.displayName = 'Dialog'
 type StyledHeaderProps = React.ComponentProps<'div'>
 
 const Header = React.forwardRef<HTMLDivElement, StyledHeaderProps>(function Header({className, ...rest}, forwardRef) {
-  return <div ref={forwardRef} className={clsx(className, classes.Header)} {...rest} />
+  return <div ref={forwardRef} className={clsx(className, classes.Header)} {...rest} data-component="Dialog.Header" />
 }) as PolymorphicForwardRefComponent<'div', StyledHeaderProps>
 Header.displayName = 'Dialog.Header'
 
 type StyledTitleProps = React.ComponentProps<'h1'>
 
 const Title = React.forwardRef<HTMLHeadingElement, StyledTitleProps>(function Title({className, ...rest}, forwardRef) {
-  return <h1 ref={forwardRef} className={clsx(className, classes.Title)} {...rest} />
+  return <h1 ref={forwardRef} className={clsx(className, classes.Title)} {...rest} data-component="Dialog.Title" />
 })
 Title.displayName = 'Dialog.Title'
 
@@ -437,14 +441,16 @@ const Subtitle = React.forwardRef<HTMLHeadingElement, StyledSubtitleProps>(funct
   {className, ...rest},
   forwardRef,
 ) {
-  return <h2 ref={forwardRef} className={clsx(className, classes.Subtitle)} {...rest} />
+  return (
+    <h2 ref={forwardRef} className={clsx(className, classes.Subtitle)} {...rest} data-component="Dialog.Subtitle" />
+  )
 })
 Subtitle.displayName = 'Dialog.Subtitle'
 
 type StyledBodyProps = React.ComponentProps<'div'>
 
 const Body = React.forwardRef<HTMLDivElement, StyledBodyProps>(function Body({className, ...rest}, forwardRef) {
-  return <div ref={forwardRef} className={clsx(className, classes.Body)} {...rest} />
+  return <div ref={forwardRef} className={clsx(className, classes.Body)} {...rest} data-component="Dialog.Body" />
 }) as PolymorphicForwardRefComponent<'div', StyledBodyProps>
 
 Body.displayName = 'Dialog.Body'
@@ -452,7 +458,7 @@ Body.displayName = 'Dialog.Body'
 type StyledFooterProps = React.ComponentProps<'div'>
 
 const Footer = React.forwardRef<HTMLDivElement, StyledFooterProps>(function Footer({className, ...rest}, forwardRef) {
-  return <div ref={forwardRef} className={clsx(className, classes.Footer)} {...rest} />
+  return <div ref={forwardRef} className={clsx(className, classes.Footer)} {...rest} data-component="Dialog.Footer" />
 }) as PolymorphicForwardRefComponent<'div', StyledFooterProps>
 Footer.displayName = 'Dialog.Footer'
 
@@ -477,6 +483,7 @@ const Buttons: React.FC<React.PropsWithChildren<{buttons: DialogButtonProps[]}>>
         return (
           <Button
             key={index}
+            data-component="Dialog.FooterButton"
             {...buttonProps}
             // 'normal' value is equivalent to 'default', this is used for backwards compatibility
             variant={buttonType === 'normal' ? 'default' : buttonType}
@@ -492,7 +499,15 @@ const Buttons: React.FC<React.PropsWithChildren<{buttons: DialogButtonProps[]}>>
 }
 
 const CloseButton: React.FC<React.PropsWithChildren<{onClose: () => void}>> = ({onClose}) => {
-  return <IconButton icon={XIcon} aria-label="Close" onClick={onClose} variant="invisible" />
+  return (
+    <IconButton
+      icon={XIcon}
+      aria-label="Close"
+      onClick={onClose}
+      variant="invisible"
+      data-component="Dialog.CloseButton"
+    />
+  )
 }
 
 /**
diff --git a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx
index 81e9e67c228..00849c2c9ce 100644
--- a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx
+++ b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx
@@ -12,6 +12,8 @@ import {clsx} from 'clsx'
 import {isSlot} from '../../../utils/is-slot'
 
 export type CheckboxOrRadioGroupProps = {
+  /** Parent name for using data-component with either CheckboxGroup or RadioGroup and sub-components */
+  parentName?: string
   /** Class name for custom styling */
   className?: string
   /**
@@ -34,6 +36,7 @@ export type CheckboxOrRadioGroupProps = {
 }
 
 const CheckboxOrRadioGroup: React.FC<React.PropsWithChildren<CheckboxOrRadioGroupProps>> = ({
+  parentName,
   'aria-labelledby': ariaLabelledby,
   children,
   disabled = false,
@@ -86,10 +89,12 @@ const CheckboxOrRadioGroup: React.FC<React.PropsWithChildren<CheckboxOrRadioGrou
         required,
         captionId,
         validationMessageId,
+        parentName,
       }}
     >
       <div>
         <Component
+          data-component={parentName}
           className={clsx(className, classes.GroupFieldset)}
           data-validation={validationChild ? '' : undefined}
           {...(labelChild
diff --git a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.tsx b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.tsx
index 7cf54cd94ee..63316c58e3e 100644
--- a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.tsx
+++ b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.tsx
@@ -8,9 +8,13 @@ import type {FCWithSlotMarker} from '../../../utils/types'
 type CheckboxOrRadioGroupCaptionProps = React.PropsWithChildren<{className?: string}>
 
 const CheckboxOrRadioGroupCaption: FCWithSlotMarker<CheckboxOrRadioGroupCaptionProps> = ({className, children}) => {
-  const {captionId} = React.useContext(CheckboxOrRadioGroupContext)
+  const {captionId, parentName} = React.useContext(CheckboxOrRadioGroupContext)
   return (
-    <Text className={clsx(className, classes.CheckboxOrRadioGroupCaption)} id={captionId}>
+    <Text
+      className={clsx(className, classes.CheckboxOrRadioGroupCaption)}
+      id={captionId}
+      data-component={parentName && `${parentName}.Caption`}
+    >
       {children}
     </Text>
   )
diff --git a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupContext.tsx b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupContext.tsx
index 2ca8ae65eb8..1a8bfb34b23 100644
--- a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupContext.tsx
+++ b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupContext.tsx
@@ -4,6 +4,7 @@ import type {CheckboxOrRadioGroupProps} from './CheckboxOrRadioGroup'
 export type CheckboxOrRadioGroupContext = {
   validationMessageId?: string
   captionId?: string
+  parentName?: string
 } & CheckboxOrRadioGroupProps
 
 const CheckboxOrRadioGroupContext = React.createContext<CheckboxOrRadioGroupContext>({})
diff --git a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel.tsx b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel.tsx
index 9becd2987b7..bc3333f9d86 100644
--- a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel.tsx
+++ b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel.tsx
@@ -20,7 +20,7 @@ const CheckboxOrRadioGroupLabel: FCWithSlotMarker<React.PropsWithChildren<Checkb
   className,
   visuallyHidden = false,
 }) => {
-  const {required, disabled} = React.useContext(CheckboxOrRadioGroupContext)
+  const {required, disabled, parentName} = React.useContext(CheckboxOrRadioGroupContext)
 
   return (
     <VisuallyHidden
@@ -28,6 +28,7 @@ const CheckboxOrRadioGroupLabel: FCWithSlotMarker<React.PropsWithChildren<Checkb
       isVisible={!visuallyHidden}
       title={required ? 'required field' : undefined}
       data-label-disabled={disabled ? '' : undefined}
+      data-component={parentName && `${parentName}.Label`}
     >
       {required ? (
         <Stack direction="horizontal" gap="none">
diff --git a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.tsx b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.tsx
index a33a87b0b48..d9cc2b6eb35 100644
--- a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.tsx
+++ b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.tsx
@@ -12,9 +12,13 @@ export type CheckboxOrRadioGroupValidationProps = {
 const CheckboxOrRadioGroupValidation: FCWithSlotMarker<
   React.PropsWithChildren<CheckboxOrRadioGroupValidationProps>
 > = ({children, variant}) => {
-  const {validationMessageId = ''} = React.useContext(CheckboxOrRadioGroupContext)
+  const {validationMessageId = '', parentName} = React.useContext(CheckboxOrRadioGroupContext)
   return (
-    <InputValidation validationStatus={variant} id={validationMessageId}>
+    <InputValidation
+      validationStatus={variant}
+      id={validationMessageId}
+      data-component={parentName && `${parentName}.Validation`}
+    >
       {children}
     </InputValidation>
   )
diff --git a/packages/react/src/internal/components/InputValidation.tsx b/packages/react/src/internal/components/InputValidation.tsx
index e013cab6948..f0df156f6e7 100644
--- a/packages/react/src/internal/components/InputValidation.tsx
+++ b/packages/react/src/internal/components/InputValidation.tsx
@@ -6,7 +6,7 @@ import type {FormValidationStatus} from '../../utils/types/FormValidationStatus'
 import classes from './InputValidation.module.css'
 import {clsx} from 'clsx'
 
-type Props = {
+type Props = React.HTMLAttributes<HTMLElement> & {
   className?: string
   id: string
   validationStatus?: FormValidationStatus
@@ -27,6 +27,7 @@ const InputValidation: React.FC<React.PropsWithChildren<Props>> = ({
   id,
   validationStatus,
   style,
+  ...rest
 }) => {
   const IconComponent = validationStatus ? validationIconMap[validationStatus] : undefined
 
@@ -37,7 +38,12 @@ const InputValidation: React.FC<React.PropsWithChildren<Props>> = ({
   const iconBoxMinHeight = iconSize * captionLineHeight
 
   return (
-    <Text className={clsx(className, classes.InputValidation)} data-validation-status={validationStatus} style={style}>
+    <Text
+      {...rest}
+      className={clsx(className, classes.InputValidation)}
+      data-validation-status={validationStatus}
+      style={style}
+    >
       {IconComponent ? (
         <span
           aria-hidden="true"