AiToolBadge
Бейдж-пилюля ресурса со встроенной иконкой и текстом. Полиморфен через as — например as='a' для ссылки на ресурс.
Когда использовать
- Отметка ресурса, к которому обращается инструмент (проект, сервис, документ).
- Кликабельная ссылка на ресурс (
as='a').
Анатомия
BadgeType (default other)
cloud-ru— логотип Cloud.ru.other— нейтральный ромб.
Установка
pnpm add @cloud-ru/ds-ai-toolimport { AiToolBadge } from '@cloud-ru/ds-ai-tool'Примеры использования
Бейджи ресурсов
tsx
import { AI_TOOL_BADGE_TYPE, AiToolBadge } from '@cloud-ru/ds-ai-tool';
export function Badges() {
return (
<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
<AiToolBadge badgeType={AI_TOOL_BADGE_TYPE.CloudRu} label='my-vm-instance' />
<AiToolBadge badgeType={AI_TOOL_BADGE_TYPE.Other} label='external-resource' />
<AiToolBadge as='a' href='#' badgeType={AI_TOOL_BADGE_TYPE.CloudRu} label='link-resource' />
</div>
);
}Props
Types
Props
AiToolBadgeProps| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
as | ElementType | — | no | Полиморфный тег корня (`'a'` для ссылки и т.д.). По умолчанию `'span'`. |
badgeType | "cloud-ru" | "other" | — | no | Тип бейджа — определяет встроенную иконку (`cloud-ru` / `other`). Без него иконка не рендерится. |
className | string | — | no | Доп. класс корня. |
data-test-id | string | ai-tool-badge | no | |
innerRef | any | — | no | Ref на корневой элемент (вместо `forwardRef`). |
label | ReactNode | — | no | Текст бейджа (одна строка с ellipsis). |