diff --git a/packages/opendesign/src/tag/__docs__/__case__/TagBasic.vue b/packages/opendesign/src/tag/__docs__/__case__/TagBasic.vue
new file mode 100644
index 0000000000000000000000000000000000000000..95872a4bc9e0462180d2643080da97b96acda5eb
--- /dev/null
+++ b/packages/opendesign/src/tag/__docs__/__case__/TagBasic.vue
@@ -0,0 +1,22 @@
+<docs lang="md">
+<!--zh-CN-->
+### 基础用法
+
+<!--en-US-->
+### Basic Usage
+</docs>
+
+<script setup lang="ts">
+import { OTag, OIconAdd } from '@opensig/opendesign';
+</script>
+
+<template>
+  <section>
+    <OTag>Tag1</OTag>
+    <OTag>Tag2</OTag>
+    <OTag>
+      <template #icon><OIconAdd /></template>
+      Icon Tag
+    </OTag>
+  </section>
+</template>
diff --git a/packages/opendesign/src/tag/__docs__/__case__/TagClosable.vue b/packages/opendesign/src/tag/__docs__/__case__/TagClosable.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4de8dc48447b1513aba6fc8c1e732b0b49349671
--- /dev/null
+++ b/packages/opendesign/src/tag/__docs__/__case__/TagClosable.vue
@@ -0,0 +1,30 @@
+<docs lang="md">
+<!--zh-CN-->
+### 可关闭按钮
+
+<!--en-US-->
+### Closeable
+</docs>
+
+<script setup lang="ts">
+import { OTag } from '@opensig/opendesign';
+const handleClose = () => {
+  console.log('close!!!');
+};
+</script>
+
+<template>
+  <section>
+    <OTag closable @close="handleClose">Tag1</OTag>
+    <OTag color="primary" closable @close="handleClose">Tag2</OTag>
+    <OTag color="success" closable @close="handleClose">Tag3</OTag>
+    <OTag color="warning" closable @close="handleClose">Tag4</OTag>
+    <OTag color="danger" closable @close="handleClose">Tag5</OTag>
+
+    <OTag size="small" closable @close="handleClose">Tag1</OTag>
+    <OTag color="primary" size="small" closable @close="handleClose">Tag2</OTag>
+    <OTag color="success" size="small" closable @close="handleClose">Tag3</OTag>
+    <OTag color="warning" size="small" closable @close="handleClose">Tag4</OTag>
+    <OTag color="danger" size="small" closable @close="handleClose">Tag5</OTag>
+  </section>
+</template>
diff --git a/packages/opendesign/src/tag/__docs__/__case__/TagColor.vue b/packages/opendesign/src/tag/__docs__/__case__/TagColor.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3bc757b0d172ec78f30f3802f976c3ac8cf635cc
--- /dev/null
+++ b/packages/opendesign/src/tag/__docs__/__case__/TagColor.vue
@@ -0,0 +1,21 @@
+<docs lang="md">
+<!--zh-CN-->
+### Colors
+
+<!--en-US-->
+### Colors
+</docs>
+
+<script setup lang="ts">
+import { OTag } from '@opensig/opendesign';
+</script>
+
+<template>
+  <section>
+    <OTag>Normal Tag</OTag>
+    <OTag color="primary">Primary Tag</OTag>
+    <OTag color="success">Success Tag</OTag>
+    <OTag color="warning">Warning Tag</OTag>
+    <OTag color="danger">Danger Tag</OTag>
+  </section>
+</template>
diff --git a/packages/opendesign/src/tag/__docs__/__case__/TagOutline.vue b/packages/opendesign/src/tag/__docs__/__case__/TagOutline.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e831a178d150523a570795cd48790af646e2587d
--- /dev/null
+++ b/packages/opendesign/src/tag/__docs__/__case__/TagOutline.vue
@@ -0,0 +1,27 @@
+<docs lang="md">
+<!--zh-CN-->
+### 带边框标签
+
+<!--en-US-->
+### With Outline
+</docs>
+
+<script setup lang="ts">
+import { OTag } from '@opensig/opendesign';
+</script>
+
+<template>
+  <section>
+    <OTag variant="outline">Tag1</OTag>
+    <OTag color="primary" variant="outline">Tag2</OTag>
+    <OTag color="success" variant="outline">Tag2</OTag>
+    <OTag color="warning" variant="outline">Tag3</OTag>
+    <OTag color="danger" variant="outline">Tag4</OTag>
+
+    <OTag variant="outline" closable>Tag1</OTag>
+    <OTag color="primary" closable variant="outline">Tag2</OTag>
+    <OTag color="success" closable variant="outline">Tag2</OTag>
+    <OTag color="warning" closable variant="outline">Tag3</OTag>
+    <OTag color="danger" closable variant="outline">Tag4</OTag>
+  </section>
+</template>
diff --git a/packages/opendesign/src/tag/__docs__/__case__/TagRound.vue b/packages/opendesign/src/tag/__docs__/__case__/TagRound.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fb7b1543a2aae27f049b415dbc978e252092e5f9
--- /dev/null
+++ b/packages/opendesign/src/tag/__docs__/__case__/TagRound.vue
@@ -0,0 +1,34 @@
+<docs lang="md">
+<!--zh-CN-->
+### Round
+
+<!--en-US-->
+### Round
+</docs>
+
+<script setup lang="ts">
+import { OTag } from '@opensig/opendesign';
+</script>
+
+<template>
+  <section>
+    <div>
+      <section>
+        <p>round="pill"</p>
+        <OTag round="pill" color="primary">Primary Tag</OTag>
+      </section>
+    </div>
+    <div>
+      <section>
+        <p>round="2px"</p>
+        <OTag round="2px" color="primary">Primary Tag</OTag>
+      </section>
+    </div>
+    <div>
+      <section>
+        <p>round="4px"</p>
+        <OTag round="4px" color="primary">Primary Tag</OTag>
+      </section>
+    </div>
+  </section>
+</template>
diff --git a/packages/opendesign/src/tag/__docs__/__case__/TagSize.vue b/packages/opendesign/src/tag/__docs__/__case__/TagSize.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d60c0509a2c1cea7aa2fd3e15ce145a24d843db0
--- /dev/null
+++ b/packages/opendesign/src/tag/__docs__/__case__/TagSize.vue
@@ -0,0 +1,18 @@
+<docs lang="md">
+<!--zh-CN-->
+### 尺寸
+
+<!--en-US-->
+### Size
+</docs>
+
+<script setup lang="ts">
+import { OTag } from '@opensig/opendesign';
+</script>
+
+<template>
+  <section>
+    <OTag>Medium Tag</OTag>
+    <OTag size="small">Small Tag</OTag>
+  </section>
+</template>
diff --git a/packages/opendesign/src/tag/__docs__/__case__/tagUsage.ts b/packages/opendesign/src/tag/__docs__/__case__/tagUsage.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0471179de7bf32056666092d076730763ac5abb0
--- /dev/null
+++ b/packages/opendesign/src/tag/__docs__/__case__/tagUsage.ts
@@ -0,0 +1,62 @@
+import { propsToAttrStr } from '../../../_demo/utils';
+import { ColorTypes, TagVariantTypes, TagSizeTypes } from '@opensig/opendesign';
+import { DocDemoSchema, DocDemoTemplate } from '../../../_demo/types.ts';
+
+export const docs = {
+  'zh-CN':
+    'Tag组件以紧凑的视觉形式清晰标识分类、状态、属性或关键词，帮助用户快速识别内容特征。可配置项包含：  \n' +
+    '- 标签颜色`color`  \n' +
+    '- 标签类型`variant`  \n' +
+    '- 标签尺寸`size`  \n' +
+    '- 圆角值`round`  \n' +
+    '- 是否可关闭`closable`  \n' +
+    '- 是否可见(双向绑定)`visible`  \n' +
+    '- 是否默认可见(非受控)`defaultVisible`  \n' +
+    '- 关闭前的钩子函数`beforeClose`  \n' +
+    '\n\n支持多色主题、自定义图标及可关闭交互，无缝融入筛选面板、数据表格、内容卡片等场景',
+  'en-US':
+    'The Tag component clearly identifies categories, statuses, attributes, or keywords in a compact visual form, helping users quickly identify content features. Configurable items include:  \n' +
+    '- Tag color `color`  ' +
+    '- Tag type `variant`  ' +
+    '- Tag size `size`  ' +
+    '- Border radius `round`  ' +
+    '- Whether closable `closable`  ' +
+    '- Visibility (two-way binding) `visible`  ' +
+    '- Default visibility (uncontrolled) `defaultVisible`  ' +
+    '- Hook function before closing `beforeClose`  ' +
+    '\n\nSupports multi-color themes, custom icons, and closable interactions, seamlessly integrating into scenarios such as filter panels, data tables, and content cards'
+};
+
+
+export const schema = {
+  color: {
+    type: 'list',
+    list: ColorTypes,
+  },
+  variant: {
+    type: 'list',
+    list: TagVariantTypes,
+  },
+  size: {
+    type: 'list',
+    list: TagSizeTypes,
+  },
+  round: {
+    type: 'string',
+    default: 'pill'
+  },
+  closable: {
+    type: 'boolean',
+    default: false,
+  },
+} satisfies Record<string, DocDemoSchema>;
+
+export const template: DocDemoTemplate<typeof schema> = (_props) => {
+  return `
+    <OTag ${propsToAttrStr(_props)}>Tag2</OTag>
+    <OTag ${propsToAttrStr(_props)}>
+      <template #icon><OIconAdd /></template>
+      Icon Tag
+    </OTag>
+  `;
+};
diff --git a/packages/opendesign/src/tag/__docs__/index.en-US.md b/packages/opendesign/src/tag/__docs__/index.en-US.md
new file mode 100644
index 0000000000000000000000000000000000000000..63bbad79b6bf4c851bf8f3c44cf6fdf5c5409965
--- /dev/null
+++ b/packages/opendesign/src/tag/__docs__/index.en-US.md
@@ -0,0 +1,22 @@
+---
+sidebar: OTag
+---
+
+# tag
+
+## Usage
+
+<!-- @usage tagUsage -->
+
+## Cases
+
+<!-- @case TagBasic -->
+<!-- @case TagClosable -->
+<!-- @case TagColor -->
+<!-- @case TagOutline -->
+<!-- @case TagRound -->
+<!-- @case TagSize -->
+
+## Api
+
+<!-- @api OTag -->
\ No newline at end of file
diff --git a/packages/opendesign/src/tag/__docs__/index.zh-CN.md b/packages/opendesign/src/tag/__docs__/index.zh-CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..03ec071f04ffb8e24e8fef4d2e367d1af64f9a56
--- /dev/null
+++ b/packages/opendesign/src/tag/__docs__/index.zh-CN.md
@@ -0,0 +1,22 @@
+---
+sidebar: OTag 标签
+---
+
+# 标签
+
+## 使用
+
+<!-- @usage tagUsage -->
+
+## 示例
+
+<!-- @case TagBasic -->
+<!-- @case TagClosable -->
+<!-- @case TagColor -->
+<!-- @case TagOutline -->
+<!-- @case TagRound -->
+<!-- @case TagSize -->
+
+## Api
+
+<!-- @api OTag -->
\ No newline at end of file