diff --git a/openmetadata-ui/src/main/resources/ui/src/components/PageHeader/PageHeader.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/PageHeader/PageHeader.component.tsx
index f39696c2ff98..0b311b05322e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/PageHeader/PageHeader.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/PageHeader/PageHeader.component.tsx
@@ -11,8 +11,9 @@
* limitations under the License.
*/
-import { Typography } from 'antd';
+import { Badge, Typography } from 'antd';
import React from 'react';
+import { useTranslation } from 'react-i18next';
import './page-header.less';
import { HeaderProps } from './PageHeader.interface';
@@ -20,7 +21,10 @@ const PageHeader = ({
data: { header, subHeader },
titleProps,
subHeaderProps,
+ isBeta,
}: HeaderProps) => {
+ const { t } = useTranslation();
+
return (
{header}
+
+ {isBeta && (
+
+ )}
{
-
+
-
-
-
-
- {t('label.enable-roles-polices-in-search')}
-
-
-
-
-
-
-
+
+ {t('label.enable-roles-polices-in-search')}
+
+
-
-
+
+
+
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/app.less b/openmetadata-ui/src/main/resources/ui/src/styles/app.less
index 8fc1c0141785..7939f76e97d3 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/app.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/app.less
@@ -557,6 +557,20 @@ a[href].link-text-grey,
}
}
+// beta tag for page header
+.service-beta-page-header {
+ sup {
+ height: auto;
+ padding: 2px 6px;
+ border-radius: 30px;
+ margin-left: 2px;
+ font-size: 10px;
+ background: @primary-1;
+ border: 1px solid @primary-color;
+ color: @primary-color;
+ }
+}
+
/* Tabs */
.ant-tabs-top > .ant-tabs-nav::before {
border-color: @border-color;
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/spacing.less b/openmetadata-ui/src/main/resources/ui/src/styles/spacing.less
index 44684a130966..108a1cdef543 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/spacing.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/spacing.less
@@ -155,6 +155,9 @@
.m-l-lg {
margin-left: @margin-lg;
}
+.m-l-xlg {
+ margin-left: @margin-xlg;
+}
.m-l-auto {
margin-left: auto;
}