چیپ برچسب (LabelChip)

چیپ فشرده برای نمایش برچسب‌های موضوعی و دسته‌بندی — با شش tone رنگی، نشانگر برچسب هوش مصنوعی همراه درصد اطمینان، و اکشن‌های ویرایش و حذف درون‌خطی.

معرفی

LabelChip یک چیپ فشرده برای نمایش برچسب‌های موضوعی و دسته‌بندی روی پست‌ها، خوشه‌ها و ردیف‌های جدول است — با شش tone رنگی، دو اندازه، نشانگر «تولیدشده توسط هوش مصنوعی» به‌همراه درصد اطمینان، و دکمه‌های ویرایش و حذف درون‌خطی.

چه زمانی استفاده کنیم:

نمایش برچسب‌های موضوعی و کمپینی روی پست‌ها و خوشه‌های تحلیلی (مانند «کمپین تخفیف فصلی» یا «بازخورد بسته‌بندی»)
در داشبوردهای خوشه‌بندی هوشمند، برای تفکیک برچسب‌های خودکار (aiGenerated) از برچسب‌های انسانی
وقتی کاربر باید بتواند برچسب را همان‌جا ویرایش یا حذف کند (onEdit / onRemove) یا با کلیک روی آن فید را فیلتر کند (onSelect)

چه زمانی استفاده نکنیم:

برای نمایش فیلترهای فعال جستجو در نوار فیلتر — از FilterChip استفاده کنید
برای نشان دادن وضعیت یا شمارنده ایستا بدون هیچ تعاملی — Badge ساده‌تر و کافی است
وقتی کاربر باید خودش تگ جدید تایپ و اضافه کند — از TagInput استفاده کنید

کمپین تخفیف فصلیرونمایی محصول جدیدبازخورد بسته‌بندیگفتمان درباره برند۸۷٪

استفاده

import { LabelChip } from '@partodata/ui'

<LabelChip tone="brand" onRemove={() => removeLabel('seasonal-campaign')}>
  کمپین تخفیف فصلی
</LabelChip>

حالت‌ها و انواع

رنگ‌ها و اندازه‌ها

از prop tone برای تعیین رنگ چیپ استفاده کنید — شش حالت دارد: neutral (پیش‌فرض)، brand، success، warning، destructive و ai. prop size نیز دو اندازه sm (پیش‌فرض) و md دارد.

رنگ‌ها (tone)

دسته‌بندی عمومیکمپین تخفیف فصلیبازخورد مثبت بسته‌بندیدر انتظار بازبینیشکایت مشتریرونمایی محصول جدید۹۲٪

اندازه‌ها (size)

اندازه sm (پیش‌فرض)اندازه md

<LabelChip tone="neutral">دسته‌بندی عمومی</LabelChip>
<LabelChip tone="brand">کمپین تخفیف فصلی</LabelChip>
<LabelChip tone="success">بازخورد مثبت بسته‌بندی</LabelChip>
<LabelChip tone="warning">در انتظار بازبینی</LabelChip>
<LabelChip tone="destructive">شکایت مشتری</LabelChip>
<LabelChip size="md" tone="brand">اندازه md</LabelChip>

برچسب هوش مصنوعی

با aiGenerated یک پیشوند ✦ ظریف به ابتدای چیپ اضافه می‌شود و اگر tone را صریح تنظیم نکرده باشید، tone مخصوص ai به‌صورت خودکار اعمال می‌شود. با confidence (عددی بین ۰ و ۱) میزان اطمینان مدل به‌صورت درصد با ارقام فارسی در انتهای چیپ نمایش داده می‌شود.

<LabelChip aiGenerated confidence={0.87}>گفتمان درباره برند</LabelChip>

ویرایش و حذف درون‌خطی

با تنظیم onEdit دکمه مداد و با تنظیم onRemove دکمه ✕ در انتهای چیپ رندر می‌شود. باز کردن ویرایشگر بر عهده مصرف‌کننده است — کامپوننت فقط رویداد را گزارش می‌کند.

<LabelChip onEdit={() => openLabelEditor('packaging')} onRemove={() => removeLabel('packaging')}>
  بازخورد بسته‌بندی
</LabelChip>

چیپ قابل کلیک

با تنظیم onSelect کل چیپ قابل کلیک و قابل فوکوس می‌شود — مناسب جریان «فیلتر بر اساس برچسب». دکمه‌های ویرایش و حذف داخلی، کلیک خودشان را از onSelect جدا نگه می‌دارند.

<LabelChip tone="brand" onSelect={() => filterByLabel('seasonal-campaign')}>
  کمپین تخفیف فصلی
</LabelChip>

helper به نام labelChipVariants

اگر فقط استایل چیپ را برای یک عنصر دیگر نیاز دارید، می‌توانید از helper کلاس‌ساز labelChipVariants استفاده کنید.

import { labelChipVariants } from '@partodata/ui'

<span className={labelChipVariants({ tone: 'success', size: 'md' })}>بازخورد مثبت بسته‌بندی</span>

راهنمای استفاده

بکنید

برای برچسب‌های خودکار مدل، همیشه aiGenerated را تنظیم کنید تا کاربر منشأ برچسب را از پیشوند ✦ تشخیص دهد. - confidence را فقط وقتی نمایش دهید که مقدار واقعی از مدل دارید — درصد ساختگی اعتماد کاربر را از بین می‌برد. - برای کلیک روی کل چیپ از onSelect استفاده کنید، نه onClick — این کامپوننت عمداً onClick را از props حذف کرده است. - متن برچسب را کوتاه نگه دارید؛ متن بلند به‌صورت خودکار truncate می‌شود.

نکنید

از LabelChip برای فیلترهای فعال نوار جستجو استفاده نکنید — FilterChip برای آن سناریو طراحی شده است. - tone destructive را برای دسته‌بندی معمولی به‌کار نبرید — فقط برای برچسب‌هایی که نیازمند توجه فوری هستند. - onRemove را بدون تأیید یا امکان بازگشت برای داده‌های مهم وصل نکنید — حذف برچسب تحلیلی باید قابل جبران باشد. - چند چیپ با tone brand را بی‌دلیل کنار هم نچینید — تمایز بصری برچسب‌ها از بین می‌رود.

Props

Prop

Type

سایر ویژگی‌های استاندارد span (مانند className و id) نیز به عنصر ریشه منتقل می‌شوند — به‌جز onClick که عمداً حذف شده است؛ به‌جای آن از onSelect استفاده کنید.

دسترسی‌پذیری

بدون onSelect، چیپ یک span غیرتعاملی است و در ترتیب فوکوس صفحه قرار نمی‌گیرد.
با onSelect، چیپ role="button" و tabIndex صفر می‌گیرد و با Enter یا Space فعال می‌شود (اسکرول پیش‌فرض Space جلوگیری می‌شود).
دکمه‌های ویرایش و حذف، عنصر button واقعی با aria-label فارسی («ویرایش برچسب» و «حذف برچسب») هستند و کلیک آن‌ها با stopPropagation از فعال شدن onSelect جدا می‌ماند.
پیشوند ✦ برچسب هوش مصنوعی و آیکون‌های داخلی با aria-hidden از صفحه‌خوان مخفی هستند — اطلاعات از طریق متن برچسب منتقل می‌شود.
حلقه فوکوس با focus-visible:ring-2 و رنگ برند نمایش داده می‌شود.
درصد اطمینان با ارقام فارسی (Intl.NumberFormat با locale fa-IR) و کلاس tabular-nums رندر می‌شود؛ آن کلاس در فونت یکان بخ بی‌اثر است، چون tnum ندارد.

تعامل با کیبورد

Tab: انتقال فوکوس به چیپ (فقط وقتی onSelect تنظیم شده) و سپس به دکمه‌های ویرایش و حذف - Enter یا Space: فعال‌سازی onSelect روی چیپ قابل کلیک - دکمه‌های ویرایش و حذف مانند هر دکمه استاندارد با Enter یا Space فعال می‌شوند

کامپوننت‌های مرتبط

Badge — اگر فقط یک برچسب یا وضعیت ایستا بدون ویرایش، حذف و کلیک نیاز دارید، Badge ساده‌تر است.
FilterChip — اگر فیلترهای فعال جستجو را نمایش می‌دهید و کاربر باید بتواند آن‌ها را بردارد، FilterChip (در ترکیب با FilterBar) گزینه درست است.
TagInput — اگر کاربر باید خودش تگ جدید وارد کند، TagInput ورودی و مدیریت تگ را یک‌جا فراهم می‌کند.
ActionTypeChip — اگر نوع یک عملیات شبکه اجتماعی (پسند، نظر، ذخیره و مانند آن) را نمایش می‌دهید، از چیپ domain-specific آن استفاده کنید.
Label — برای برچسب فیلدهای فرم است و با وجود شباهت نام، ارتباطی با چیپ برچسب موضوعی ندارد.