From 350c9484536d31746c0c91a6f0098bc1e48f5d26 Mon Sep 17 00:00:00 2001
From: Johan Persson <johanopersson@gmail.com>
Date: Tue, 27 Jan 2026 10:46:39 +0100
Subject: [PATCH] fix(ui): forward HTML attributes on Box component

Extended BoxProps to include React.HTMLAttributes<HTMLDivElement>
and spread restProps onto the rendered element. This allows
standard HTML attributes like onClick, aria-*, data-*, etc. to
be passed through to the underlying div.

Signed-off-by: Johan Persson <johanopersson@gmail.com>
---
 .changeset/cute-parts-smash.md          | 7 +++++++
 packages/ui/report.api.md               | 6 +++++-
 packages/ui/src/components/Box/Box.tsx  | 3 ++-
 packages/ui/src/components/Box/types.ts | 6 +++++-
 4 files changed, 19 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/cute-parts-smash.md

diff --git a/.changeset/cute-parts-smash.md b/.changeset/cute-parts-smash.md
new file mode 100644
index 0000000000..166e0fc528
--- /dev/null
+++ b/.changeset/cute-parts-smash.md
@@ -0,0 +1,7 @@
+---
+'@backstage/ui': patch
+---
+
+Fixed Box component to forward HTML attributes to the underlying div element.
+
+**Affected components:** Box
diff --git a/packages/ui/report.api.md b/packages/ui/report.api.md
index 662b82a762..9a65455ee0 100644
--- a/packages/ui/report.api.md
+++ b/packages/ui/report.api.md
@@ -282,7 +282,11 @@ export type BoxOwnProps = {
 };
 
 // @public (undocumented)
-export interface BoxProps extends SpaceProps, BoxOwnProps, BoxUtilityProps {}
+export interface BoxProps
+  extends SpaceProps,
+    BoxOwnProps,
+    BoxUtilityProps,
+    React.HTMLAttributes<HTMLDivElement> {}
 
 // @public (undocumented)
 export type BoxUtilityProps = {
diff --git a/packages/ui/src/components/Box/Box.tsx b/packages/ui/src/components/Box/Box.tsx
index ed3262ea31..23ed5b9303 100644
--- a/packages/ui/src/components/Box/Box.tsx
+++ b/packages/ui/src/components/Box/Box.tsx
@@ -21,7 +21,7 @@ import { BoxDefinition } from './definition';
 
 /** @public */
 export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
-  const { ownProps, dataAttributes, utilityStyle } = useDefinition(
+  const { ownProps, restProps, dataAttributes, utilityStyle } = useDefinition(
     BoxDefinition,
     props,
   );
@@ -34,6 +34,7 @@ export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
       className: classes.root,
       style: { ...ownProps.style, ...utilityStyle },
       ...dataAttributes,
+      ...restProps,
     },
     surfaceChildren,
   );
diff --git a/packages/ui/src/components/Box/types.ts b/packages/ui/src/components/Box/types.ts
index e3f9e2cd04..09b45429c3 100644
--- a/packages/ui/src/components/Box/types.ts
+++ b/packages/ui/src/components/Box/types.ts
@@ -41,4 +41,8 @@ export type BoxUtilityProps = {
 };
 
 /** @public */
-export interface BoxProps extends SpaceProps, BoxOwnProps, BoxUtilityProps {}
+export interface BoxProps
+  extends SpaceProps,
+    BoxOwnProps,
+    BoxUtilityProps,
+    React.HTMLAttributes<HTMLDivElement> {}