دکمه (Button)

معرفی

دکمه برای اجرای اقدامات و ارسال فرم‌ها استفاده می‌شود.

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

• برای شروع یک عملیات (ذخیره، ارسال، حذف)
• برای ناوبری با ظاهر دکمه (با asChild)
• برای تأیید تصمیمات کاربر در دیالوگ‌ها

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

• برای ناوبری ساده بین صفحات — از لینک استفاده کنید
• برای تغییر وضعیت روشن/خاموش — از Toggle یا Switch استفاده کنید
• برای انتخاب از گزینه‌ها — از RadioGroup یا Select استفاده کنید

زمین بازی

با تغییر تنظیمات زیر، دکمه را به صورت زنده مشاهده کنید.

import { Button } from '@parto-system-design/ui'

<Button>
  دکمه نمونه
</Button>

استفاده

import { Button } from '@parto-system-design/ui'

<Button variant="outline">دکمه</Button>

همچنین می‌توانید از prop type استفاده کنید که alias برای variant است تا با استایل Supabase هماهنگ باشد.

لینک

می‌توانید از helper buttonVariants برای ایجاد یک لینک که شبیه دکمه است استفاده کنید.

import { buttonVariants } from '@parto-system-design/ui'

<Link className={buttonVariants({ variant: 'outline' })}>اینجا کلیک کنید</Link>

یا می‌توانید prop asChild را تنظیم کنید و کامپوننت لینک را داخل آن قرار دهید.

<Button asChild>
  <Link href="/login">ورود</Link>
</Button>

مثال‌ها

اندازه‌ها

از prop size برای تعیین اندازه دکمه استفاده کنید.

انواع

این‌ها تمام انواع مختلف variant (یا type) هستند.

اصلی (Primary)

برای اعمال درج داده، تأیید خرید، اعمال مثبت قوی استفاده می‌شود.

پیش‌فرض (Default)

برای باز کردن دیالوگ‌ها، ناوبری به صفحات و سایر اعمال غیر CRUD استفاده می‌شود.

این variant احتمالاً بیشترین نوع دکمه استفاده شده خواهد بود. احتمالاً در آینده به عنوان نوع پیش‌فرض تغییر خواهد کرد.

ثانویه (Secondary)

می‌تواند برای نشان دادن تغییر داده یا تنظیمات استفاده شود، اما به جدی بودن دکمه primary نیست. برای اعمال مخرب یا با عوارض جانبی، از variant destructive یا warning استفاده کنید.

هشدار (Warning)

برای اعمالی که ممکن است عوارض جانبی داشته باشند، اما به جدی بودن یک عمل مخرب نیستند استفاده می‌شود.

مخرب (Destructive) - همچنین danger

برای اعمالی که عوارض جانبی مخرب جدی خواهند داشت، مانند حذف داده استفاده می‌شود.

می‌توانید از variant="destructive" یا type="danger" (استایل Supabase) استفاده کنید.

حاشیه‌دار (Outline)

برای اعمال ثانویه، یا اعمالی که به اهمیت عمل primary نیستند استفاده می‌شود.

خط‌چین (Dashed)

برای اعمال ثانویه با حاشیه خط‌چین استفاده می‌شود.

شبح (Ghost) - همچنین text

برای اعمالی که به اهمیت عمل primary نیستند استفاده می‌شود.

می‌توانید از variant="ghost" یا type="text" (استایل Supabase) استفاده کنید.

لینک (Link)

برای اعمالی که به اهمیت عمل primary نیستند استفاده می‌شود.

فقط آیکون

نمایش فقط یک آیکون در یک دکمه.

با آیکون

دکمه‌ها می‌توانند آیکون در سمت چپ یا راست داشته باشند.

حالت بارگذاری

دکمه‌ها می‌توانند حالت بارگذاری را نمایش دهند.

به عنوان فرزند (As Child)

از prop asChild برای رفتار slot پشتیبانی می‌کند.

ویژگی‌ها (Props)

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

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

• از <button> یا <a> مناسب استفاده کنید
• همیشه متن یا aria-label قابل فهم داشته باشید
• حالت فوکوس کیبورد را حفظ کنید
• در صورت نیاز از disabled استفاده کنید

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

• ButtonGroup — اگر چند دکمه مرتبط را کنار هم نیاز دارید
• Toggle — اگر نیاز به دکمه‌ای با حالت روشن/خاموش دارید
• CopyButton — دکمه آماده برای کپی متن در کلیپبورد