+ {tags && tags.length > 0 && (
+
+ {tags.map((tag, i) => (
+
+ {i > 0 && }
+ {tag.href ? (
+
+ {tag.label}
+
+ ) : (
+
+ {tag.label}
+
+ )}
+
+ ))}
+
+ )}
{breadcrumbs &&
@@ -61,6 +89,36 @@ export const Header = (props: HeaderProps) => {
{customActions}
+ {description && (
+ (
+
+ {children}
+
+ ),
+ a: ({ href, children }) => (
+
+ {children}
+
+ ),
+ }}
+ >
+ {description}
+
+ )}
+ {metadata && metadata.length > 0 && (
+
+ {metadata.map(item => (
+
+ {item.label}: {item.value}
+
+ ))}
+
+ )}
{tabs && (
diff --git a/packages/ui/src/components/Header/definition.ts b/packages/ui/src/components/Header/definition.ts
index 2876770339..29e813974b 100644
--- a/packages/ui/src/components/Header/definition.ts
+++ b/packages/ui/src/components/Header/definition.ts
@@ -30,6 +30,10 @@ export const HeaderDefinition = defineComponent()({
breadcrumbs: 'bui-HeaderBreadcrumbs',
tabsWrapper: 'bui-HeaderTabsWrapper',
controls: 'bui-HeaderControls',
+ tags: 'bui-HeaderTags',
+ tagDivider: 'bui-HeaderTagDivider',
+ description: 'bui-HeaderDescription',
+ metaRow: 'bui-HeaderMetaRow',
},
propDefs: {
title: {},
@@ -37,6 +41,9 @@ export const HeaderDefinition = defineComponent()({
tabs: {},
activeTabId: {},
breadcrumbs: {},
+ description: {},
+ tags: {},
+ metadata: {},
className: {},
},
});
diff --git a/packages/ui/src/components/Header/types.ts b/packages/ui/src/components/Header/types.ts
index 1d4acc45ea..b2c687fcf5 100644
--- a/packages/ui/src/components/Header/types.ts
+++ b/packages/ui/src/components/Header/types.ts
@@ -52,6 +52,26 @@ export interface HeaderNavTabGroup {
*/
export type HeaderNavTabItem = HeaderNavTab | HeaderNavTabGroup;
+/**
+ * Represents a tag item in the header.
+ *
+ * @public
+ */
+export interface HeaderTag {
+ label: string;
+ href?: string;
+}
+
+/**
+ * Represents a metadata key-value pair in the header.
+ *
+ * @public
+ */
+export interface HeaderMetadataItem {
+ label: string;
+ value: React.ReactNode;
+}
+
/**
* Own props for the Header component.
*
@@ -62,7 +82,17 @@ export interface HeaderOwnProps {
customActions?: React.ReactNode;
tabs?: HeaderNavTabItem[];
activeTabId?: string | null;
+ /**
+ * @deprecated The breadcrumbs prop will be removed in a future release.
+ */
breadcrumbs?: HeaderBreadcrumb[];
+ /**
+ * Markdown string rendered below the title. Only inline elements are
+ * supported (links, bold, italic). Block-level markdown is not rendered.
+ */
+ description?: string;
+ tags?: HeaderTag[];
+ metadata?: HeaderMetadataItem[];
className?: string;
}