دکمه‌ها

انواع دکمه‌های عمومی پنل و الگوی استفاده از آن‌ها

راهنمای کوتاه

استفاده از دکمه‌ها

برای عملیات معمول از Button و برای کاربردهای آیکنی، کشویی یا مسیریابی از کامپوننت اختصاصی همان نوع استفاده کنید.

import Button from "@/components/shared/Button";

<Button variant="primary">Save</Button>

کامپوننت‌های آماده

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

عمل اصلی و مهم هر بخش مانند ثبت یا ادامه فرایند.

<Button variant="primary">Save</Button>

عمل مکمل با اولویت بصری کمتر از دکمه اصلی.

<Button variant="secondary">Cancel</Button>

عمل مستقل و خنثی در کنار سایر کنترل‌های صفحه.

<Button variant="outline">Preview</Button>

عمل کم‌اهمیت در رابط‌های خلوت و کم‌تراکم.

<Button variant="ghost">Close</Button>

عمل مخرب مانند حذف یا لغو قطعی اطلاعات.

<Button variant="danger">Delete</Button>

تأیید نتیجه مثبت یا تکمیل موفق یک عملیات.

<Button variant="success">Confirm</Button>

عملی که پیش از انجام نیازمند توجه کاربر است.

<Button variant="warning">Review</Button>

کنترل جمع‌وجور با نام دسترس‌پذیر برای آیکن تنها.

<IconButton label="Edit">...</IconButton>

مجموعه‌ای کوتاه از عملیات مرتبط در یک کنترل.

<DropdownButton label="Actions" items={items} />

مسیریابی داخل پنل با رفتار صحیح لینک.

<LinkButton href="/panel/items">Items</LinkButton>

حالت غیرفعالویژگی disabled کلیک و حالت‌های hover را غیرفعال می‌کند.