diff --git a/packages/module/src/ContentHeader/ContentHeader.tsx b/packages/module/src/ContentHeader/ContentHeader.tsx index ab4cf3d3..57689558 100644 --- a/packages/module/src/ContentHeader/ContentHeader.tsx +++ b/packages/module/src/ContentHeader/ContentHeader.tsx @@ -24,9 +24,9 @@ export interface PageHeaderLinkProps extends ButtonProps { export interface ContentHeaderProps extends React.PropsWithChildren { /** Title for content header */ - title: string; + title: React.ReactNode; /** Optional subtitle for content header */ - subtitle?: string; + subtitle?: React.ReactNode; /** Optional link below subtitle */ linkProps?: PageHeaderLinkProps; /** Optional icon for content header (appears to the left of the content header's title with a divider) */ @@ -51,7 +51,7 @@ const useStyles = createUseStyles({ export const ContentHeader: React.FunctionComponent> = ({ title, - subtitle, + subtitle = null, linkProps, icon, label, @@ -64,7 +64,7 @@ export const ContentHeader: React.FunctionComponent - { breadcrumbs && ( + {breadcrumbs && (
{breadcrumbs}
@@ -84,9 +84,11 @@ export const ContentHeader: React.FunctionComponent - - {title} - + {typeof title === 'string' ? ( + + {title} + + ) : title} {label && ( @@ -102,13 +104,21 @@ export const ContentHeader: React.FunctionComponent - {subtitle && ( + {typeof subtitle === 'string' ? ( {subtitle} - )} + ) : subtitle} {linkProps && ( - )} @@ -117,6 +127,7 @@ export const ContentHeader: React.FunctionComponent {children} - )}; + ); +}; export default ContentHeader;