Tag

Интерактивная метка, ссылка или фильтр.

checked показывает выбор; href превращает метку в ссылку.

Живой пример

Настройки примера

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

'use client';

import { Tag } from '@prosazhin/pbcomponents';
import { useState } from 'react';

function Example() {
  const [checked, setChecked] = useState(false);
  return (
    <Tag
      checked={checked}
      onClick={() => setChecked(!checked)}
    >
      Tag
    </Tag>
  );
}

API компонента

PropТип / вариантыНазначениеПо умолчанию
childrenstringСодержимое компонента.
size's' | 'm's · mРазмер компонента.m
theme'light' | 'border'light · borderОформление тега.light
checkedbooleanТекущее выбранное состояние.false
disabledbooleanБлокирует взаимодействие.false
loadingbooleanПоказывает процесс выполнения.false
leftIconSvgTypenone · check · search · userИконка перед текстом; принимает SVG-компонент.
rightIconSvgTypenone · check · search · userИконка после текста; принимает SVG-компонент.
leftIconClassNamestringКласс левой иконки.
rightIconClassNamestringКласс правой иконки.
onClick(event) => voidОбработчик выбора тега.
hrefstringРендерит ссылку вместо кнопки.
linkComponentElementTypeКомпонент ссылки, например Next.js Link.
target'_self' | '_blank'_self · _blankГде открыть ссылку._self
type'button' | 'reset' | 'submit'button · reset · submitТип HTML-кнопки.button
classNamestringКласс корневого элемента.
textClassNamestringКласс текстовой части.

Нативные HTML-атрибуты поддерживаются там, где компонент рендерит соответствующий элемент. Параметры className управляют только оформлением.