دکمه (Button)

کامپوننت دکمه با پشتیبانی کامل از RTL و حالت تاریک

نصب (Installation)

npm install @rad-ui/ui

انواع (Variants)

اندازه‌ها (Sizes)

با آیکون (With Icons)

حالت‌ها (States)

ترکیبات (Combinations)

پیش‌فرض (Default)

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

شبح (Ghost)

لینک (Link)

مثال تعاملی (Interactive Example)

مرجع API (API Reference)

پراپ (Prop)	نوع (Type)	پیش‌فرض (Default)	توضیحات (Description)
`variant`	`"default" \| "outline" \| "ghost" \| "link"`	`"default"`	نوع ظاهری دکمه
`size`	`"sm" \| "md" \| "lg"`	`"md"`	اندازه دکمه
`disabled`	`boolean`	`false`	غیرفعال کردن دکمه
`className`	`string`	`undefined`	کلاس‌های CSS سفارشی
`onClick`	`() => void`	`undefined`	تابع رویداد کلیک
`...props`	`HTMLButtonAttributes`	-	تمام ویژگی‌های استاندارد HTML button

دسترسی‌پذیری (Accessibility)

کیبورد (Keyboard)

Enter یا Space - فعال کردن دکمه
Tab - حرکت به دکمه بعدی

فوکوس (Focus)

دکمه‌ها دارای حلقه فوکوس واضح برای کاربران کیبورد هستند

غیرفعال (Disabled)

دکمه‌های غیرفعال از ویژگی disabled استفاده می‌کنند و برای خوانندگان صفحه قابل شناسایی هستند

بهترین شیوه‌ها (Best Practices)

انتخاب نوع مناسب (Variant Selection)

Default: برای اقدامات اصلی و مهم (مثل ثبت فرم)
Outline: برای اقدامات ثانویه (مثل لغو یا بازگشت)
Ghost: برای اقدامات کم‌اهمیت یا تکراری
Link: برای لینک‌هایی که مانند دکمه عمل می‌کنند

آیکون‌ها در RTL (Icons in RTL)

از ms-2 برای آیکون در سمت راست متن وme-2 برای آیکون در سمت چپ متن استفاده کنید.

متن دکمه (Button Text)

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

نحوه استفاده (Usage)

import { Button } from "@rad-ui/ui";

export default function MyComponent() {
  return (
    <div>
      <Button>پیش‌فرض</Button>
      <Button variant="outline">حاشیه‌دار</Button>
      <Button variant="ghost">شبح</Button>
      <Button variant="link">لینک</Button>

      <Button size="sm">کوچک</Button>
      <Button size="md">متوسط</Button>
      <Button size="lg">بزرگ</Button>

      <Button disabled>غیرفعال</Button>
    </div>
  );
}

مثال‌های پیشرفته (Advanced Examples)

استایل سفارشی (Custom Styling)

<Button className="bg-gradient-to-r from-purple-500 to-pink-500">
  دکمه رنگی
</Button>

با رویداد (With Event Handler)

<Button onClick={() => {
  console.log("کلیک شد!");
  // انجام عملیات
}}>
  کلیک کن
</Button>

فقط آیکون (Icon Only)

import { Heart } from "lucide-react";

<Button size="sm" className="aspect-square p-0">
  <Heart className="h-4 w-4" />
</Button>