PromoTag
Компактный цветной тег для маркетинговых подписей (NEW, SALE, BETA), категорий и акцентных меток. По умолчанию — <div>; при onClick — <button>; при as='a' или as={Link} — ссылка с пробросом href / to.
Демо
Promo tag
Prop
Type
Value
appearanceneutral | primary | red | orange | yellow | green | blue | violet | pink
data-test-idtext
labeltext
roleAppearanceaccent | decor
sizexs | s | m
Code
<PromoTag appearance="primary" roleAppearance="accent" size="xs" label="Promo tag" />Когда использовать
- Пометка карточки товара/услуги — новинка, скидка, хит.
- Цветовая категоризация в списках (темы, теги статей).
- Статусная метка, которая не несёт функциональной семантики (для статусов берите
Status).
Когда не нужен: интерактивные chip’ы с удалением — берите Chip/Tag; функциональные статусы — берите Status.
Анатомия
Appearance
Цветовая палитра: primary — брендовый акцент, neutral — без окраски; red, orange, yellow, green, blue, violet, pink — декоративные категории.
Size
xs — плотные ленты/карточки; s — дефолт; m — для крупных промо-блоков.
Role appearance (default accent)
Роль, в которой применяется выбранный appearance:
accent— насыщенная заливка, для главных меток (новинка, sale).decor— мягкая декоративная подложка, для категоризации и тегов.
Установка
pnpm add @cloud-ru/ds-promo-tagimport { PromoTag } from '@cloud-ru/ds-promo-tag'Примеры использования
Базовый тег
NEW
tsx
import { PromoTag } from '@cloud-ru/ds-promo-tag';
export function Basic() {
return <PromoTag label='NEW' appearance='primary' roleAppearance='accent' />;
}Палитра
Primary
Green
Red
Violet
tsx
import { PromoTag } from '@cloud-ru/ds-promo-tag';
export function Colors() {
return (
<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
<PromoTag label='Primary' appearance='primary' />
<PromoTag label='Green' appearance='green' />
<PromoTag label='Red' appearance='red' />
<PromoTag label='Violet' appearance='violet' />
</div>
);
}Кликабельный тег
tsx
import { PromoTag } from '@cloud-ru/ds-promo-tag';
import { useState } from 'react';
export function Clickable() {
const [clicked, setClicked] = useState(false);
return <PromoTag label={clicked ? 'Нажато' : 'Кликабельный'} appearance='blue' onClick={() => setClicked(true)} />;
}Polymorphic
tsx
import { APPEARANCE, PromoTag, ROLE_APPEARANCE } from '@cloud-ru/ds-promo-tag';
import { ComponentPropsWithoutRef, forwardRef } from 'react';
type MockLinkProps = Omit<ComponentPropsWithoutRef<'a'>, 'href'> & { to: string };
const MockLink = forwardRef<HTMLAnchorElement, MockLinkProps>(({ to, onClick, children, ...rest }, ref) => (
<a ref={ref} href={to} onClick={onClick} {...rest}>
{children}
</a>
));
MockLink.displayName = 'MockLink';
export function Polymorphic() {
return (
<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
<PromoTag
as='a'
href='https://example.com'
target='_blank'
label='External promo'
appearance={APPEARANCE.Blue}
roleAppearance={ROLE_APPEARANCE.Decor}
/>
<PromoTag
as={MockLink}
to='https://example.com'
label='Preview link'
appearance={APPEARANCE.Primary}
roleAppearance={ROLE_APPEARANCE.Accent}
/>
</div>
);
}Props
Types
Props
PromoTagProps| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
afterContent | ReactNode | null | no | Контент после текста |
appearance | "blue" | "green" | "neutral" | "orange" | "pink" | "primary" | "red" | "violet" | "yellow" | primary | no | Внешний вид |
as | ElementType | — | no | Элемент или компонент для рендера: 'button' | 'a' | Link из react-router-dom и т.п. |
beforeContent | ReactNode | null | no | Контент перед текстом |
className | string | — | no | CSS-класс |
data-test-id | string | — | no | |
innerRef | any | — | no | Ref на реальный DOM-элемент/инстанс, который рендерится через `as`. Явный проп вместо forwardRef — как в Button и AiToolBadge. |
label | string | — | no | Текст компонента |
onClick | MouseEventHandler<HTMLElement> | — | no | Колбэк для обработки клика на тег |
roleAppearance | "accent" | "decor" | accent | no | Роль, в которой применяется `appearance`: акцентная заливка или декоративная |
size | "m" | "s" | "xs" | s | no | Размер |