close
Rspress
  • English

      • Tag new

      Warning

      This component is mainly used in conjunction with wrap/eject in Custom Theme , and is different from components that are directly imported in MDX. You can modify the styles and functions by passing component props or directly overriding the component. If you override the entire component through eject, please note that the reading of the corresponding configuration options of the component will become invalid and you need to control it yourself.

      The Tag component is used for UI display in the sidebar or navbar. It supports multiple formats including common tags, SVG icons, images, and plain text.

      Usage

      Use through frontmatter, and it will be displayed in the sidebar or navbar:

      foo.mdx
      ---
tag: new
---

# Foo

some text
      new

      Multiple tags are supported, separated by ,:

      ---
tag: new, experimental
---
      newexperimental

      Can also be used in _meta.json, for example:

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

      UI display in the sidebar or navbar mainly uses the Tag component as entry point. Additionally, the outline bar on the right side for displaying headings is more flexible and supports any React component.

      index.mdx
      # Foo

### Bar <MyComponent />

      Tag types

      To make passing values in frontmatter 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:

      tagCorresponding Badge UI
      tiptip
      infoinfo
      warningwarning
      dangerdanger
      newnew
      experimentalexperimental
      deprecateddeprecated
      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 eject-only tag through wrap:

      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 === 'eject-only') {
    return <BasicBadge text="eject-only" type="warning" />;
  }
  return <BasicTag tag={tag} />;
};
      index.mdx
      ---
tag: new, eject-only
---

      SVG string

      You can pass an SVG string directly as a tag:

      ---
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 or data URL as a tag:

      ---
tag: https://example.com/icon.png
---
      ---
tag: data:image/svg+xml;base64,...
---

      Plain text

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

      import { Tag } from '@theme';

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

      Props

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