🚧 Rspress 2.0 document is under development
close
Rspress
  • English

      • Tag new ejectable

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

      Usage

      Use via frontmatter, and it will be displayed in the sidebar or navigation bar:

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

# Foo

some text
      new

      Multiple tags are also supported:

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

      You can also use it via _meta.json, for example:

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

      The Tag component is specifically designed for display in the sidebar or navigation bar. When using in MDX content, please use the Badge component instead.

      Tag types

      To make it easy to pass values in frontmatter, the Tag component supports multiple tag types:

      Common tags new

      Some common tags are built-in and will be displayed with <Badge />. All common tags are as follows:

      tagCorresponding Badge UI
      tiptip
      infoinfo
      warningwarning
      dangerdanger
      newnew
      experimentalexperimental
      deprecateddeprecated
      Tip

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

      The following is an example of how this docsite uses wrap to add ejectable custom tag:

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

      SVG string

      You can pass an SVG string directly as the 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 the 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 {
  /**
   * The 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;
}