Setup beta info component

ui/src/components/header/beta-info/beta-info.module.scss

@@ -0,0 +1,23 @@
+@import 'src/design-system/variables/variables.scss';
+@import 'src/design-system/variables/colors.scss';
+@import 'src/design-system/variables/typography.scss';
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+}
+
+.badge {
+  padding: 4px 16px;
+  border-radius: 4px;
+  background-color: $color-success-100;
+  color: $color-success-700;
+  @include label();
+}
+
+.version {
+  @include paragraph-x-small();
+  white-space: nowrap;
+}

ui/src/components/header/beta-info/beta-info.tsx

@@ -0,0 +1,19 @@
+import { Tooltip } from 'design-system/components/tooltip/tooltip'
+import styles from './beta-info.module.scss'
+
+const COPY = {
+  LABEL: 'Beta',
+  INFO: 'More info about beta status goes here?',
+  VERSION: import.meta.env.PACKAGE_VERSION, // Read version from package.json
+}
+
+export const BetaInfo = () => {
+  return (
+    <div className={styles.wrapper}>
+      <Tooltip content={COPY.INFO}>
+        <div className={styles.badge}>{COPY.LABEL}</div>
+      </Tooltip>
+      <span className={styles.version}>Version {COPY.VERSION}</span>
+    </div>
+  )
+}