#Tag new ejectable

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

#使用方法

通过 frontmatter 使用，之后在侧边栏或者导航栏会进行对应展示：

---
tag: new
---

# Foo

some text

同时支持多个标签：

---
tag: new, experimental
---

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

{
  "name": "foo",
  "type": "file",
  "tag": "new, experimental"
}

#Tag 种类

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

#常用标签 new

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

import {
  Badge as BasicBadge,
  Tag as BasicTag,
} from '@rspress/core/theme-original';

export const Tag = ({ tag }: { tag: string }) => {
  if (tag === 'ejectable') {
    return <BasicBadge text="ejectable" type="tip" />;
  }
  return <BasicTag tag={tag} />;
};

---
tag: new, ejectable
---

#SVG 字符串

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

---
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 作为标签：

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

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

#纯文本

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

import { Tag } from '@theme';

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

#Props

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