🚧 Rspress 2.0 document is under development
close
Rspress
  • English

      • Badge ejectable

      The Badge component is used to display a small inline badge.

      Usage

      index.mdx
      import { Badge } from '@theme';

<Badge text="NEW" type="info" />
      NEW

      Types

      The Badge component supports four types, each with a different color:

      Outline style

      Custom children

      You can use the children prop to render custom content inside the badge:

      Inline with text

      Badge can be used inline with text:

      In headings

      Badge can be used in headings:

      ##### H5 Heading <Badge text="Info" type="info" />

#### H4 Heading <Badge text="Warning" type="warning" />

### H3 Heading <Badge text="Danger" type="danger" />
      H5 Heading Info

      H4 Heading Warning

      H3 Heading Danger

      Props

      interface BadgeProps {
  /**
   * The content to display inside the badge. Can be a string or React nodes.
   */
  children?: React.ReactNode;
  /**
   * The type of badge, which determines its color and style.
   * @default 'tip'
   */
  type?: 'tip' | 'info' | 'warning' | 'danger';
  /**
   * The text content to display inside the badge (for backwards compatibility).
   */
  text?: string;
  /**
   * Whether to display the badge with an outline style.
   * @default false
   */
  outline?: boolean;
}