diff --git a/packages/design-system/src/components/StatusBubble/Primitive/StatusBubblePrimitive.test.tsx b/packages/design-system/src/components/StatusBubble/Primitive/StatusBubblePrimitive.test.tsx
deleted file mode 100644
index 51b4870dca..0000000000
--- a/packages/design-system/src/components/StatusBubble/Primitive/StatusBubblePrimitive.test.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '@testing-library/react';
-
-import StatusBubble, { variants } from './StatusBubblePrimitive';
-
-describe('StatusBubble', (): void => {
-	it('Should render', (): void => {
-		render(<StatusBubble variant={variants.success} data-testid="my-status-bubble-component" />);
-
-		expect(screen.getByTestId('my-status-bubble-component')).toBeVisible();
-	});
-});
diff --git a/packages/design-system/src/components/StatusBubble/StatusBubble.tsx b/packages/design-system/src/components/StatusBubble/StatusBubble.tsx
deleted file mode 100644
index 2b0caa898a..0000000000
--- a/packages/design-system/src/components/StatusBubble/StatusBubble.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { forwardRef, Ref } from 'react';
-
-import { StatusBubbleProps, variants } from './Primitive/StatusBubblePrimitive';
-import StatusBubbleBeta from './variations/StatusBubbleBeta';
-import StatusBubbleError from './variations/StatusBubbleError';
-import StatusBubbleInformation from './variations/StatusBubbleInformation';
-import StatusBubbleSuccess from './variations/StatusBubbleSuccess';
-import StatusBubbleWarning from './variations/StatusBubbleWarning';
-
-const StatusBubble = forwardRef((props: StatusBubbleProps, ref: Ref<HTMLSpanElement>) => {
-	switch (props.variant) {
-		case variants.beta:
-			return <StatusBubbleBeta {...props} ref={ref} />;
-		case variants.error:
-			return <StatusBubbleError {...props} ref={ref} />;
-		case variants.information:
-			return <StatusBubbleInformation {...props} ref={ref} />;
-		case variants.success:
-			return <StatusBubbleSuccess {...props} ref={ref} />;
-		case variants.warning:
-			return <StatusBubbleWarning {...props} ref={ref} />;
-		default:
-			return null;
-	}
-});
-
-export default StatusBubble;
diff --git a/packages/design-system/src/components/StatusBubble/index.ts b/packages/design-system/src/components/StatusBubble/index.ts
deleted file mode 100644
index 19d03ad1a2..0000000000
--- a/packages/design-system/src/components/StatusBubble/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import StatusBubble from './StatusBubble';
-import StatusBubbleBeta from './variations/StatusBubbleBeta';
-import StatusBubbleError from './variations/StatusBubbleError';
-import StatusBubbleInformation from './variations/StatusBubbleInformation';
-import StatusBubbleSuccess from './variations/StatusBubbleSuccess';
-import StatusBubbleWarning from './variations/StatusBubbleWarning';
-
-export {
-	StatusBubble,
-	StatusBubbleBeta,
-	StatusBubbleError,
-	StatusBubbleInformation,
-	StatusBubbleSuccess,
-	StatusBubbleWarning,
-};
diff --git a/packages/design-system/src/components/StatusBubble/variations/StatusBubbleBeta.tsx b/packages/design-system/src/components/StatusBubble/variations/StatusBubbleBeta.tsx
deleted file mode 100644
index a792e88b6f..0000000000
--- a/packages/design-system/src/components/StatusBubble/variations/StatusBubbleBeta.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { forwardRef, Ref } from 'react';
-
-import StatusBubblePrimitive, {
-	StatusBubbleProps,
-	variants,
-} from '../Primitive/StatusBubblePrimitive';
-
-export type StatusBubbleBetaProps = Omit<StatusBubbleProps, 'variant'>;
-
-const StatusBubbleBeta = forwardRef((props: StatusBubbleBetaProps, ref: Ref<HTMLSpanElement>) => {
-	return <StatusBubblePrimitive variant={variants.beta} ref={ref} {...props} />;
-});
-
-StatusBubbleBeta.displayName = 'StatusBubbleBeta';
-
-export default StatusBubbleBeta;
diff --git a/packages/design-system/src/components/StatusBubble/variations/StatusBubbleError.tsx b/packages/design-system/src/components/StatusBubble/variations/StatusBubbleError.tsx
deleted file mode 100644
index fee48041b3..0000000000
--- a/packages/design-system/src/components/StatusBubble/variations/StatusBubbleError.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { forwardRef, Ref } from 'react';
-
-import StatusBubblePrimitive, {
-	StatusBubbleProps,
-	variants,
-} from '../Primitive/StatusBubblePrimitive';
-
-export type StatusBubbleErrorProps = Omit<StatusBubbleProps, 'variant'>;
-
-const StatusBubbleError = forwardRef((props: StatusBubbleErrorProps, ref: Ref<HTMLSpanElement>) => {
-	return <StatusBubblePrimitive variant={variants.error} ref={ref} {...props} />;
-});
-
-StatusBubbleError.displayName = 'StatusBubbleError';
-
-export default StatusBubbleError;
diff --git a/packages/design-system/src/components/StatusBubble/variations/StatusBubbleInformation.tsx b/packages/design-system/src/components/StatusBubble/variations/StatusBubbleInformation.tsx
deleted file mode 100644
index c700be3ba5..0000000000
--- a/packages/design-system/src/components/StatusBubble/variations/StatusBubbleInformation.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { forwardRef, Ref } from 'react';
-
-import StatusBubblePrimitive, {
-	StatusBubbleProps,
-	variants,
-} from '../Primitive/StatusBubblePrimitive';
-
-export type StatusBubbleInformationProps = Omit<StatusBubbleProps, 'variant'>;
-
-const StatusBubbleInformation = forwardRef(
-	(props: StatusBubbleInformationProps, ref: Ref<HTMLSpanElement>) => {
-		return <StatusBubblePrimitive variant={variants.information} ref={ref} {...props} />;
-	},
-);
-
-StatusBubbleInformation.displayName = 'StatusBubbleInformation';
-
-export default StatusBubbleInformation;
diff --git a/packages/design-system/src/components/StatusBubble/variations/StatusBubbleSuccess.tsx b/packages/design-system/src/components/StatusBubble/variations/StatusBubbleSuccess.tsx
deleted file mode 100644
index 70625b2306..0000000000
--- a/packages/design-system/src/components/StatusBubble/variations/StatusBubbleSuccess.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { forwardRef, Ref } from 'react';
-
-import StatusBubblePrimitive, {
-	StatusBubbleProps,
-	variants,
-} from '../Primitive/StatusBubblePrimitive';
-
-export type StatusBubbleSuccessProps = Omit<StatusBubbleProps, 'variant'>;
-
-const StatusBubbleSuccess = forwardRef(
-	(props: StatusBubbleSuccessProps, ref: Ref<HTMLSpanElement>) => {
-		return <StatusBubblePrimitive variant={variants.success} ref={ref} {...props} />;
-	},
-);
-
-StatusBubbleSuccess.displayName = 'StatusBubbleSuccess';
-
-export default StatusBubbleSuccess;
diff --git a/packages/design-system/src/components/StatusBubble/variations/StatusBubbleWarning.tsx b/packages/design-system/src/components/StatusBubble/variations/StatusBubbleWarning.tsx
deleted file mode 100644
index 491778914a..0000000000
--- a/packages/design-system/src/components/StatusBubble/variations/StatusBubbleWarning.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { forwardRef, Ref } from 'react';
-
-import StatusBubblePrimitive, {
-	StatusBubbleProps,
-	variants,
-} from '../Primitive/StatusBubblePrimitive';
-
-export type StatusBubbleWarningProps = Omit<StatusBubbleProps, 'variant'>;
-
-const StatusBubbleWarning = forwardRef(
-	(props: StatusBubbleWarningProps, ref: Ref<HTMLSpanElement>) => {
-		return <StatusBubblePrimitive variant={variants.warning} ref={ref} {...props} />;
-	},
-);
-
-StatusBubbleWarning.displayName = 'StatusBubbleWarning';
-
-export default StatusBubbleWarning;
diff --git a/packages/design-system/src/components/StatusBubble/Primitive/StatusBubblePrimitive.module.scss b/packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.module.scss
similarity index 96%
rename from packages/design-system/src/components/StatusBubble/Primitive/StatusBubblePrimitive.module.scss
rename to packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.module.scss
index 180c571d13..dcf82b4292 100644
--- a/packages/design-system/src/components/StatusBubble/Primitive/StatusBubblePrimitive.module.scss
+++ b/packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.module.scss
@@ -1,6 +1,6 @@
 @use '@talend/design-tokens/lib/tokens' as tokens;
 
-.statusBubble {
+.statusDot {
 	display: block;
 	width: tokens.$coral-spacing-xs;
 	height: tokens.$coral-spacing-xs;
diff --git a/packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.test.tsx b/packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.test.tsx
new file mode 100644
index 0000000000..5209e05e6e
--- /dev/null
+++ b/packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.test.tsx
@@ -0,0 +1,12 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+
+import StatusDot, { variants } from './StatusDotPrimitive';
+
+describe('StatusDot', (): void => {
+	it('Should render', (): void => {
+		render(<StatusDot variant={variants.success} data-testid="my-status-dot-component" />);
+
+		expect(screen.getByTestId('my-status-dot-component')).toBeVisible();
+	});
+});
diff --git a/packages/design-system/src/components/StatusBubble/Primitive/StatusBubblePrimitive.tsx b/packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.tsx
similarity index 50%
rename from packages/design-system/src/components/StatusBubble/Primitive/StatusBubblePrimitive.tsx
rename to packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.tsx
index 8ef65b92e4..30a4315f99 100644
--- a/packages/design-system/src/components/StatusBubble/Primitive/StatusBubblePrimitive.tsx
+++ b/packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.tsx
@@ -14,18 +14,23 @@ export const variants = {
 	warning: 'warning',
 };
 
-export type StatusBubbleProps = {
+export type StatusDotProps = {
 	variant: string;
+	className?: string;
 } & DataAttributes;
 
-const StatusBubblePrimitive = forwardRef(
-	({ variant, ...rest }: StatusBubbleProps, ref: Ref<HTMLSpanElement>) => {
+const StatusDotPrimitive = forwardRef(
+	({ variant, className, ...rest }: StatusDotProps, ref: Ref<HTMLSpanElement>) => {
 		return (
-			<span className={classnames(styles.statusBubble, styles[variant])} ref={ref} {...rest} />
+			<span
+				className={classnames(styles.statusDot, styles[variant], className)}
+				ref={ref}
+				{...rest}
+			/>
 		);
 	},
 );
 
-StatusBubblePrimitive.displayName = 'StatusBubblePrimitive';
+StatusDotPrimitive.displayName = 'StatusDotPrimitive';
 
-export default StatusBubblePrimitive;
+export default StatusDotPrimitive;
diff --git a/packages/design-system/src/components/StatusDot/StatusDot.tsx b/packages/design-system/src/components/StatusDot/StatusDot.tsx
new file mode 100644
index 0000000000..15590ac2a1
--- /dev/null
+++ b/packages/design-system/src/components/StatusDot/StatusDot.tsx
@@ -0,0 +1,27 @@
+import { forwardRef, Ref } from 'react';
+
+import { StatusDotProps, variants } from './Primitive/StatusDotPrimitive';
+import StatusDotBeta from './variations/StatusDotBeta';
+import StatusDotError from './variations/StatusDotError';
+import StatusDotInformation from './variations/StatusDotInformation';
+import StatusDotSuccess from './variations/StatusDotSuccess';
+import StatusDotWarning from './variations/StatusDotWarning';
+
+const StatusBubble = forwardRef((props: StatusDotProps, ref: Ref<HTMLSpanElement>) => {
+	switch (props.variant) {
+		case variants.beta:
+			return <StatusDotBeta {...props} ref={ref} />;
+		case variants.error:
+			return <StatusDotError {...props} ref={ref} />;
+		case variants.information:
+			return <StatusDotInformation {...props} ref={ref} />;
+		case variants.success:
+			return <StatusDotSuccess {...props} ref={ref} />;
+		case variants.warning:
+			return <StatusDotWarning {...props} ref={ref} />;
+		default:
+			return null;
+	}
+});
+
+export default StatusBubble;
diff --git a/packages/design-system/src/components/StatusDot/index.ts b/packages/design-system/src/components/StatusDot/index.ts
new file mode 100644
index 0000000000..32bc82353a
--- /dev/null
+++ b/packages/design-system/src/components/StatusDot/index.ts
@@ -0,0 +1,15 @@
+import StatusDot from './StatusDot';
+import StatusDotBeta from './variations/StatusDotBeta';
+import StatusDotError from './variations/StatusDotError';
+import StatusDotInformation from './variations/StatusDotInformation';
+import StatusDotSuccess from './variations/StatusDotSuccess';
+import StatusDotWarning from './variations/StatusDotWarning';
+
+export {
+	StatusDot,
+	StatusDotBeta,
+	StatusDotError,
+	StatusDotInformation,
+	StatusDotSuccess,
+	StatusDotWarning,
+};
diff --git a/packages/design-system/src/components/StatusDot/variations/StatusDotBeta.tsx b/packages/design-system/src/components/StatusDot/variations/StatusDotBeta.tsx
new file mode 100644
index 0000000000..b66b24ec81
--- /dev/null
+++ b/packages/design-system/src/components/StatusDot/variations/StatusDotBeta.tsx
@@ -0,0 +1,13 @@
+import { forwardRef, Ref } from 'react';
+
+import StatusDotPrimitive, { StatusDotProps, variants } from '../Primitive/StatusDotPrimitive';
+
+export type StatusDotBetaProps = Omit<StatusDotProps, 'variant'>;
+
+const StatusDotBeta = forwardRef((props: StatusDotBetaProps, ref: Ref<HTMLSpanElement>) => {
+	return <StatusDotPrimitive variant={variants.beta} ref={ref} {...props} />;
+});
+
+StatusDotBeta.displayName = 'StatusDotBeta';
+
+export default StatusDotBeta;
diff --git a/packages/design-system/src/components/StatusDot/variations/StatusDotError.tsx b/packages/design-system/src/components/StatusDot/variations/StatusDotError.tsx
new file mode 100644
index 0000000000..f3d6d75ddd
--- /dev/null
+++ b/packages/design-system/src/components/StatusDot/variations/StatusDotError.tsx
@@ -0,0 +1,13 @@
+import { forwardRef, Ref } from 'react';
+
+import StatusDotPrimitive, { StatusDotProps, variants } from '../Primitive/StatusDotPrimitive';
+
+export type StatusDotErrorProps = Omit<StatusDotProps, 'variant'>;
+
+const StatusDotError = forwardRef((props: StatusDotErrorProps, ref: Ref<HTMLSpanElement>) => {
+	return <StatusDotPrimitive variant={variants.error} ref={ref} {...props} />;
+});
+
+StatusDotError.displayName = 'StatusDotError';
+
+export default StatusDotError;
diff --git a/packages/design-system/src/components/StatusDot/variations/StatusDotInformation.tsx b/packages/design-system/src/components/StatusDot/variations/StatusDotInformation.tsx
new file mode 100644
index 0000000000..ff5f664789
--- /dev/null
+++ b/packages/design-system/src/components/StatusDot/variations/StatusDotInformation.tsx
@@ -0,0 +1,15 @@
+import { forwardRef, Ref } from 'react';
+
+import StatusDotPrimitive, { StatusDotProps, variants } from '../Primitive/StatusDotPrimitive';
+
+export type StatusDotInformationProps = Omit<StatusDotProps, 'variant'>;
+
+const StatusDotInformation = forwardRef(
+	(props: StatusDotInformationProps, ref: Ref<HTMLSpanElement>) => {
+		return <StatusDotPrimitive variant={variants.information} ref={ref} {...props} />;
+	},
+);
+
+StatusDotInformation.displayName = 'StatusDotInformation';
+
+export default StatusDotInformation;
diff --git a/packages/design-system/src/components/StatusDot/variations/StatusDotSuccess.tsx b/packages/design-system/src/components/StatusDot/variations/StatusDotSuccess.tsx
new file mode 100644
index 0000000000..491bb6df57
--- /dev/null
+++ b/packages/design-system/src/components/StatusDot/variations/StatusDotSuccess.tsx
@@ -0,0 +1,13 @@
+import { forwardRef, Ref } from 'react';
+
+import StatusDotPrimitive, { StatusDotProps, variants } from '../Primitive/StatusDotPrimitive';
+
+export type StatusDotSuccessProps = Omit<StatusDotProps, 'variant'>;
+
+const StatusDotSuccess = forwardRef((props: StatusDotSuccessProps, ref: Ref<HTMLSpanElement>) => {
+	return <StatusDotPrimitive variant={variants.success} ref={ref} {...props} />;
+});
+
+StatusDotSuccess.displayName = 'StatusDotSuccess';
+
+export default StatusDotSuccess;
diff --git a/packages/design-system/src/components/StatusDot/variations/StatusDotWarning.tsx b/packages/design-system/src/components/StatusDot/variations/StatusDotWarning.tsx
new file mode 100644
index 0000000000..5f2f14a59b
--- /dev/null
+++ b/packages/design-system/src/components/StatusDot/variations/StatusDotWarning.tsx
@@ -0,0 +1,13 @@
+import { forwardRef, Ref } from 'react';
+
+import StatusDotPrimitive, { StatusDotProps, variants } from '../Primitive/StatusDotPrimitive';
+
+export type StatusDotWarningProps = Omit<StatusDotProps, 'variant'>;
+
+const StatusDotWarning = forwardRef((props: StatusDotWarningProps, ref: Ref<HTMLSpanElement>) => {
+	return <StatusDotPrimitive variant={variants.warning} ref={ref} {...props} />;
+});
+
+StatusDotWarning.displayName = 'StatusDotWarning';
+
+export default StatusDotWarning;
diff --git a/packages/design-system/src/components/Tabs/Primitive/TabStyles.module.scss b/packages/design-system/src/components/Tabs/Primitive/TabStyles.module.scss
index 18d7b5db70..9625744016 100644
--- a/packages/design-system/src/components/Tabs/Primitive/TabStyles.module.scss
+++ b/packages/design-system/src/components/Tabs/Primitive/TabStyles.module.scss
@@ -122,4 +122,8 @@
 		transition: tokens.$coral-transition-fast;
 		transform: translateY(100%);
 	}
+
+	.statusDot {
+		align-self: flex-start;
+	}
 }
diff --git a/packages/design-system/src/components/Tabs/Primitive/Tabs.tsx b/packages/design-system/src/components/Tabs/Primitive/Tabs.tsx
index afb41f2554..de0f253fab 100644
--- a/packages/design-system/src/components/Tabs/Primitive/Tabs.tsx
+++ b/packages/design-system/src/components/Tabs/Primitive/Tabs.tsx
@@ -6,6 +6,7 @@ import { IconNameWithSize } from '@talend/icons';
 
 import { SizedIcon } from '../../Icon';
 import { StackHorizontal } from '../../Stack';
+import { StatusDot } from '../../StatusDot';
 import { TagDefault } from '../../Tag';
 import { Tooltip } from '../../Tooltip';
 import { TabsInternalContext } from './TabsProvider';
@@ -31,6 +32,7 @@ export type TabPropTypes = {
 	disabled?: boolean;
 	icon?: IconNameWithSize<'S'>;
 	tag?: string | number;
+	statusDot?: string;
 	tooltip?: string;
 	error?: boolean;
 };
@@ -53,6 +55,7 @@ export function Tab(props: TabPropTypes) {
 				{props.icon && <SizedIcon size="S" name={props.icon} />}
 				<span className={style.tab__copy}>{props.title}</span>
 				{props.tag && <TagDefault>{props.tag}</TagDefault>}
+				{props.statusDot && <StatusDot variant={props.statusDot} className={style.statusDot} />}
 			</StackHorizontal>
 		</button>
 	);
diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts
index 1411c207e0..dc5ff1b6f7 100644
--- a/packages/design-system/src/index.ts
+++ b/packages/design-system/src/index.ts
@@ -27,7 +27,7 @@ export * from './components/RatioBar';
 export * from './components/RichRadioButton';
 export * from './components/Skeleton';
 export * from './components/Status';
-export * from './components/StatusBubble';
+export * from './components/StatusDot';
 export * from './components/Stepper';
 export * from './components/Switch';
 export * from './components/Tabs';
diff --git a/packages/design-system/src/stories/feedback/StatusBubble.stories.tsx b/packages/design-system/src/stories/feedback/StatusBubble.stories.tsx
deleted file mode 100644
index 2836ed8dc3..0000000000
--- a/packages/design-system/src/stories/feedback/StatusBubble.stories.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import {
-	StatusBubble,
-	StatusBubbleBeta,
-	StatusBubbleError,
-	StatusBubbleInformation,
-	StatusBubbleSuccess,
-	StatusBubbleWarning,
-} from '../../';
-import {
-	StatusBubbleProps,
-	variants,
-} from '../../components/StatusBubble/Primitive/StatusBubblePrimitive';
-
-export const Beta = () => <StatusBubbleBeta />;
-export const Error = () => <StatusBubbleError />;
-export const Information = () => <StatusBubbleInformation />;
-export const Success = () => <StatusBubbleSuccess />;
-export const Warning = () => <StatusBubbleWarning />;
-
-export const Usage = (props: StatusBubbleProps) => <StatusBubble {...props} />;
-
-Usage.args = {
-	variant: variants.beta,
-};
-
-Usage.argTypes = {
-	variant: {
-		description: 'StatusBubble variation',
-		options: Object.values(variants),
-		control: {
-			type: 'select',
-		},
-	},
-};
-
-export default {
-	title: 'Feedback/StatusBubble',
-	component: StatusBubble,
-};
diff --git a/packages/design-system/src/stories/feedback/StatusBubble.mdx b/packages/design-system/src/stories/feedback/StatusDot.mdx
similarity index 73%
rename from packages/design-system/src/stories/feedback/StatusBubble.mdx
rename to packages/design-system/src/stories/feedback/StatusDot.mdx
index d71a4748c8..1873ad52ac 100644
--- a/packages/design-system/src/stories/feedback/StatusBubble.mdx
+++ b/packages/design-system/src/stories/feedback/StatusDot.mdx
@@ -2,7 +2,7 @@ import { Canvas, Controls, Meta } from '@storybook/blocks';
 
 import { FigmaImage } from '@talend/storybook-docs';
 
-import * as Stories from './StatusBubble.stories';
+import * as Stories from './StatusDot.stories';
 import { Status } from '../Status.block';
 
 <Meta of={Stories} />
@@ -10,7 +10,7 @@ import { Status } from '../Status.block';
 
 # StatusBubble
 
-The status bubble component displays state information using circle shape with semantic colors
+The status dot component displays state information using circle shape with semantic colors
 
 ### Variations
 
diff --git a/packages/design-system/src/stories/feedback/StatusDot.stories.tsx b/packages/design-system/src/stories/feedback/StatusDot.stories.tsx
new file mode 100644
index 0000000000..cb8d455152
--- /dev/null
+++ b/packages/design-system/src/stories/feedback/StatusDot.stories.tsx
@@ -0,0 +1,36 @@
+import {
+	StatusDot,
+	StatusDotBeta,
+	StatusDotError,
+	StatusDotInformation,
+	StatusDotSuccess,
+	StatusDotWarning,
+} from '../../';
+import { StatusDotProps, variants } from '../../components/StatusDot/Primitive/StatusDotPrimitive';
+
+export const Beta = () => <StatusDotBeta />;
+export const Error = () => <StatusDotError />;
+export const Information = () => <StatusDotInformation />;
+export const Success = () => <StatusDotSuccess />;
+export const Warning = () => <StatusDotWarning />;
+
+export const Usage = (props: StatusDotProps) => <StatusDot {...props} />;
+
+Usage.args = {
+	variant: variants.beta,
+};
+
+Usage.argTypes = {
+	variant: {
+		description: 'StatusDot variation',
+		options: Object.values(variants),
+		control: {
+			type: 'select',
+		},
+	},
+};
+
+export default {
+	title: 'Feedback/StatusDot',
+	component: StatusDot,
+};
diff --git a/packages/design-system/src/stories/navigation/Tabs.stories.tsx b/packages/design-system/src/stories/navigation/Tabs.stories.tsx
index 5506b4cb3c..e8bd6b3112 100644
--- a/packages/design-system/src/stories/navigation/Tabs.stories.tsx
+++ b/packages/design-system/src/stories/navigation/Tabs.stories.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 
 import { StackHorizontal, StackVertical, Tabs } from '../../';
+import { variants as StatusDotVariants } from '../../components/StatusDot/Primitive/StatusDotPrimitive';
 
 export default { component: Tabs, title: 'Navigation/Tabs' };
 
@@ -124,6 +125,40 @@ export const TabStandaloneControlled = () => {
 	);
 };
 
+export const TabsWithStatusBubble = () => {
+	return (
+		<Tabs.Container defaultActiveKey="profile">
+			<Tabs.List>
+				<Tabs.Tab
+					aria-controls="user"
+					title="User"
+					icon="user"
+					tag={13}
+					statusDot={StatusDotVariants.beta}
+				/>
+				<Tabs.Tab
+					aria-controls="calendar"
+					title="Calendar"
+					icon="calendar"
+					tag={54}
+					statusDot={StatusDotVariants.information}
+				/>
+				<Tabs.Tab
+					aria-controls="favorite"
+					title="Favorite"
+					icon="star"
+					tag="999+"
+					tooltip="1534 Favorite items"
+					statusDot={StatusDotVariants.success}
+				/>
+			</Tabs.List>
+			<Tabs.Panel id="user">Users tab content</Tabs.Panel>
+			<Tabs.Panel id="calendar">Calendar tab content</Tabs.Panel>
+			<Tabs.Panel id="favorite">Favorite tab content</Tabs.Panel>
+		</Tabs.Container>
+	);
+};
+
 export const TabAPI = () => (
 	<Tabs
 		tabs={[