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

# Tag

The Tag component displays labels in the **sidebar or navbar**. It supports multiple formats, including common tags, SVG icons, images, and plain text.

## Usage

Add it through [frontmatter](https://rspress.rs/guide/use-mdx/frontmatter.md) to display it in the sidebar or navbar:

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

# Foo

some text
```

new
Multiple tags are supported, separated by `,`:

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


newexperimental

You can also use it in `_meta.json`. For example:

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

:::tip

The **sidebar** and **navbar** use the Tag component as the entry point for label rendering. The right-side **outline** is more flexible and supports any React component inside headings.

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

### Bar <MyComponent />
```

:::

## Tag types

To keep frontmatter values convenient, the Tag component supports the following tag types:

### Common tags new
The component has built-in common tags that display with `<Badge />`. All common tags are:

| tag            | Corresponding Badge UI     |
| -------------- | -------------------------- |
| `new`          | <Tag tag="new" />          |
| `experimental` | <Tag tag="experimental" /> |
| `deprecated`   | <Tag tag="deprecated" />   |
| `updated`      | <Tag tag="updated" />      |

:::tip Extending Common Tags

The Tag component is ejectable. When you want to extend common tags, you can use wrap/eject to modify the Tag component. The tag value is passed as props to the Tag component.

Here's an example from this site adding a custom `theme-only` tag through wrap:

```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 string

You can pass an SVG string directly as a tag:

```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>
---
```

### Image URL

You can use an external URL, data URL, or public folder path as a tag:

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

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

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

### Plain text

Any text that doesn't match the above patterns will be displayed as a plain text Badge:

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

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


v1.0.0Beta

## Props

```ts
interface TagProps {
  /**
   * Tag content. Supports:
   * - Common tags: 'new', 'experimental', 'deprecated', 'updated'
   * - Multiple common tags: 'new, experimental'
   * - SVG string: '<svg>...</svg>'
   * - Image URL: 'https://...', 'data:...', or '/icons/status.svg'
   * - Plain text: any other string
   */
  tag?: string;
}
```