Button Group
دکمههای مرتبط را پشتسرهم و با یک حاشیهٔ بصری پیوسته نشان میدهد؛ برای صفحهبندی ساده، ابزار متن یا اقدامهای جفتی.
این کامپوننت فعلاً برای ۱ فریمورک از ۴ فریمورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
نصب
با CLI اختصاصی dig-ui کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگیها و فایلها خودکار اضافه میشوند.
pnpm dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/button-group.jsonnpx dig-ui@latest add https://design-system-tau-green.vercel.app/r/button-group.jsonyarn dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/button-group.jsonbunx --bun dig-ui@latest add https://design-system-tau-green.vercel.app/r/button-group.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
استفاده
import { ButtonGroup } from "@/components/ui/button-group"
<ButtonGroup>
<Button variant="outline">یک</Button>
<Button variant="outline">دو</Button>
</ButtonGroup>این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
ترکیب اجزا
ButtonGroup فقط یک ظرف flex با role=group است؛ خودِ Buttonها را با variant="outline" (یا هر واریانت دیگر) بدهید.
حاشیهها با margin منفی روی هم میافتند و هنگام فوکوس/هاور z-index بالاتری میگیرند تا حاشیهٔ دکمهٔ فعال کامل دیده شود.
برای جدا کردن بخشی از گروه از ButtonGroupSeparator و برای برچسب ثابت (مثل پیشوند URL) از ButtonGroupText استفاده کنید.
دسترسپذیری
- role=group دارد؛ اگر گروه معنای خاصی دارد (مثل ابزار متن) aria-label هم اضافه کنید.
- هر Button ARIA و فوکوس خودش را حفظ میکند؛ ButtonGroup فقط چیدمان بصری را تغییر میدهد.
مرجع API
ButtonGroup
| ویژگی | نوع | پیشفرض | توضیح |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | جهت چیدمان دکمهها. |
ButtonGroupSeparator
| ویژگی | نوع | پیشفرض | توضیح |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "vertical" | برخلاف Separator معمولی، اینجا عمودی پیشفرض است. |
ButtonGroupText
| ویژگی | نوع | پیشفرض | توضیح |
|---|---|---|---|
| asChild | boolean | false | رندر استایل روی فرزند بهجای div. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
نمونهها
فقط آیکون
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
با جداکننده
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
با ButtonGroupText
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
عمودی
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
عضو غیرفعال (Disabled)
عضو گروه را پنهان نکنید؛ جای دکمهها در حافظهٔ عضلانی کاربر مینشیند. غیرفعال با دلیل، هم جا را نگه میدارد هم توضیح میدهد.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
جداکننده بین دستهها
وقتی چند دکمه در یک گروه هستند ولی معنایشان متفاوت است (جابهجایی در برابر بازخوانی)، ButtonGroupSeparator مرز دیداری میگذارد بدون اینکه دو ButtonGroup جدا بسازید.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار میآید |
|---|---|
| فقط آیکون | نوار ابزار متن مثل ضخیم، مورب، زیرخط |
| با جداکننده | جدا کردن اعمال ناوبری (قبلی/بعدی) از عمل متفاوتی مثل کپی در همان گروه |
| با ButtonGroupText | نمایش پیشوند ثابت آدرس کنار دکمهٔ ویرایش لینک |
| عمودی | نوار ابزار کنارِ محتوا در فضایی باریک و بلند |
| عضو غیرفعال (Disabled) | گزینهای که در طرح فعلی کاربر نیست |
| جداکننده بین دستهها | نوار ابزار با دو دستهٔ متفاوت از اعمال |