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 управляют только оформлением.