diff --git a/__snapshots__/tag/patternhub/tag-docs-should-match-screenshot.png b/__snapshots__/tag/patternhub/tag-docs-should-match-screenshot.png
index 96fe43d32056..df670d723bfa 100644
Binary files a/__snapshots__/tag/patternhub/tag-docs-should-match-screenshot.png and b/__snapshots__/tag/patternhub/tag-docs-should-match-screenshot.png differ
diff --git a/packages/components/src/components/tag/docs/Angular.md b/packages/components/src/components/tag/docs/Angular.md
index fca043bf76f7..617ff773306d 100644
--- a/packages/components/src/components/tag/docs/Angular.md
+++ b/packages/components/src/components/tag/docs/Angular.md
@@ -20,12 +20,20 @@ import { DBTag } from '@db-ux/ngx-core-components';
 
 ```html app.component.html
 <!-- app.component.html -->
-<db-tag><db-button>Tag as Button</db-button></db-tag>
+<db-tag><button type="button">Tag as Button</button></db-tag>
 <db-tag>
-	<db-link> Tag as Link </db-link>
+	<a href="#"> Tag as Link </a>
 </db-tag>
-<db-tag><db-checkbox>Tag as Checkbox</db-checkbox></db-tag>
-<db-tag><db-radio>Tag as Radio</db-radio></db-tag>
+<db-tag
+	><label for="checkbox01"
+		><input id="checkbox01" type="checkbox" />Tag as Checkbox</label
+	></db-tag
+>
+<db-tag
+	><label for="radio01"
+		><input name="radio01" id="radio01" type="radio" />Tag as Radio</label
+	></db-tag
+>
 <db-tag>Static Tag</db-tag>
 <db-tag [overflow]="true"><span>Static Tag with overflow</span></db-tag>
 ```
diff --git a/packages/components/src/components/tag/docs/Migration.md b/packages/components/src/components/tag/docs/Migration.md
index f3ef0d5df6d5..2cf89069ce69 100644
--- a/packages/components/src/components/tag/docs/Migration.md
+++ b/packages/components/src/components/tag/docs/Migration.md
@@ -12,10 +12,18 @@ We simplified the components by reducing the amount from tag + chip to only tag.
 You can use different types of tags by adding another component into it:
 
 ```html
-<db-tag><db-button>Tag as Button</db-button></db-tag>
-<db-tag><db-link>Tag as Link</db-link></db-tag>
-<db-tag><db-checkbox>Tag as Checkbox</db-checkbox></db-tag>
-<db-tag><db-radio>Tag as Radio</db-radio></db-tag>
+<db-tag><button type="button">Tag as Button</button></db-tag>
+<db-tag><a href="#">Tag as Link</a></db-tag>
+<db-tag
+	><label for="checkbox01">
+		<input id="checkbox01" type="checkbox" />Tag as Checkbox</label
+	></db-tag
+>
+<db-tag
+	><label for="radio01"
+		><input name="radio01" id="radio01" type="radio" />Tag as Radio</label
+	></db-tag
+>
 <db-tag>Static Tag</db-tag>
 ```
 
diff --git a/packages/components/src/components/tag/docs/React.md b/packages/components/src/components/tag/docs/React.md
index 1ae122502416..800e0da6c5c9 100644
--- a/packages/components/src/components/tag/docs/React.md
+++ b/packages/components/src/components/tag/docs/React.md
@@ -11,16 +11,22 @@ import { DBTag } from "@db-ux/react-core-components";
 const App = () => (
 	<>
 		<DBTag>
-			<DBButton>Tag as Button</DBButton>
+			<button type="button">Tag as Button</button>
 		</DBTag>
 		<DBTag>
-			<DBLink>Tag as Link</DBLink>
+			<a href="#">Tag as Link</a>
 		</DBTag>
 		<DBTag>
-			<DBCheckbox>Tag as Checkbox</DBCheckbox>
+			<label for="checkbox01">
+				<input id="checkbox01" type="checkbox" />
+				Tag as Checkbox
+			</label>
 		</DBTag>
 		<DBTag>
-			<DBRadio>Tag as Radio</DBRadio>
+			<label for="radio01">
+				<input name="radio01" id="radio01" type="radio" />
+				Tag as Radio
+			</label>
 		</DBTag>
 		<DBTag>Static Tag</DBTag>
 		<DBTag overflow={true}>
diff --git a/packages/components/src/components/tag/docs/Vue.md b/packages/components/src/components/tag/docs/Vue.md
index 06ef4f774d23..4a63ebbdaf3e 100644
--- a/packages/components/src/components/tag/docs/Vue.md
+++ b/packages/components/src/components/tag/docs/Vue.md
@@ -11,12 +11,21 @@ import { DBTag } from "@db-ux/v-core-components";
 </script>
 
 <template>
-	<DBTag><DBButton>Tag as Button</DBButton></DBTag>
+	<DBTag><button type="button">Tag as Button</button></DBTag>
 	<DBTag>
-		<DBLink> Tag as Link </DBLink>
+		<a href="#"> Tag as Link </a>
 	</DBTag>
-	<DBTag><DBCheckbox>Tag as Checkbox</DBCheckbox></DBTag>
-	<DBTag><DBRadio>Tag as Radio</DBRadio></DBTag>
+	<DBTag
+		><label for="checkbox01"
+			><input id="checkbox01" type="checkbox" />Tag as Checkbox</label
+		></DBTag
+	>
+	<DBTag
+		><label for="radio01"
+			><input name="radio01" id="radio01" type="radio" />Tag as
+			Radio</label
+		></DBTag
+	>
 	<DBTag>Static Tag</DBTag>
 	<DBTag :overflow="true">
 		<span>Static Tag with overflow</span>
diff --git a/packages/components/src/components/tag/tag.spec.tsx b/packages/components/src/components/tag/tag.spec.tsx
index e9414b6849aa..1dfdd1841312 100644
--- a/packages/components/src/components/tag/tag.spec.tsx
+++ b/packages/components/src/components/tag/tag.spec.tsx
@@ -4,10 +4,6 @@ import { expect, test } from '@playwright/experimental-ct-react';
 import { DBTag } from './index';
 // @ts-ignore - vue can only find it with .ts as file ending
 import { SEMANTICS } from '../../shared/constants.ts';
-import { DBButton } from '../button';
-import { DBCheckbox } from '../checkbox';
-import { DBLink } from '../link';
-import { DBRadio } from '../radio';
 
 const comp: any = <DBTag>Test</DBTag>;
 
@@ -55,7 +51,9 @@ const testInterActions = () => {
 		let test = '';
 		const buttonTag: any = (
 			<DBTag>
-				<DBButton onClick={() => (test = 'test')}>Test</DBButton>
+				<button onClick={() => (test = 'test')} type="button">
+					Test
+				</button>
 			</DBTag>
 		);
 		const component = await mount(buttonTag);
@@ -66,7 +64,7 @@ const testInterActions = () => {
 	test('should be a button', async ({ mount }) => {
 		const buttonTag: any = (
 			<DBTag>
-				<DBButton>Test</DBButton>
+				<button type="button">Test</button>
 			</DBTag>
 		);
 		const component = await mount(buttonTag);
@@ -76,7 +74,7 @@ const testInterActions = () => {
 	test('should be a link', async ({ mount }) => {
 		const tag: any = (
 			<DBTag>
-				<DBLink>Test</DBLink>
+				<a href="#">Test</a>
 			</DBTag>
 		);
 		const component = await mount(tag);
@@ -86,7 +84,10 @@ const testInterActions = () => {
 	test('should be a radio', async ({ mount }) => {
 		const tag: any = (
 			<DBTag>
-				<DBRadio>Test</DBRadio>
+				<label for="radio01">
+					<input name="radio01" id="radio01" type="radio" />
+					Test
+				</label>
 			</DBTag>
 		);
 		const component = await mount(tag);
@@ -96,7 +97,15 @@ const testInterActions = () => {
 	test('should be a radio checked', async ({ mount }) => {
 		const tag: any = (
 			<DBTag>
-				<DBRadio data-testid="radio">Test</DBRadio>
+				<label for="radio01">
+					<input
+						name="radio01"
+						id="radio01"
+						type="radio"
+						data-testid="radio"
+					/>
+					Test
+				</label>
 			</DBTag>
 		);
 		const component = await mount(tag);
@@ -107,7 +116,10 @@ const testInterActions = () => {
 	test('should be a checkbox', async ({ mount }) => {
 		const tag: any = (
 			<DBTag>
-				<DBCheckbox>Test</DBCheckbox>
+				<label for="checkbox01">
+					<input id="checkbox01" type="checkbox" />
+					Test
+				</label>
 			</DBTag>
 		);
 		const component = await mount(tag);
@@ -117,7 +129,14 @@ const testInterActions = () => {
 	test('should be a checkbox checked', async ({ mount }) => {
 		const tag: any = (
 			<DBTag>
-				<DBCheckbox data-testid="checkbox">Test</DBCheckbox>
+				<label for="checkbox01">
+					<input
+						id="checkbox01"
+						type="checkbox"
+						data-testid="checkbox"
+					/>
+					Test
+				</label>
 			</DBTag>
 		);
 		const component = await mount(tag);
diff --git a/showcases/angular-showcase/src/app/components/form/form.component.html b/showcases/angular-showcase/src/app/components/form/form.component.html
index d3a840f8ba3d..a302ee374c64 100644
--- a/showcases/angular-showcase/src/app/components/form/form.component.html
+++ b/showcases/angular-showcase/src/app/components/form/form.component.html
@@ -256,9 +256,21 @@ <h1>Output</h1>
 			<dd>{{ getTags() }}</dd>
 
 			<br />
-			<db-tag><db-checkbox>Checkbox</db-checkbox></db-tag>
-			<db-tag><db-radio>Checkbox</db-radio></db-tag>
-			<db-tag><db-button>Checkbox</db-button></db-tag>
+			<db-tag
+				><label for="checkbox01">
+					<input id="checkbox01" type="checkbox" />Checkbox</label
+				></db-tag
+			>
+			<db-tag
+				><label for="radio01">
+					<input
+						name="radio01"
+						id="radio01"
+						type="radio"
+					/>Checkbox</label
+				></db-tag
+			>
+			<db-tag><button type="button">Checkbox</button></db-tag>
 			<br />
 
 			<db-tabs orientation="vertical">
diff --git a/showcases/react-showcase/src/components/form/index.tsx b/showcases/react-showcase/src/components/form/index.tsx
index d8da140fa7e0..85c83e20f9be 100644
--- a/showcases/react-showcase/src/components/form/index.tsx
+++ b/showcases/react-showcase/src/components/form/index.tsx
@@ -535,16 +535,22 @@ const FormComponent = () => {
 
 				<div>
 					<DBTag>
-						<DBButton>Test</DBButton>
+						<button type="button">Test</button>
 					</DBTag>
 					<DBTag>
-						<DBLink>Test</DBLink>
+						<a href="#">Test</a>
 					</DBTag>
 					<DBTag>
-						<DBRadio>Test</DBRadio>
+						<label htmlFor="radio01">
+							<input name="radio01" id="radio01" type="radio" />
+							Test
+						</label>
 					</DBTag>
 					<DBTag>
-						<DBCheckbox>Test</DBCheckbox>
+						<label htmlFor="checkbox01">
+							<input id="checkbox01" type="checkbox" />
+							Test
+						</label>
 					</DBTag>
 				</div>
 			</div>