دکمه (Button)

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

نصب (Installation)

1npx @quark-lab/rad-ui add button

نمونه‌ها (Examples)

استفاده پایه (Basic Usage)

ساده‌ترین حالت استفاده از دکمه.

مشاهده کد
1import { Button } from "@/components/ui/button";
2
3export default function BasicExample() {
4  return <Button>پیش‌فرض</Button>;
5}
6

انواع (Variants)

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

مشاهده کد
1import { Button } from "@/components/ui/button";
2
3export default function VariantsExample() {
4  return (
5    <div className="flex flex-wrap gap-4">
6      <Button variant="default">پیش‌فرض</Button>
7      <Button variant="destructive">حذف</Button>
8      <Button variant="outline">حاشیه‌دار</Button>
9      <Button variant="ghost">شبح</Button>
10      <Button variant="link">لینک</Button>
11    </div>
12  );
13}
14

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

دکمه‌ها در سه اندازه کوچک، متوسط و بزرگ موجود هستند.

مشاهده کد
1import { Button } from "@/components/ui/button";
2
3export default function SizesExample() {
4  return (
5    <div className="flex flex-wrap items-center gap-4">
6      <Button size="sm">کوچک</Button>
7      <Button size="md">متوسط</Button>
8      <Button size="lg">بزرگ</Button>
9    </div>
10  );
11}
12

با آیکون (With Icons)

می‌توانید از آیکون‌ها در دکمه‌ها استفاده کنید. برای RTL از کلاس‌های ms و me استفاده کنید.

مشاهده کد
1import { Button } from "@/components/ui/button";
2import { Download, Heart, Send } from "lucide-react";
3
4export default function WithIconsExample() {
5  return (
6    <div className="flex flex-wrap gap-4">
7      <Button>
8        <Download className="ms-2 h-4 w-4" />
9        دانلود
10      </Button>
11      <Button variant="outline">
12        ارسال
13        <Send className="me-2 h-4 w-4" />
14      </Button>
15      <Button variant="ghost">
16        <Heart className="ms-2 h-4 w-4" />
17        علاقه‌مندی
18      </Button>
19    </div>
20  );
21}
22

حالت‌ها (States)

نمایش دکمه در حالت‌های مختلف مانند غیرفعال.

مشاهده کد
1import { Button } from "@/components/ui/button";
2
3export default function StatesExample() {
4  return (
5    <div className="flex flex-wrap gap-4">
6      <Button>عادی</Button>
7      <Button disabled>غیرفعال</Button>
8    </div>
9  );
10}
11

مرجع API (API Reference)

Button

پراپ‌های کامپوننت دکمه.

پراپ (Prop)نوع (Type)پیش‌فرض (Default)توضیحات (Description)
variant"default" | "destructive" | "outline" | "ghost" | "link""default"نوع ظاهری دکمه
size"sm" | "md" | "lg""md"اندازه دکمه
disabledbooleanfalseغیرفعال کردن دکمه
classNamestring-کلاس‌های CSS سفارشی
onClick() => void-تابع رویداد کلیک

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

کیبورد (Keyboard)

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

فوکوس (Focus)

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

غیرفعال (Disabled)

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

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

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

  • Default: برای اقدامات اصلی و مهم (مثل ثبت فرم)
  • Destructive: برای اقدامات خطرناک (مثل حذف، لغو دائم)
  • Outline: برای اقدامات ثانویه (مثل لغو یا بازگشت)
  • Ghost: برای اقدامات کم‌اهمیت یا تکراری
  • Link: برای لینک‌هایی که مانند دکمه عمل می‌کنند

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

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

متن دکمه (Button Text)

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

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

1import { Button } from "@/components/ui/button";
2
3export default function UsageExample() {
4  return (
5    <div>
6      <Button>پیش‌فرض</Button>
7      <Button variant="destructive">حذف</Button>
8      <Button variant="outline">حاشیه‌دار</Button>
9      <Button variant="ghost">شبح</Button>
10      <Button variant="link">لینک</Button>
11
12      <Button size="sm">کوچک</Button>
13      <Button size="md">متوسط</Button>
14      <Button size="lg">بزرگ</Button>
15
16      <Button disabled>غیرفعال</Button>
17    </div>
18  );
19}
20

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

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

می‌توانید با استفاده از className ظاهر دکمه را تغییر دهید.

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

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

دکمه‌ای که فقط شامل آیکون است.

مشاهده کد
1import { Heart } from "lucide-react";
2
3<Button size="sm" className="aspect-square p-0">
4  <Heart className="h-4 w-4" />
5</Button>