دکمه
buttonکامپوننتدکمه در چند واریانت و اندازه، با حالت غیرفعال و آیکونی که در جهت درست کنار متن مینشینه.
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add buttonنصب دستی
محتوای تب «کد» را در
components/ui/button.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { Button } from "@/components/ui/button"2import { Plus } from "lucide-react"34<Button>ثبت سفارش</Button>5<Button variant="outline" size="sm">انصراف</Button>6<Button variant="brand"><Plus />محصول جدید</Button>پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| variant | "default" | "secondary" | "outline" | "ghost" | "brand" | "destructive" | "default" | سبک دکمه. default همان دکمهی سفید اصلیه. |
| size | "sm" | "md" | "lg" | "icon" | "md" | ارتفاع و پدینگ. icon مربعه. |
| disabled | boolean | - | غیرفعال با کاهش شفافیت. |
نکتههای راستچین
- آیکون را قبل از متن بگذارید، در RTL خودش سمت راست مینشینه.
- برای عمل مخرب از destructive و برای عمل ثانویه از outline استفاده کنید. در هر بخش فقط یک دکمهی default بگذارید.