);
};
diff --git a/packages/ui/src/components/Header/HeaderMetadataStatus.module.css b/packages/ui/src/components/Header/HeaderMetadataStatus.module.css
new file mode 100644
index 0000000000..ec4a9c9fd7
--- /dev/null
+++ b/packages/ui/src/components/Header/HeaderMetadataStatus.module.css
@@ -0,0 +1,49 @@
+/*
+ * Copyright 2026 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@layer tokens, base, components, utilities;
+
+@layer components {
+ .single {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: var(--bui-space-2);
+ }
+
+ .dot {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ flex-shrink: 0;
+ }
+
+ .dot-danger {
+ background-color: var(--bui-fg-danger);
+ }
+
+ .dot-warning {
+ background-color: var(--bui-fg-warning);
+ }
+
+ .dot-success {
+ background-color: var(--bui-fg-success);
+ }
+
+ .dot-info {
+ background-color: var(--bui-fg-info);
+ }
+}
diff --git a/packages/ui/src/components/Header/HeaderMetadataStatus.tsx b/packages/ui/src/components/Header/HeaderMetadataStatus.tsx
new file mode 100644
index 0000000000..75c9ea778f
--- /dev/null
+++ b/packages/ui/src/components/Header/HeaderMetadataStatus.tsx
@@ -0,0 +1,47 @@
+/*
+ * Copyright 2026 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { HeaderMetadataStatusItem } from './types';
+import { Text } from '../Text';
+import { Link } from '../Link';
+import styles from './HeaderMetadataStatus.module.css';
+
+/**
+ * Displays a single status indicator as a coloured dot with a label inside a
+ * Header metadata value. Optionally renders the label as a link when href is provided.
+ *
+ * @public
+ */
+export const HeaderMetadataStatus = ({
+ label,
+ color,
+ href,
+}: HeaderMetadataStatusItem) => {
+ return (
+
+ );
+};
diff --git a/packages/ui/src/components/Header/HeaderMetadataUsers.module.css b/packages/ui/src/components/Header/HeaderMetadataUsers.module.css
index 8f4c3edc84..745e768d56 100644
--- a/packages/ui/src/components/Header/HeaderMetadataUsers.module.css
+++ b/packages/ui/src/components/Header/HeaderMetadataUsers.module.css
@@ -30,4 +30,9 @@
align-items: center;
gap: var(--bui-space-1);
}
+
+ .avatarLink {
+ display: flex;
+ text-decoration: none;
+ }
}
diff --git a/packages/ui/src/components/Header/HeaderMetadataUsers.tsx b/packages/ui/src/components/Header/HeaderMetadataUsers.tsx
index 8bb972eb6b..3f68398ca5 100644
--- a/packages/ui/src/components/Header/HeaderMetadataUsers.tsx
+++ b/packages/ui/src/components/Header/HeaderMetadataUsers.tsx
@@ -18,6 +18,7 @@ import type { HeaderMetadataUser } from './types';
import { Avatar } from '../Avatar';
import { Tooltip, TooltipTrigger } from '../Tooltip';
import { Text } from '../Text';
+import { Link } from '../Link';
import { Pressable } from 'react-aria';
import styles from './HeaderMetadataUsers.module.css';
@@ -25,6 +26,7 @@ import styles from './HeaderMetadataUsers.module.css';
* Displays a list of users as avatars inside a Header metadata value.
* A single user shows the avatar with their name beside it.
* Multiple users show overlapping avatars with the name revealed on hover via tooltip.
+ * When a user has an `href`, the avatar and name become links.
*
* @public
*/
@@ -37,15 +39,34 @@ export const HeaderMetadataUsers = ({
if (users.length === 1) {
const user = users[0];
+ const avatar = (
+
+ );
return (