wangdicoder · wangdicoder · Mar 27, 2026 · Mar 27, 2026
diff --git a/.changeset/feat-tag-variant.md b/.changeset/feat-tag-variant.md
@@ -0,0 +1,5 @@
+---
+"@tiny-design/react": minor
+---
+
+feat(tag): add `variant` prop with `filled`, `soft`, `solid`, and `outlined` styles
diff --git a/apps/docs/src/routers.tsx b/apps/docs/src/routers.tsx
@@ -171,8 +171,8 @@ export const getGuideMenu = (s: SiteLocale): RouterItem[] => {
     {
       title: s.guideMenu.groups.ai,
       children: [
-        { title: s.guideMenu.mcpServer, route: 'mcp-server', component: pick(guide.mcpServer, isZh), tag: <Tag color="info">New</Tag> },
-        { title: s.guideMenu.cli, route: 'cli', component: pick(guide.cli, isZh), tag: <Tag color="info">New</Tag> },
+        { title: s.guideMenu.mcpServer, route: 'mcp-server', component: pick(guide.mcpServer, isZh), tag: <Tag variant='soft' color="info">New</Tag> },
+        { title: s.guideMenu.cli, route: 'cli', component: pick(guide.cli, isZh), tag: <Tag variant='soft' color="info">New</Tag> },
       ],
     },
     {
@@ -257,7 +257,7 @@ export const getComponentMenu = (s: SiteLocale): RouterItem[] => {
         { title: 'Timeline', route: 'timeline', component: pick(c.timeline, z) },
         { title: 'Tooltip', route: 'tooltip', component: pick(c.tooltip, z) },
         { title: 'Tree', route: 'tree', component: pick(c.tree, z) },
-        { title: 'Chart', route: 'chart', component: pick(c.chart, z), tag: <Tag color="info">New</Tag> },
+        { title: 'Chart', route: 'chart', component: pick(c.chart, z), tag: <Tag variant='soft' color="info">New</Tag> },
       ],
     },
     {

diff --git a/packages/react/src/tag/__tests__/tag.test.tsx b/packages/react/src/tag/__tests__/tag.test.tsx
@@ -37,4 +37,36 @@ describe('<Tag />', () => {
     container.firstChild && fireEvent.click(container.firstChild);
     expect(fn).toHaveBeenCalledTimes(1);
   });
+
+  // Variant tests
+  it('should apply filled variant class by default for preset color', () => {
+    const { container } = render(<Tag color="blue">Blue</Tag>);
+    expect(container.firstChild).toHaveClass('ty-tag_blue');
+    expect(container.firstChild).not.toHaveClass('ty-tag_blue-solid');
+    expect(container.firstChild).not.toHaveClass('ty-tag_blue-outlined');
+  });
+
+  it('should apply solid variant class', () => {
+    const { container } = render(<Tag color="blue" variant="solid">Blue</Tag>);
+    expect(container.firstChild).toHaveClass('ty-tag_blue-solid');
+    expect(container.firstChild).not.toHaveClass('ty-tag_blue');
+  });
+
+  it('should apply soft variant class', () => {
+    const { container } = render(<Tag color="blue" variant="soft">Blue</Tag>);
+    expect(container.firstChild).toHaveClass('ty-tag_blue-soft');
+    expect(container.firstChild).not.toHaveClass('ty-tag_blue');
+  });
+
+  it('should apply outlined variant class', () => {
+    const { container } = render(<Tag color="blue" variant="outlined">Blue</Tag>);
+    expect(container.firstChild).toHaveClass('ty-tag_blue-outlined');
+    expect(container.firstChild).not.toHaveClass('ty-tag_blue');
+  });
+
+  it('should not apply variant class without color', () => {
+    const { container } = render(<Tag variant="solid">Tag</Tag>);
+    expect(container.firstChild).toHaveClass('ty-tag');
+    expect(container.firstChild).not.toHaveClass('ty-tag_solid');
+  });
 });
diff --git a/packages/react/src/tag/demo/Variant.tsx b/packages/react/src/tag/demo/Variant.tsx
@@ -0,0 +1,65 @@
+import { Tag, Typography } from '@tiny-design/react';
+
+const colors = ['blue', 'green', 'orange', 'red', 'purple'] as const;
+const statusColors = ['success', 'warning', 'info', 'danger'] as const;
+
+export default function VariantDemo() {
+  return (
+    <>
+      <Typography.Heading level={6} style={{ marginBottom: 16 }}>
+        Filled (default):
+      </Typography.Heading>
+      <div>
+        {colors.map((color) => (
+          <Tag key={color} color={color}>{color}</Tag>
+        ))}
+      </div>
+
+      <Typography.Heading level={6} style={{ margin: '16px 0' }}>
+        Soft:
+      </Typography.Heading>
+      <div>
+        {colors.map((color) => (
+          <Tag key={color} color={color} variant="soft">{color}</Tag>
+        ))}
+      </div>
+
+      <Typography.Heading level={6} style={{ margin: '16px 0' }}>
+        Solid:
+      </Typography.Heading>
+      <div>
+        {colors.map((color) => (
+          <Tag key={color} color={color} variant="solid">{color}</Tag>
+        ))}
+      </div>
+
+      <Typography.Heading level={6} style={{ margin: '16px 0' }}>
+        Outlined:
+      </Typography.Heading>
+      <div>
+        {colors.map((color) => (
+          <Tag key={color} color={color} variant="outlined">{color}</Tag>
+        ))}
+      </div>
+
+      <Typography.Heading level={6} style={{ margin: '16px 0' }}>
+        Status (solid):
+      </Typography.Heading>
+      <div>
+        {statusColors.map((color) => (
+          <Tag key={color} color={color} variant="solid">{color}</Tag>
+        ))}
+      </div>
+
+      <Typography.Heading level={6} style={{ margin: '16px 0' }}>
+        Custom color variants:
+      </Typography.Heading>
+      <div>
+        <Tag color="#1677ff">filled</Tag>
+        <Tag color="#1677ff" variant="soft">soft</Tag>
+        <Tag color="#1677ff" variant="solid">solid</Tag>
+        <Tag color="#1677ff" variant="outlined">outlined</Tag>
+      </div>
+    </>
+  );
+}
diff --git a/packages/react/src/tag/index.md b/packages/react/src/tag/index.md
@@ -10,6 +10,8 @@ import DynamicDemo from './demo/Dynamic';
 import DynamicSource from './demo/Dynamic.tsx?raw';
 import StatusDemo from './demo/Status';
 import StatusSource from './demo/Status.tsx?raw';
+import VariantDemo from './demo/Variant';
+import VariantSource from './demo/Variant.tsx?raw';
 
 # Tag
 
@@ -59,17 +61,6 @@ Adding or removing a set of tags dynamically.
 
 <DemoBlock component={CheckableDemo} source={CheckableSource} />
 
-    </Demo>
-  </Column>
-  <Column>
-    <Demo>
-
-### Colorful Tag
-
-We preset a series of colorful tag styles for use in different situations. You can also set it to a hex color string for custom color.
-
-<DemoBlock component={ColorDemo} source={ColorSource} />
-
     </Demo>
     <Demo>
 
@@ -88,6 +79,26 @@ By using the `visible` prop, you can control the close state of Tag.
 
 <DemoBlock component={ControlledDemo} source={ControlledSource} />
 
+    </Demo>
+  </Column>
+  <Column>
+    <Demo>
+
+### Colorful Tag
+
+We preset a series of colorful tag styles for use in different situations. You can also set it to a hex color string for custom color.
+
+<DemoBlock component={ColorDemo} source={ColorSource} />
+
+    </Demo>
+    <Demo>
+
+### Variant
+
+Tags support four variants: `filled` (default), `soft`, `solid`, and `outlined`.
+
+<DemoBlock component={VariantDemo} source={VariantSource} />
+
     </Demo>
   </Column>
 </Layout>
@@ -96,16 +107,17 @@ By using the `visible` prop, you can control the close state of Tag.
 
 ### Tag
 
-| Property       | Description                                    | Type                           | Default |
-| -------------- | ---------------------------------------------- | ------------------------------ | ------- |
-| color          | color of the tag (preset or custom hex)        | string                         | -       |
-| closable       | whether the tag can be closed                  | boolean                        | false   |
-| defaultVisible | initial visibility                             | boolean                        | true    |
-| visible        | controlled visibility                          | boolean                        | -       |
-| onClose        | callback when tag is closed                    | (e: MouseEvent) => void        | -       |
-| onClick        | click callback                                 | (e: MouseEvent) => void        | -       |
-| style          | style object of container                      | CSSProperties                  | -       |
-| className      | className of container                         | string                         | -       |
+| Property       | Description                                    | Type                                    | Default   |
+| -------------- | ---------------------------------------------- | --------------------------------------- | --------- |
+| color          | color of the tag (preset or custom hex)        | string                                  | -         |
+| variant        | variant style of the tag                       | `'filled'` \| `'soft'` \| `'solid'` \| `'outlined'` | `'filled'` |
+| closable       | whether the tag can be closed                  | boolean                                 | false     |
+| defaultVisible | initial visibility                             | boolean                                 | true      |
+| visible        | controlled visibility                          | boolean                                 | -         |
+| onClose        | callback when tag is closed                    | (e: MouseEvent) => void                 | -         |
+| onClick        | click callback                                 | (e: MouseEvent) => void                 | -         |
+| style          | style object of container                      | CSSProperties                           | -         |
+| className      | className of container                         | string                                  | -         |
 
 Preset colors: `magenta`, `red`, `volcano`, `orange`, `gold`, `lime`, `green`, `cyan`, `blue`, `geekblue`, `purple`.
 

diff --git a/packages/react/src/tag/index.zh_CN.md b/packages/react/src/tag/index.zh_CN.md
@@ -10,6 +10,8 @@ import DynamicDemo from './demo/Dynamic';
 import DynamicSource from './demo/Dynamic.tsx?raw';
 import StatusDemo from './demo/Status';
 import StatusSource from './demo/Status.tsx?raw';
+import VariantDemo from './demo/Variant';
+import VariantSource from './demo/Variant.tsx?raw';
 
 # Tag
 
@@ -59,17 +61,6 @@ const { CheckableTag } = Tag;
 
 <DemoBlock component={CheckableDemo} source={CheckableSource} />
 
-    </Demo>
-  </Column>
-  <Column>
-    <Demo>
-
-### 多彩标签
-
-我们提供了一系列预设的彩色标签样式，适用于不同场景。你也可以自定义十六进制颜色值。
-
-<DemoBlock component={ColorDemo} source={ColorSource} />
-
     </Demo>
     <Demo>
 
@@ -88,6 +79,26 @@ const { CheckableTag } = Tag;
 
 <DemoBlock component={ControlledDemo} source={ControlledSource} />
 
+    </Demo>
+  </Column>
+  <Column>
+    <Demo>
+
+### 多彩标签
+
+我们提供了一系列预设的彩色标签样式，适用于不同场景。你也可以自定义十六进制颜色值。
+
+<DemoBlock component={ColorDemo} source={ColorSource} />
+
+    </Demo>
+    <Demo>
+
+### 变体
+
+标签支持四种变体样式：`filled`（默认）、`soft`、`solid` 和 `outlined`。
+
+<DemoBlock component={VariantDemo} source={VariantSource} />
+
     </Demo>
   </Column>
 </Layout>
@@ -96,16 +107,17 @@ const { CheckableTag } = Tag;
 
 ### Tag
 
-| 属性           | 说明                                           | 类型                           | 默认值  |
-| -------------- | ---------------------------------------------- | ------------------------------ | ------- |
-| color          | 标签颜色（预设颜色或自定义十六进制值）         | string                         | -       |
-| closable       | 标签是否可关闭                                 | boolean                        | false   |
-| defaultVisible | 初始显示状态                                   | boolean                        | true    |
-| visible        | 受控的显示状态                                 | boolean                        | -       |
-| onClose        | 关闭标签时的回调                               | (e: MouseEvent) => void        | -       |
-| onClick        | 点击回调                                       | (e: MouseEvent) => void        | -       |
-| style          | 容器样式对象                                   | CSSProperties                  | -       |
-| className      | 容器的 className                               | string                         | -       |
+| 属性           | 说明                                           | 类型                                                  | 默认值     |
+| -------------- | ---------------------------------------------- | ----------------------------------------------------- | ---------- |
+| color          | 标签颜色（预设颜色或自定义十六进制值）         | string                                                | -          |
+| variant        | 标签的变体样式                                 | `'filled'` \| `'soft'` \| `'solid'` \| `'outlined'`   | `'filled'` |
+| closable       | 标签是否可关闭                                 | boolean                                               | false      |
+| defaultVisible | 初始显示状态                                   | boolean                                               | true       |
+| visible        | 受控的显示状态                                 | boolean                                               | -          |
+| onClose        | 关闭标签时的回调                               | (e: MouseEvent) => void                               | -          |
+| onClick        | 点击回调                                       | (e: MouseEvent) => void                               | -          |
+| style          | 容器样式对象                                   | CSSProperties                                         | -          |
+| className      | 容器的 className                               | string                                                | -          |
 
 预设颜色：`magenta`、`red`、`volcano`、`orange`、`gold`、`lime`、`green`、`cyan`、`blue`、`geekblue`、`purple`。