close
Rspress
  • 中文

      • Badge

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

      使用方法

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

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

      类型

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

      tip info warning danger
      index.mdx
      import { Badge } from '@rspress/core/theme';

<Badge text="tip" type="tip" />
<Badge text="info" type="info" />
<Badge text="warning" type="warning" />
<Badge text="danger" type="danger" />

      轮廓样式

      tip info warning danger
      index.mdx
      import { Badge } from '@rspress/core/theme';

<Badge text="tip" type="tip" outline />
<Badge text="info" type="info" outline />
<Badge text="warning" type="warning" outline />
<Badge text="danger" type="danger" outline />

      自定义内容

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

      Rspress 搜索
      index.mdx
      import { Badge, IconSearch, SvgWrapper } from '@rspress/core/theme';

<Badge type="tip">
  <img
    style={{ height: '18px' }}
    src="https://assets.rspack.rs/rspress/rspress-logo.svg"
  />
  <span>Rspress</span>
</Badge>

<Badge type="info">
  <SvgWrapper icon={IconSearch} />
  <span>搜索</span>
</Badge>

      与文本内联

      Badge 可以与文本内联使用：

      与文本内联 New

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

与文本内联 <Badge text="New" />

      在标题中使用

      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;
}