@snack-uikit/tag

Tag

Installation

npm i @snack-uikit/tag

Changelog

Description

• Пакет @snack-uikit/tag предоставляет компоненты для отображения тегов — компактных меток с текстом, которые используются для категоризации, фильтрации и маркировки контента.
• Компоненты поддерживают различные визуальные варианты (appearance) и размеры, могут работать как обычные теги или ссылки, поддерживают удаление и отображение тултипов.
• Пакет включает два основных компонента: Tag для одиночных тегов и TagRow для отображения коллекций тегов с возможностью ограничения количества видимых элементов.

Tag

Description

• Tag — компонент для отображения одиночного тега с текстовой меткой.
• Поддерживает два размера (xs, s) и девять вариантов внешнего вида (neutral, primary, red, orange, yellow, green, blue, violet, pink) для визуального выделения и категоризации.
• Может работать в трёх режимах: обычный тег, тег с возможностью удаления (при передаче onDelete) и тег-ссылка (при передаче href).
• Поддерживает тултип (tooltip) для отображения дополнительной информации при наведении.
• В режиме ссылки позволяет задать обработчик клика (onClick) и атрибут target для управления поведением навигации.
• Figma: Tag.

Example

import { Tag } from '@snack-uikit/tag';

function Example() {
  return (
    <>
      <Tag
        label="Обычный тег"
        size="xs"
        appearance="primary"
      />
      
      <Tag
        label="Удаляемый тег"
        size="s"
        appearance="green"
        onDelete={() => console.log('Tag deleted')}
      />
      
      <Tag
        label="Тег-ссылка"
        size="xs"
        appearance="blue"
        href="https://example.com"
        target="_blank"
        tooltip={{
          tip: 'Перейти на страницу',
          placement: 'bottom',
        }}
      />
    </>
  );
}

TagRow

Description

• TagRow — компонент для отображения коллекции тегов в виде строки или нескольких строк с автоматическим переносом.
• Позволяет ограничить количество видимых строк через проп rowLimit: при превышении лимита оставшиеся теги скрываются под кнопкой "More" с указанием количества скрытых элементов.
• При наведении на кнопку "More" отображается выпадающий список со всеми скрытыми тегами.
• Поддерживает удаление тегов через коллбэк onItemRemove, который вызывается при клике на кнопку удаления любого тега в коллекции.
• Каждый тег в коллекции может иметь свой внешний вид (appearance), размер задаётся единообразно для всех тегов через проп size.
• Позволяет настроить текст кнопки "More" через проп moreButtonLabel.
• Если rowLimit не задан или равен 0, отображаются все теги без ограничений.
• Figma: TagRow.

Example

import { TagRow } from '@snack-uikit/tag';

function Example() {
  const tags = [
    { label: 'Тег 1', appearance: 'primary' },
    { label: 'Тег 2', appearance: 'green' },
    { label: 'Тег 3', appearance: 'red' },
    { label: 'Тег 4', appearance: 'blue' },
    { label: 'Тег 5', appearance: 'violet' },
  ];

  return (
    <TagRow
      items={tags}
      size="xs"
      rowLimit={2}
      moreButtonLabel="Ещё: "
      onItemRemove={(label) => console.log(`Removed: ${label}`)}
    />
  );
}

isTagLinkProps

Props

name	type	default value	description
href*	string	-
label*	string	-	Текст
onDelete	MouseEventHandler<HTMLButtonElement>	-	Коллбэк на удаление
size	enum Size: "xs", "s"	-	Размер
appearance	enum Appearance: "neutral", "primary", "red", "orange", "yellow", "green", "blue", "violet", "pink"	-	Внешний вид
className	string	-	CSS-класс
tabIndex	number	-	tabIndex кнопки удаления
onClick	(e: MouseEvent<HTMLAnchorElement, MouseEvent>) => void	-
target	string	-
tooltip	TooltipProps	-	Тултип над тегом

Tag

Props

name	type	default value	description
href*	string	-
label*	string	-	Текст
onDelete	MouseEventHandler<HTMLButtonElement>	-	Коллбэк на удаление
size	enum Size: "xs", "s"	-	Размер
appearance	enum Appearance: "neutral", "primary", "red", "orange", "yellow", "green", "blue", "violet", "pink"	-	Внешний вид
className	string	-	CSS-класс
tabIndex	number	-	tabIndex кнопки удаления
onClick	(e: MouseEvent<HTMLAnchorElement, MouseEvent>) => void	-
target	string	-
tooltip	TooltipProps	-	Тултип над тегом

TagRow

Props

name	type	default value	description
items*	TagRowItem[]	-	Массив тэгов
rowLimit	number	-	Лимит количества рядов тэгов. При достижении лимита тэги скрываются под кнопкой. Отсутствие лимита или значение равное нулю отобразит весь список
size	enum Size: "xs", "s"	-	Размер
moreButtonLabel	string	-	Текст кнопки, при наведении на которую отображается список скрытых тэгов
className	string	-	CSS-класс
onItemRemove	(item: string) => void	-	Коллбэк на клик по удалению тэга