diff --git a/src/shared/components/EmptyListComponent/EmptyListComponent.tsx b/src/shared/components/EmptyListComponent/EmptyListComponent.tsx
index 76b26b28c7..8a75979c34 100644
--- a/src/shared/components/EmptyListComponent/EmptyListComponent.tsx
+++ b/src/shared/components/EmptyListComponent/EmptyListComponent.tsx
@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import { useTranslation } from 'react-i18next';
+import { ReactNode, useMemo } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
import { Button, IllustratedMessage, Title } from '@ui5/webcomponents-react';
import '@ui5/webcomponents-fiori/dist/illustrations/AllIllustrations';
import { ExternalLink } from 'shared/components/ExternalLink/ExternalLink';
@@ -8,7 +8,7 @@ import './EmptyListComponent.scss';
type EmptyListComponentProps = {
titleText: string;
- subtitleText: string;
+ subtitleText: string | ReactNode;
showButton?: boolean;
buttonText?: string;
url: string;
@@ -29,6 +29,19 @@ export const EmptyListComponent = ({
}: EmptyListComponentProps) => {
const { t } = useTranslation();
+ const subtitle = useMemo(() => {
+ if (!subtitleText) return '';
+ if (typeof subtitleText !== 'string') return subtitleText;
+
+ return (
+