دکمه (Button)

استفاده

import { Button } from '@parto/ui'

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

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

لینک

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

import { buttonVariants } from '@parto/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)

ویژگی	نوع	پیش‌فرض	توضیحات
`variant`	`'default' \| 'primary' \| 'destructive' \| 'danger' \| 'outline' \| 'dashed' \| 'secondary' \| 'ghost' \| 'text' \| 'link' \| 'warning'`	`'default'`	نوع ظاهری دکمه
`type`	`'default' \| 'primary' \| 'destructive' \| 'danger' \| 'outline' \| 'dashed' \| 'secondary' \| 'ghost' \| 'text' \| 'link' \| 'warning'`	-	Alias برای `variant` (استایل Supabase)
`size`	`'tiny' \| 'small' \| 'sm' \| 'default' \| 'medium' \| 'large' \| 'lg' \| 'xlarge' \| 'icon'`	`'default'`	اندازه دکمه
`disabled`	`boolean`	`false`	غیرفعال کردن دکمه
`loading`	`boolean`	`false`	نمایش حالت بارگذاری
`icon`	`ReactNode`	-	آیکون سمت چپ (یا راست در RTL)
`iconLeft`	`ReactNode`	-	آیکون سمت چپ
`iconRight`	`ReactNode`	-	آیکون سمت راست
`asChild`	`boolean`	`false`	ترکیب با کامپوننت فرزند
`block`	`boolean`	`false`	عرض کامل
`rounded`	`boolean`	`false`	گوشه‌های گرد کامل
`htmlType`	`'button' \| 'submit' \| 'reset'`	`'button'`	نوع HTML button

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

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