زر الإغلاق

علامة ✕ الدائرية المستخدمة لإغلاق الأسطح المدمجة والإعلانات والإشعارات المنبثقة والنوافذ المشروطة والأدراج. يُصيّر كل حجم رمزه الخاص بضربة حرفية (غير مُقيَّسة) - 1.6px عند 2xs، و2px عند xs/sm، و2.5px عند md - لتبقى السماكة دقيقة على مستوى البكسل.

2xs
xs
sm
md

التثبيت

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

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

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

npx boardui@latest add close-button

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

الأحجام

أربعة أحجام عبر الحجم الخاصية - 16، 20، 24، و32 بكسل. مرّر دائماً aria-label، لا يحتوي العنصر على نص مرئي.

<CloseButton size="2xs" aria-label="Close" /> {/* 16px, 1.6px stroke */}<CloseButton size="xs" aria-label="Close" /> {/* 20px, 2px stroke */}<CloseButton size="sm" aria-label="Close" /> {/* 24px, 2px stroke */}<CloseButton size="md" aria-label="Close" /> {/* 32px, 2.5px stroke */}

في رأس نافذة منبثقة

عنوان النافذة المنبثقة

<header className="flex items-center justify-between p-4"> <p className="text-body-medium text-text-primary">Modal title</p> <CloseButton size="md" aria-label="Close modal" onClick={onClose} /></header>