diff --git a/packages/react/src/Avatar/Avatar.test.tsx b/packages/react/src/Avatar/Avatar.test.tsx
index 536c92f1710..ba816856822 100644
--- a/packages/react/src/Avatar/Avatar.test.tsx
+++ b/packages/react/src/Avatar/Avatar.test.tsx
@@ -7,6 +7,14 @@ import classes from './Avatar.module.css'
 describe('Avatar', () => {
   implementsClassName(Avatar, classes.Avatar)
 
+  describe('Avatar data-component attribute', () => {
+    it('renders Avatar with data-component attribute', () => {
+      render(<Avatar src="primer.png" alt="" data-testid="avatar" />)
+      const avatar = screen.getByTestId('avatar')
+      expect(avatar).toHaveAttribute('data-component', 'Avatar')
+    })
+  })
+
   it('renders small by default', () => {
     const size = 20
     render(<Avatar src="primer.png" data-testid="avatar" />)
diff --git a/packages/react/src/AvatarStack/AvatarStack.test.tsx b/packages/react/src/AvatarStack/AvatarStack.test.tsx
index 81bc50838e6..b8c46e426e1 100644
--- a/packages/react/src/AvatarStack/AvatarStack.test.tsx
+++ b/packages/react/src/AvatarStack/AvatarStack.test.tsx
@@ -25,9 +25,24 @@ const rightAvatarComp = (
 describe('AvatarStack', () => {
   implementsClassName(AvatarStack, classes.AvatarStack)
 
+  describe('AvatarStack data-component attributes', () => {
+    it('renders AvatarStack with data-component attribute', () => {
+      const {container} = render(avatarComp)
+      const root = container.querySelector('[data-component="AvatarStack"]')
+      expect(root).toBeInTheDocument()
+    })
+
+    it('renders AvatarStack.Body with data-component attribute', () => {
+      const {container} = render(avatarComp)
+      const body = container.querySelector('[data-component="AvatarStack.Body"]')
+      expect(body).toBeInTheDocument()
+    })
+  })
+
   it('respects alignRight props', () => {
     const {container} = render(rightAvatarComp)
-    expect(container.firstChild).toMatchSnapshot()
+    const root = container.querySelector('[data-component="AvatarStack"]')
+    expect(root).toHaveAttribute('data-align-right', '')
   })
 
   it('should have a tabindex of 0 if there are no interactive children', () => {
diff --git a/packages/react/src/AvatarStack/AvatarStack.tsx b/packages/react/src/AvatarStack/AvatarStack.tsx
index ae400a90876..f7df678552a 100644
--- a/packages/react/src/AvatarStack/AvatarStack.tsx
+++ b/packages/react/src/AvatarStack/AvatarStack.tsx
@@ -42,6 +42,7 @@ const AvatarStackBody = ({
 } & React.ComponentPropsWithoutRef<'div'>) => {
   return (
     <div
+      data-component="AvatarStack.Body"
       data-disable-expand={disableExpand ? '' : undefined}
       className={clsx(
         {
@@ -158,6 +159,7 @@ const AvatarStack = ({
 
   return (
     <span
+      data-component="AvatarStack"
       data-variant={variant}
       data-shape={shape}
       data-avatar-count={count > 3 ? '3+' : count}
diff --git a/packages/react/src/AvatarStack/__snapshots__/AvatarStack.test.tsx.snap b/packages/react/src/AvatarStack/__snapshots__/AvatarStack.test.tsx.snap
deleted file mode 100644
index 04f86ce225d..00000000000
--- a/packages/react/src/AvatarStack/__snapshots__/AvatarStack.test.tsx.snap
+++ /dev/null
@@ -1,40 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`AvatarStack > respects alignRight props 1`] = `
-<span
-  class="pc-AvatarStack--variant pc-AvatarStack--shape pc-AvatarStack--three-plus pc-AvatarStack--right prc-AvatarStack-AvatarStack-LcJ4R"
-  data-align-right=""
-  data-avatar-count="3+"
-  data-responsive=""
-  data-shape="circle"
-  data-variant="cascade"
-  style="--stackSize-narrow: 20px; --stackSize-regular: 20px; --stackSize-wide: 20px;"
->
-  <div
-    class="pc-AvatarStackBody prc-AvatarStack-AvatarStackBody-LVwsN"
-    tabindex="0"
-  >
-     
-    <img
-      alt=""
-      class="pc-AvatarItem prc-AvatarStack-AvatarItem-ZlFbL"
-      src="https://avatars.githubusercontent.com/primer"
-    />
-    <img
-      alt=""
-      class="pc-AvatarItem prc-AvatarStack-AvatarItem-ZlFbL"
-      src="https://avatars.githubusercontent.com/github"
-    />
-    <img
-      alt=""
-      class="pc-AvatarItem prc-AvatarStack-AvatarItem-ZlFbL"
-      src="https://avatars.githubusercontent.com/primer"
-    />
-    <img
-      alt=""
-      class="pc-AvatarItem prc-AvatarStack-AvatarItem-ZlFbL"
-      src="https://avatars.githubusercontent.com/github"
-    />
-  </div>
-</span>
-`;
diff --git a/packages/react/src/Banner/Banner.test.tsx b/packages/react/src/Banner/Banner.test.tsx
index b8d71883c63..73d771ad36a 100644
--- a/packages/react/src/Banner/Banner.test.tsx
+++ b/packages/react/src/Banner/Banner.test.tsx
@@ -14,6 +14,36 @@ describe('Banner', () => {
     expect(screen.getByRole('heading', {name: 'test'})).toBeInTheDocument()
   })
 
+  it('renders data-component attributes', () => {
+    const {container} = render(
+      <Banner
+        title="test"
+        description="test-description"
+        primaryAction={<Banner.PrimaryAction>test primary action</Banner.PrimaryAction>}
+        secondaryAction={<Banner.SecondaryAction>test secondary action</Banner.SecondaryAction>}
+        onDismiss={() => {}}
+      />,
+    )
+
+    expect(container.querySelector('[data-component="Banner"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="Banner.Icon"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="Banner.Content"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="Banner.Actions"]')).toBeInTheDocument()
+
+    expect(container.querySelector('[data-component="Banner.PrimaryAction"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="Banner.SecondaryAction"]')).toBeInTheDocument()
+
+    expect(container.querySelector('[data-component="Banner.Title"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-component="Banner.Description"]')).toBeInTheDocument()
+  })
+
+  it('renders Banner dismiss IconButton with data-component attribute', () => {
+    const {container} = render(<Banner title="test" onDismiss={() => {}} />)
+
+    const dismissButton = container.querySelector('[data-component="Banner"] [data-component="IconButton"]')
+    expect(dismissButton).toBeInTheDocument()
+  })
+
   it('should label the landmark element with the title by default', () => {
     render(<Banner title="My Banner Title" />)
     const region = screen.getByRole('region', {name: 'My Banner Title'})
diff --git a/packages/react/src/Banner/Banner.tsx b/packages/react/src/Banner/Banner.tsx
index 44db1cbd3fb..8837134b86d 100644
--- a/packages/react/src/Banner/Banner.tsx
+++ b/packages/react/src/Banner/Banner.tsx
@@ -157,6 +157,7 @@ export const Banner = React.forwardRef<HTMLElement, BannerProps>(function Banner
   return (
     <BannerContext.Provider value={{titleId}}>
       <section
+        data-component="Banner"
         {...rest}
         aria-labelledby={labelledBy ?? (label ? undefined : titleId)}
         aria-label={labelledBy ? undefined : label}
@@ -171,9 +172,11 @@ export const Banner = React.forwardRef<HTMLElement, BannerProps>(function Banner
         data-layout={rest.layout || 'default'}
         data-flush={flush ? '' : undefined}
       >
-        <div className={classes.BannerIcon}>{visual && supportsCustomIcon ? visual : iconForVariant[variant]}</div>
+        <div data-component="Banner.Icon" className={classes.BannerIcon}>
+          {visual && supportsCustomIcon ? visual : iconForVariant[variant]}
+        </div>
         <div className={classes.BannerContainer}>
-          <div className={classes.BannerContent}>
+          <div data-component="Banner.Content" className={classes.BannerContent}>
             {title ? (
               hideTitle ? (
                 <VisuallyHidden>
@@ -215,7 +218,13 @@ export function BannerTitle<As extends HeadingElement>(props: BannerTitleProps<A
   const titleId = id ?? context?.titleId
 
   return (
-    <Heading {...rest} id={titleId} className={clsx(className, classes.BannerTitle)} data-banner-title="">
+    <Heading
+      {...rest}
+      id={titleId}
+      className={clsx(className, classes.BannerTitle)}
+      data-component="Banner.Title"
+      data-banner-title=""
+    >
       {children}
     </Heading>
   )
@@ -225,7 +234,7 @@ export type BannerDescriptionProps = React.ComponentPropsWithoutRef<'div'>
 
 export function BannerDescription({children, className, ...rest}: BannerDescriptionProps) {
   return (
-    <div {...rest} className={clsx('BannerDescription', className)}>
+    <div {...rest} className={clsx('BannerDescription', className)} data-component="Banner.Description">
       {children}
     </div>
   )
@@ -238,7 +247,7 @@ export type BannerActionsProps = {
 
 export function BannerActions({primaryAction, secondaryAction}: BannerActionsProps) {
   return (
-    <div className={classes.BannerActions}>
+    <div className={classes.BannerActions} data-component="Banner.Actions">
       <div className={classes.BannerActionsContainer} data-primary-action="trailing">
         {secondaryAction ?? null}
         {primaryAction ?? null}
@@ -255,7 +264,13 @@ export type BannerPrimaryActionProps = Omit<ButtonProps, 'variant'>
 
 const BannerPrimaryAction = forwardRef(({children, className, ...rest}, forwardedRef) => {
   return (
-    <Button ref={forwardedRef} className={clsx('BannerPrimaryAction', className)} variant="default" {...rest}>
+    <Button
+      data-component="Banner.PrimaryAction"
+      ref={forwardedRef}
+      className={clsx('BannerPrimaryAction', className)}
+      variant="default"
+      {...rest}
+    >
       {children}
     </Button>
   )
@@ -267,7 +282,13 @@ export type BannerSecondaryActionProps = Omit<ButtonProps, 'variant'>
 
 const BannerSecondaryAction = forwardRef(({children, className, ...rest}, forwardedRef) => {
   return (
-    <Button ref={forwardedRef} className={clsx('BannerPrimaryAction', className)} variant="invisible" {...rest}>
+    <Button
+      data-component="Banner.SecondaryAction"
+      ref={forwardedRef}
+      className={clsx('BannerPrimaryAction', className)}
+      variant="invisible"
+      {...rest}
+    >
       {children}
     </Button>
   )
diff --git a/packages/react/src/BaseStyles.tsx b/packages/react/src/BaseStyles.tsx
index 4631ede237a..736c4938c62 100644
--- a/packages/react/src/BaseStyles.tsx
+++ b/packages/react/src/BaseStyles.tsx
@@ -21,6 +21,7 @@ function BaseStyles({children, color, className, as: Component = 'div', style, .
 
   return (
     <Component
+      data-component="BaseStyles"
       className={newClassName}
       data-portal-root
       style={{
diff --git a/packages/react/src/__tests__/BaseStyles.test.tsx b/packages/react/src/__tests__/BaseStyles.test.tsx
index 21d595cd475..e44240ed105 100644
--- a/packages/react/src/__tests__/BaseStyles.test.tsx
+++ b/packages/react/src/__tests__/BaseStyles.test.tsx
@@ -6,6 +6,12 @@ import {implementsClassName} from '../utils/testing'
 
 describe('BaseStyles', () => {
   implementsClassName(BaseStyles, classes.BaseStyles)
+
+  it('renders BaseStyles with data-component attribute', () => {
+    const {container} = render(<BaseStyles>Hello</BaseStyles>)
+    expect(container.firstElementChild).toHaveAttribute('data-component', 'BaseStyles')
+  })
+
   it('has default styles', () => {
     const {container} = render(<BaseStyles>Hello</BaseStyles>)
     expect(container).toMatchSnapshot()
diff --git a/packages/react/src/__tests__/__snapshots__/BaseStyles.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/BaseStyles.test.tsx.snap
index 4ba921e051b..ae6832d7938 100644
--- a/packages/react/src/__tests__/__snapshots__/BaseStyles.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/BaseStyles.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`BaseStyles > has default styles 1`] = `
 <div>
   <div
     class="prc-src-BaseStyles-9LBd2"
+    data-component="BaseStyles"
     data-portal-root="true"
   >
     Hello