زر الأيقونة

نظرة عامة

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

الصيغ

أربع صيغ. الخافتة هي الصيغة المؤكّدة من فيغما (زر التصفية في رأس البحث): حبّة رمادية مصنفرة بأيقونة خافتة. الباقي مبني من الرموز نفسها.

الأحجام

ثلاثة أحجام: صغير ٣٢، ومتوسط ٤٠ (افتراضي فيغما)، وكبير ٤٨. استخدم الكبير حين تحتاج مساحة لمس ٤٤ بكسل على الأقل بمفردها.

التركيب

السلوك

زر الأيقونة قابل للتركيز بلوحة المفاتيح ويُفعّل بمفتاحي Enter وSpace كأي زر. عند التحويم أو الضغط تتبدّل تعبئته عبر رموز الحركة (feedback)، وتظهر حلقة تركيز واضحة عند التنقّل بلوحة المفاتيح. لأنه بلا نص مرئي ينطق قارئ الشاشة تسمية الوصول الإلزامية لا اسم الأيقونة، وعند التعطيل يفقد التفاعل ويخفت. الأيقونات الاتجاهية مثل الأسهم تنعكس تلقائيا مع اتجاه الصفحة.

افعل ولا تفعل

إمكانية الوصول

• التسمية إلزامية: كل زر أيقونة يحمل aria-label عربية تسمّي الإجراء، لا اسم الأيقونة.
• مساحة اللمس ٤٤ بكسل على الأقل؛ الحجم الكبير يحققها بمفرده، والأصغر يحتاج هامش لمس.
• الأيقونات الاتجاهية (الأسهم) تنعكس مع اتجاه الصفحة تلقائيا.

الشيفرة

زر الأيقونة مكوّن واحد مشترك يُستورد من حزمة المكوّنات. التسمية خاصية إلزامية لأن الزر بلا نص مرئي. الاستخدام في React أولا، ثم عقد CSS الذي يضبط مساحة اللمس المربعة.

import { IconButton } from "@mercato/components";

<IconButton icon="filter_alt" label="تصفية" variant="subtle" />
<IconButton icon="search" label="بحث" size="lg" />
<IconButton icon="add" label="إضافة" variant="primary" />
<IconButton icon="delete" label="حذف" variant="danger" />
<IconButton icon="favorite" label="المفضلة" filled />

/* Icon-only control: a square touch target, authored from tokens only. */
.btn-icon { padding: var(--spacing-inset-xs); min-width: 44px; aspect-ratio: 1; }
.btn-sm.btn-icon { min-width: 36px; }

لا يحمل الزر قيمة لون أو حشو مباشرة: تبديل الوضع الداكن أو إعادة العلامة يسري تلقائيا لأن كل صيغة تمرّ عبر رمز دلالي.

مكوّنات ذات صلة