TagRow

Обёртка для нескольких Tag подряд. Принимает массив items и опционально ограничивает видимые метки по количеству строк с кнопкой «+N ещё» для раскрытия.

Демо

Когда использовать

• Для группы тегов записи в карточке списка (обычно 3–8 штук).
• Для выбранных фильтров, которые занимают больше одной строки.
• Везде, где количество меток может превышать доступную ширину.

Анатомия

Size

Применяется ко всем тегам в ряду: xs, s, m. Наследуется вложенными Tag.

Appearance

Цветовая тема всех тегов в ряду: neutral, primary, red, orange, yellow, green, blue, violet, pink.

Установка

pnpm add @cloud-ru/ds-tag

import { TagRow } from '@cloud-ru/ds-tag'

Примеры использования

Ограничение по строкам

import { TagRow } from '@cloud-ru/ds-tag';

export function RowTruncated() {
  return (
    <TagRow
      rowLimit={1}
      items={[
        { id: '1', label: 'Frontend', appearance: 'blue' },
        { id: '2', label: 'Backend', appearance: 'green' },
        { id: '3', label: 'Design', appearance: 'violet' },
        { id: '4', label: 'DevOps', appearance: 'orange' },
        { id: '5', label: 'Data', appearance: 'yellow' },
      ]}
    />
  );
}

Props

Storybook

Figma