close

    Badge

    Компонент Badge используется для отображения небольшого встроенного бейджа.

    Использование

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

<Badge text="НОВИНКА" type="info" />
    НОВИНКА

    Типы

    Компонент Badge поддерживает четыре типа, каждый из которых имеет свой цвет:

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

<Badge text="совет" type="tip" />
<Badge text="информация" type="info" />
<Badge text="предупреждение" type="warning" />
<Badge text="опасность" type="danger" />

    Стиль с обводкой

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

<Badge text="совет" type="tip" outline />
<Badge text="информация" type="info" outline />
<Badge text="предупреждение" type="warning" outline />
<Badge text="опасность" type="danger" outline />

    Пользовательский контент

    Вы можете использовать проп children, чтобы рендерить пользовательский контент внутри бейджа:

    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>

    Встраивание в текст

    Бейдж можно использовать встроенным в текст:

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

Встроенный в текст <Badge text="Новинка" />

    Встраивание в заголовок

    Бейдж можно использовать в заголовках:

    ##### Заголовок H5 <Badge text="Информация" type="info" />

#### Заголовок H4 <Badge text="Предупреждение" type="warning" />

### Заголовок H3 <Badge text="Опасность" type="danger" />
    Заголовок H5 Информация

    Заголовок H4 Предупреждение

    Заголовок H3 Опасность

    Пропсы

    interface BadgeProps {
  /**
   * Содержимое, отображаемое внутри бейджа. Может быть строкой или React-узлами.
   */
  children?: React.ReactNode;
  /**
   * Тип бейджа, определяющий его цвет и стиль.
   * @default 'tip'
   */
  type?: 'tip' | 'info' | 'warning' | 'danger';
  /**
   * Текстовое содержимое для отображения внутри бейджа (для обратной совместимости).
   */
  text?: string;
  /**
   * Отображать ли бейдж в стиле с обводкой.
   * @default false
   */
  outline?: boolean;
}