زر

أزرار متوافقة مع نظام تصميم BoardUI - أنماط أساسي وثانوي وشبحي وخطر بثلاثة أحجام، مع فتحات أيقونات أمامية وخلفية، ووضع الأيقونة فقط، وحالات تمرير وضغط وتعطيل دلالية.

التثبيت

يمكنك إضافة مكوّن الزر هذا باستخدام CLI الخاص بنا أو يدويًا:

الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.

CLI

يدوي

تنسخ CLI مصدر المكوّن (مع تبعياته الداخلية) إلى مشروعك وتثبّت أي حزم npm مطلوبة.

npx boardui@latest add button

هل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.

المتغيرات

أربعة متغيرات عبر variant الخاصية. يستخدم الأساسي والخطر تدرجات رأسية، والثانوي سطح محاط بإطار، ويستخدم الشبح سطح الإجراء الأزرق الخفيف.

<Button variant="primary">Primary</Button>     {/* blue gradient (default) */}<Button variant="secondary">Secondary</Button> {/* white surface + hairline border */}<Button variant="ghost">Ghost</Button>         {/* blue-100 semantic surface */}<Button variant="danger">Danger</Button>       {/* red gradient */}

الأحجام

ثلاثة أحجام - متوسط (36 بكسل، الافتراضي)، وصغير (32 بكسل)، وصغير جدًا (24 بكسل). تصبح الأزرار التي تحتوي على أيقونات فقط مربعة في كل حجم.

<Button size="medium">Medium</Button> {/* 36px (default) */}<Button size="small">Small</Button>   {/* 32px */}<Button size="xs">Xs</Button>         {/* 24px */}

الأيقونات

مرر أي مرجع لمكوّن Remix Icon إلى leadingIcon / trailingIcon. ادمج iconOnly مع aria-label لأزرار الأيقونات المربعة.

import { RiAddLine, RiArrowRightLine } from "@remixicon/react";
{/* Pass component references, not rendered elements */}<Button leadingIcon={RiAddLine}>New project</Button><Button trailingIcon={RiArrowRightLine}>Continue</Button>
{/* Icon-only requires an aria-label */}<Button iconOnly leadingIcon={RiAddLine} aria-label="Add" />

معطَّل

العنصر الأصلي disabled السمة تحوّل كل متغير إلى سطحه المعطّل المكتوم.