🚧 Rspress 2.0 文档还在开发中
close
Rspress
  • 中文

      • Badge

      Badge 组件用于显示一个小型的内联徽章。

      使用方法

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

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

      类型

      Badge 组件支持四种类型，每种类型有不同的颜色：

      轮廓样式

      自定义内容

      你可以使用 children 属性在徽章内渲染自定义内容：

      与文本内联

      Badge 可以与文本内联使用：

      在标题中使用

      Badge 可以在标题中使用：

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

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

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

      H4 标题 Warning

      H3 标题 Danger

      Props

      interface BadgeProps {
  /**
   * 徽章内显示的内容。可以是字符串或 React 节点。
   */
  children?: React.ReactNode;
  /**
   * 徽章的类型，决定其颜色和样式。
   * @default 'tip'
   */
  type?: 'tip' | 'info' | 'warning' | 'danger';
  /**
   * 徽章内显示的文本内容（用于向后兼容）。
   */
  text?: string;
  /**
   * 是否使用轮廓样式显示徽章。
   * @default false
   */
  outline?: boolean;
}