> For AI agents: the complete documentation index is available at https://rspress.rs/zh/llms.txt, the full documentation bundle is available at https://rspress.rs/zh/llms-full.txt.

# Tag

Tag 组件用于在 **侧边栏或导航栏** 中进行 UI 信息展示。它支持多种格式，包括常用标签、SVG 图标、图片和纯文本。

## 使用方法

通过 [frontmatter](https://rspress.rs/zh/guide/use-mdx/frontmatter.md) 使用，之后在侧边栏或者导航栏会进行对应展示：

```mdx title="foo.mdx"
---
tag: new
---

# Foo

some text
```

new
同时支持多个标签，通过 `,` 进行分割：

```mdx
---
tag: new, experimental
---
```


newexperimental

也可通过 `_meta.json` 使用，例如：

```json title="_meta.json"
[
  {
    "name": "foo",
    "type": "file",
    "tag": "new, experimental"
  }
]
```

:::tip

**侧边栏或导航栏** 的 UI 展示主要通过 Tag 组件作为入口。除此之外，右侧用于显示各级标题的 **目录栏** 功能更加丰富，支持任何 React 组件。

```mdx title="index.mdx"
# Foo

### Bar <MyComponent />
```

:::

## Tag 种类

为确保 frontmatter 中传值方便，Tag 组件支持以下多种标签类型：

### 常用标签 new
该组件内置了一些常用标签，会配合 `<Badge />` 进行展示，全部常用标签如下：

| tag            | 对应的 Badge UI 显示            |
| -------------- | -------------------------- |
| `new`          | <Tag tag="new" />          |
| `experimental` | <Tag tag="experimental" /> |
| `deprecated`   | <Tag tag="deprecated" />   |
| `updated`      | <Tag tag="updated" />      |

:::tip 扩充常用标签

Tag 组件是 ejectable 的，当你想扩充常用标签时，可使用 wrap/eject 来对 Tag 组件进行修改，tag 的值会作为 props 传递给 Tag 组件。

以下是一个本站通过 wrap 增加 `theme-only` 自定义标签的使用示例：

```tsx title="theme/components/Tag/index.tsx"
import {
  Badge as BasicBadge,
  Tag as BasicTag,
} from '@rspress/core/theme-original';

export const Tag = ({ tag }: { tag: string }) => {
  if (tag === 'theme-only') {
    return <BasicBadge text="theme-only" type="warning" />;
  }
  return <BasicTag tag={tag} />;
};
```

```mdx title="index.mdx"
---
tag: new, theme-only
---
```

:::

### SVG 字符串

你可以直接传递 SVG 字符串作为标签：

```mdx
---
tag: <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2L2 7l10 5 10-5-10-5z"/></svg>
---
```

### 图片 URL

你可以使用外部 URL、data URL 或 public 目录路径作为标签：

```mdx
---
tag: https://example.com/icon.png
---
```

```mdx
---
tag: data:image/svg+xml;base64,...
---
```

```mdx
---
tag: /icons/status.svg
---
```

### 纯文本

任何不匹配上述模式的文本都会显示为纯文本 Badge：

```tsx
import { Tag } from '@rspress/core/theme';

<Tag tag="v1.0.0" />
<Tag tag="Beta" />
```


v1.0.0Beta

## Props

```ts
interface TagProps {
  /**
   * 标签内容。支持：
   * - 常用标签：'new'、'experimental'、'deprecated'、'updated'
   * - 多个常用标签：'new, experimental'
   * - SVG 字符串：'<svg>...</svg>'
   * - 图片 URL：'https://...'、'data:...' 或 '/icons/status.svg'
   * - 纯文本：任意其他字符串
   */
  tag?: string;
}
```