Chip
برچسبی فشرده برای نمایش وضعیت، دستهبندی یا انتخاب: با متن، آیکون یا هر دو، و قابلتبدیل به عنصر تعاملی مثل دکمهٔ فیلتر.
این کامپوننت فعلاً برای ۱ فریمورک از ۴ فریمورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
نصب
با CLI اختصاصی dig-ui کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگیها و فایلها خودکار اضافه میشوند.
pnpm dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/chip.jsonnpx dig-ui@latest add https://design-system-tau-green.vercel.app/r/chip.jsonyarn dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/chip.jsonbunx --bun dig-ui@latest add https://design-system-tau-green.vercel.app/r/chip.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
استفاده
import { Chip } from "@/components/ui/chip"
<Chip color="success">فعال</Chip>این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
ترکیب اجزا
رنگ Chip با دو محور مستقل کار میکند، درست مثل Badge.
محور color فقط چهار متغیر CSS را ست میکند — --chip، --chip-foreground، --chip-subtle و --chip-subtle-foreground — و محور variant تصمیم میگیرد این رنگ کجا بنشیند: پسزمینهٔ توپر در primary، پسزمینهٔ خنثی با متن رنگی در secondary، بدون پسزمینه در tertiary، یا پسزمینهٔ ملایم در soft.
- وقتی فرزند Chip یک رشته یا عدد ساده باشد، خودکار داخل ChipLabel پیچیده میشود؛ برای ترکیب با آواتار، آیکون یا شمارنده، خودتان آن عنصر و ChipLabel را کنار هم بهعنوان فرزند بدهید — همان متغیرهای
--chipبرای رنگکردن یک شمارندهٔ داخلی هم قابل استفادهاند. - برای الگوی «حذفشدنی» از ChipCloseButton استفاده کنید: ضربدرش رنگِ currentColor دارد، پس با هر ترکیب variant/color از پیش هماهنگ است؛ دایرهٔ پشتش فقط روی هاور/فوکوس ظاهر میشود. خودش کاری جز نمایش انجام نمیدهد؛
onClick(حذف از state) را کامپوننت مصرفکننده میدهد.
دسترسپذیری
- بهصورت پیشفرض یک span تزئینی است؛ اگر Chip تنها راه انتقال یک وضعیت است، متن ChipLabel آن را برای صفحهخوان هم واضح بنویسید.
- برای Chip قابلکلیک یا قابلتعویض (فیلتر، انتخاب) از asChild همراه با یک button واقعی و aria-pressed استفاده کنید تا نقش، فوکوس و کلید Enter/Space درست کار کند.
- آیکونهای تزئینی داخل Chip (نشانگر وضعیت، تیک انتخاب) باید aria-hidden باشند؛ معنا را متن ChipLabel منتقل کند، نه فقط رنگ یا شکل آیکون.
- به ChipCloseButton همیشه یک aria-label توصیفی بدهید (مثل «حذف تهران»)؛ برچسب عمومی «حذف» بهتنهایی برای فهرستی با چند Chip کافی نیست.
مرجع API
Chip
تمام ویژگیهای استاندارد span نیز پشتیبانی میشود.
| ویژگی | نوع | پیشفرض | توضیح |
|---|---|---|---|
| variant | "primary" | "secondary" | "tertiary" | "soft" | "secondary" | حالت بصری Chip؛ تعیین میکند رنگ کجا بنشیند. |
| color | "default" | "primary" | "success" | "warning" | "destructive" | "default" | رنگ معنایی، مستقل از حالت. default یعنی همان ظاهر خنثای دیگ. |
| size | "sm" | "default" | "lg" | "default" | اندازهٔ Chip. |
| asChild | boolean | false | رندر استایلها روی فرزند مستقیم (مثل button یا Link) بهجای تگ span. |
| children | React.ReactNode | — | رشته یا عدد خودکار داخل ChipLabel میپیچد؛ برای ترکیب با آیکون، ChipLabel را خودتان کنار آیکون بگذارید. |
ChipLabel
زیرکامپوننت متنِ Chip؛ در ترکیب دستی با آیکون بهصورت مستقیم استفاده میشود.
| ویژگی | نوع | پیشفرض | توضیح |
|---|---|---|---|
| children | React.ReactNode | — | متن برچسب. |
| className | string | — | کلاسهای تکمیلی برای زیرکامپوننت متن. |
ChipCloseButton
دکمهٔ حذفِ Chip؛ تمام ویژگیهای استاندارد button پشتیبانی میشود. ضربدرش currentColor است و دایرهٔ پسزمینه فقط روی هاور/فوکوس میآید، پس خودش هیچ prop رنگی ندارد.
| ویژگی | نوع | پیشفرض | توضیح |
|---|---|---|---|
| onClick | (event: React.MouseEvent) => void | — | رویداد کلیک؛ منطق حذف از state را اینجا بنویسید. |
| aria-label | string | "حذف" | برچسب دسترسپذیر دکمه؛ در فهرستی با چند Chip حتماً توصیفیتر از پیشفرض بدهید. |
| className | string | — | کلاسهای تکمیلی برای دکمهٔ حذف. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
نمونهها
Variants
چهار حالت بصری، مستقل از رنگ: primary پسزمینهٔ توپر رنگی، secondary پسزمینهٔ خنثی با متن رنگی، tertiary بدون پسزمینه و فقط متن رنگی، soft پسزمینهٔ ملایم رنگی.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
Colors
پنج رنگ معنایی: default برای وضعیت خنثی، primary برای برچسب برند، success، warning و destructive.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
Sizes
سه اندازه: sm، default و lg.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
Statuses
ترکیب variant="soft" با رنگ معنایی برای نمایش وضعیتها؛ ملایمتر از primary توپر ولی رنگیتر از secondary خنثی.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
With Avatar
برای برچسبِ افراد (مثل «دنبالکنندههای اخیر»)، Avatar را بهجای آیکون در ابتدای Chip بگذارید؛ اندازهٔ sm آواتار با اندازهٔ lg چیپ همخوان است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
With Counter
برای شمارنده یا تعداد (مثل «انتخاب اقلام خرید»)، یک دایرهٔ کوچک با همان متغیرهای رنگ Chip (--chip/--chip-foreground) بگذارید تا خودکار با color هماهنگ بماند.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
Removable Chip Group
ChipCloseButton یک ضربدرِ همرنگ متنِ Chip است که فقط روی هاور/فوکوس دایرهٔ پسزمینه میگیرد. کلیک روی آن اینجا واقعاً از فهرست state حذف میکند.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
Selectable Chip Group
با asChild روی یک button واقعی همراه با aria-pressed، Chip به دکمهٔ دوحالته تبدیل میشود: انتخابشدهها variant="primary" با تیک میگیرند، بقیه secondary میمانند.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
Clickable Chip
با asChild، Chip استایلش را روی یک button واقعی میگذارد: برای الگوهای فیلتر یا انتخاب که باید با کیبورد هم کار کنند.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
متن بلند (Overflow)
چیپ برای یک یا دو کلمه است. اگر متن جملهای است، عرض بیشینه و truncate بدهید یا اصلاً از چیپ استفاده نکنید.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
فهرست خالی (Empty)
وقتی آخرین چیپ حذف میشود، جای خالی نگذارید؛ متنی بگذارید که بگوید چیزی انتخاب نشده.
فهرست خالی باید متن جایگزین داشته باشد، نه فضای خالیِ بیتوضیح.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار میآید |
|---|---|
| Variants | چهار حالت بصری، مستقل از رنگ: primary پسزمینهٔ توپر رنگی، secondary پسزمینهٔ خنثی با متن رنگی، tertiary بدون پسزمینه و فقط متن رنگی، soft پسزمینهٔ ملایم رنگی. |
| Colors | پنج رنگ معنایی: default برای وضعیت خنثی، primary برای برچسب برند، success، warning و destructive. |
| Sizes | سه اندازه: sm، default و lg. |
| Statuses | ترکیب variant="soft" با رنگ معنایی برای نمایش وضعیتها؛ ملایمتر از primary توپر ولی رنگیتر از secondary خنثی. |
| With Avatar | برای برچسبِ افراد (مثل «دنبالکنندههای اخیر»)، Avatar را بهجای آیکون در ابتدای Chip بگذارید؛ اندازهٔ sm آواتار با اندازهٔ lg چیپ همخوان است. |
| With Counter | برای شمارنده یا تعداد (مثل «انتخاب اقلام خرید»)، یک دایرهٔ کوچک با همان متغیرهای رنگ Chip (--chip/--chip-foreground) بگذارید تا خودکار با color هماهنگ بماند. |
| Removable Chip Group | ChipCloseButton یک ضربدرِ همرنگ متنِ Chip است که فقط روی هاور/فوکوس دایرهٔ پسزمینه میگیرد |
| Selectable Chip Group | با asChild روی یک button واقعی همراه با aria-pressed، Chip به دکمهٔ دوحالته تبدیل میشود: انتخابشدهها variant="primary" با تیک میگیرند، بقیه secondary میمانند. |
| Clickable Chip | با asChild، Chip استایلش را روی یک button واقعی میگذارد: برای الگوهای فیلتر یا انتخاب که باید با کیبورد هم کار کنند. |
| متن بلند (Overflow) | برچسبی که شرحش طولانی است |
| فهرست خالی (Empty) | برچسبهای قابلحذف که همهشان حذف شدهاند |
دستورالعمل استفاده
رنگ متناسب با معنای وضعیت
انجام بده
color را بر اساس معنای واقعی وضعیت انتخاب کنید؛ success برای چیزی که واقعاً فعال یا تایید شده.
انجام نده
رنگ destructive برای یک وضعیت خنثی مثل «پیشنویس» به کاربر میگوید مشکلی وجود دارد، در حالی که ندارد.
برای Chip قابلکلیک از asChild استفاده کنید
انجام بده
با asChild، Chip استایلش را روی یک عنصر تعاملی واقعی مثل button میگذارد؛ نقش، فوکوس و کلیک صفحهکلید درست کار میکند.
انجام نده
یک span معمولی هرچقدر هم شبیه دکمه بهنظر برسد، نه با Tab فوکوس میگیرد و نه نقش تعاملی برای صفحهخوان دارد.
متن کوتاه، نه جمله
انجام بده
یک یا چند کلمهٔ کوتاه برای Chip کافی است؛ شکل قرصی آن برای برچسب فشرده طراحی شده.
انجام نده
جملهٔ بلند داخل Chip از شکل فشردهٔ آن بیرون میزند و در کنار Chipهای دیگر بد مینشیند.