diff --git a/examples/sites/demos/mobile/app/tag/style.vue b/examples/sites/demos/mobile/app/tag/style.vue
new file mode 100644
index 000000000..fd96dea92
--- /dev/null
+++ b/examples/sites/demos/mobile/app/tag/style.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="tiny-tag-demo">
+    <tiny-tag color="default" text="" type="round" cycleColor="#ff2956"> 默认 </tiny-tag>
+    <tiny-tag color="default" text="红色" type="round" />
+    <tiny-tag color="default" text="蓝色" type="round"> </tiny-tag>
+    <tiny-tag color="default" text="黄色" type="round"> </tiny-tag>
+    <tiny-tag color="default" text="绿色" type="round"> </tiny-tag>
+  </div>
+</template>
+
+<script>
+import { Tag } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTag: Tag
+  }
+}
+</script>
+
+<style>
+.tiny-tag-demo {
+  padding: 10px;
+}
+
+.tiny-mobile-tag {
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+</style>
diff --git a/examples/sites/demos/mobile/app/tag/webdoc/tag.js b/examples/sites/demos/mobile/app/tag/webdoc/tag.js
index 248b692a8..7d1a49d81 100644
--- a/examples/sites/demos/mobile/app/tag/webdoc/tag.js
+++ b/examples/sites/demos/mobile/app/tag/webdoc/tag.js
@@ -49,6 +49,18 @@ export default {
         'en-US': 'Mini'
       },
       codeFiles: ['mini.vue']
+    },
+    {
+      demoId: 'style',
+      name: {
+        'zh-CN': '样式',
+        'en-US': 'style'
+      },
+      desc: {
+        'zh-CN': '样式',
+        'en-US': 'style'
+      },
+      codeFiles: ['style.vue']
     }
   ]
 }
diff --git a/packages/renderless/src/tag/vue.ts b/packages/renderless/src/tag/vue.ts
index d2627110f..9c55936ad 100644
--- a/packages/renderless/src/tag/vue.ts
+++ b/packages/renderless/src/tag/vue.ts
@@ -26,7 +26,8 @@ export const renderless = (
     mini: props.mini,
     color: props.color,
     text: props.text,
-    maxWidth: props.maxWidth
+    maxWidth: props.maxWidth,
+    cycleColor: props.cycleColor
   })
 
   const api: ITagApi = {
diff --git a/packages/renderless/types/tag.type.ts b/packages/renderless/types/tag.type.ts
index 08d70582b..a85b63ce7 100644
--- a/packages/renderless/types/tag.type.ts
+++ b/packages/renderless/types/tag.type.ts
@@ -10,6 +10,7 @@ export interface ITagState {
   color: string
   mini: boolean
   maxWidth: string | number
+  cycleColor: string
 }
 
 export interface ITagApi {
diff --git a/packages/theme-mobile/src/tag/index.less b/packages/theme-mobile/src/tag/index.less
index 94246e348..33ae8f3fe 100644
--- a/packages/theme-mobile/src/tag/index.less
+++ b/packages/theme-mobile/src/tag/index.less
@@ -30,6 +30,20 @@
   overflow: hidden;
   text-overflow: ellipsis;
 
+  &-round {
+    background-color: white !important;
+
+    &-cycle {
+      display: inline-block;
+      line-height: 100%;
+      background-color: var(--ti-mobile-tag-color-default);
+      border-radius: 4px;
+      width: 8px;
+      height: 8px;
+      margin-right: 4px;
+    }
+  }
+
   &-mini {
     line-height: var(--ti-mobile-tag-height-mini);
     padding: 0 var(--ti-mobile-tag-padding-mini);
diff --git a/packages/vue/src/tag/src/index.ts b/packages/vue/src/tag/src/index.ts
index 89169679c..5cd6a535b 100644
--- a/packages/vue/src/tag/src/index.ts
+++ b/packages/vue/src/tag/src/index.ts
@@ -44,7 +44,8 @@ export const tagProps = {
   maxWidth: {
     type: [String, Number],
     default: null
-  }
+  },
+  cycleColor: String
 }
 
 export default defineComponent({
diff --git a/packages/vue/src/tag/src/mobile.vue b/packages/vue/src/tag/src/mobile.vue
index 937459cea..16fd3793e 100644
--- a/packages/vue/src/tag/src/mobile.vue
+++ b/packages/vue/src/tag/src/mobile.vue
@@ -12,9 +12,19 @@
 
 <template>
   <div
-    :class="['tiny-mobile-tag', 'tiny-mobile-tag-' + state.color, state.mini ? 'tiny-mobile-tag-mini' : null]"
+    :class="[
+      'tiny-mobile-tag',
+      'tiny-mobile-tag-' + state.color,
+      state.mini ? 'tiny-mobile-tag-mini' : null,
+      state.type === 'round' ? `tiny-mobile-tag-round` : null
+    ]"
     :style="{ maxWidth: state.maxWidth ? `${state.maxWidth}px` : null }"
   >
+    <div
+      v-if="state.type === 'round'"
+      class="tiny-mobile-tag-round-cycle"
+      :style="{ backgroundColor: state.cycleColor }"
+    ></div>
     <slot>{{ state.text }}</slot>
   </div>
 </template>
@@ -27,7 +37,7 @@ import '@opentiny/vue-theme-mobile/tag/index.less'
 
 export default defineComponent({
   emits: ['click', 'close'],
-  props: [...props, 'text', 'color', 'width', 'mini', 'maxWidth'],
+  props: [...props, 'text', 'color', 'width', 'mini', 'maxWidth', 'type', 'cycleColor'],
   setup(props, context) {
     return setup({ props, context, renderless, api, h }) as unknown as ITagApi
   }