دسترسی سریع پراپسها
تغییر فوری، نمایش زنده
children
stringActions
Button
کامپوننت اصلی برای اجرای اکشنهای کلیدی و فرعی.
مسیر ایمپورت
@/src/components/core/Button
ورینتها
Button.tsx
import { Button } from "@/src/components/core/Button"
<Button variant="primary" size="md" loading={false} disabled={false}>
Book a Session
</Button>منبع مستندات
مستندات محلی پلتفرم
راهنمای نصب و شروع
استاندارد واحد تیمی برای نصب، ایمپورت و استفاده اولیه از این کامپوننت.
نیازمندیهای نصب
افزودن کامپوننت پایه
نصب وابستگی ضروری
cli
npx shadcn@latest add button
cli
npm install @base-ui/react
نیازمندیهای کلیدی بهصورت ویژوال
این الگوها باید قبل از انتشار در پیشنمایش همین کامپوننت چک و اعمال شوند.
دکمه همراه آیکن
برای CTAهای ثانویه، متن + آیکن را با فاصله استاندارد نگه دار.
الزام: از leftIcon/rightIcon متناسب با جهت زبان استفاده کن.حالت بارگذاری
حین ارسال/پرداخت، دکمه باید در همان جایگاه وضعیت loading را نشان دهد.
الزام: loading={true}گروه اکشنها
وقتی دو تصمیم همسطح داریم، دکمهها را کنار هم و با فاصله ثابت بچین.
الزام: چیدمان گروهی با فاصله یکسانماتریس وضعیتها و ورینتهای Button
ورینتها و وضعیتهای مهم این کامپوننت را قبل از انتشار در موبایل و دسکتاپ بررسی کن.
ورینت primary
children="Book a Session" variant="primary"حالت primary باید در همین پیشنمایش روی موبایل و دسکتاپ خوانا بماند.
ورینت secondary
children="Explore Tools" variant="secondary"حالت secondary باید در همین پیشنمایش روی موبایل و دسکتاپ خوانا بماند.
ورینت ai
children="Run AI Analysis" variant="ai" iconPlacement="start"حالت ai باید در همین پیشنمایش روی موبایل و دسکتاپ خوانا بماند.
بارگذاری
loading={true}حالت انتظار باید در همان سطح کامپوننت نمایش داده شود.
غیرفعال
disabled={true}حالت غیرفعال باید کمتاکید اما همچنان خوانا باشد.
CTA اصلی هیرو
برای مهمترین اکشن در اولین viewport استفاده میشود.
الگوی مستندات استاندارد محصول
این ساختار باید برای همه کامپوننتها و پروداکتها ثابت بماند تا تیمها و ایجنتها خروجی یکنواخت تولید کنند.
چکلیست همراستایی قبل از انتشار
- قوانین usage، دسترسپذیری و نصب باید در همین صفحه کامل و قابل اجرا باشند.
- نمونه کدها باید قابل کپی، قابل اجرا و هماهنگ با import path اصلی باشند.
- رفتار در حالتهای loading/disabled/error/success باید مستند و تستپذیر باشد.
- خروجی باید در دسکتاپ، موبایل، RTL و LTR بدون افت کیفیت پایدار باشد.
قرارداد مالکیت مستندات
- منبع رسمی: shadcn/ui + مستندات محلی پلتفرم
- مالک بهروزرسانی: تیم Design System
- الزام همیشگی: هر تغییر کامپوننت = آپدیت مستندات همین کامپوننت
کامپوننت فعال: Button
@/src/components/core/Button
نحوه استفاده
در هر سکشن فقط یک اکشن اصلی داشته باش تا تصمیمگیری واضح بماند.
دسترسپذیری
برای دکمههای مهم حتما متن معنادار بگذار و از آیکن تنها استفاده نکن.
بهتر است
الگوهای قابل اتکا برای استفاده در محصول
1روی اکشنها متن کوتاه و outcome-focused بنویس.
2اکشنهای destructive را واضح از اکشن اصلی جدا کن.
پرهیز شود
ریسکهایی که قبل از انتشار باید حذف شوند
1در یک بلاک بصری چند اکشن primary نگذار.
2از متنهای مبهم مثل «ارسال» وقتی intent مشخص است استفاده نکن.
برای این کامپوننت مستند کامل ثبت نشده است.