الأزرار

تُعد الأزرار من المكونات التفاعلية الأساسية التي تُمكّن المستخدمين من تنفيذ الإجراءات، وإرسال البيانات، والتنقل داخل الخدمات الرقمية. وتؤدي دورًا مهمًا في توجيه المستخدمين لإكمال المهام، لذا ينبغي أن يبيّن نص الزر الإجراء الذي سينفذ عند النقر عليه.

الأزرار

الزر في HTML هو عنصر تفاعلي قابل للنقر، صُمم لتنفيذ إجراء أو حدث محدد. ويُعد من العناصر الأساسية في واجهات الويب، إذ يوجّه تفاعل المستخدمين بدءًا من إرسال النماذج وحتى التنقل بين الصفحات.

مقدمة

يُعد الزر أحد أهم المكونات الأساسية في نظام التصميم، ويشكّل عنصرًا محوريًا تعتمد عليه العديد من مكونات الواجهة الأخرى. فهو يوضح الإجراءات المتاحة للمستخدم، ويسهم في تنفيذ العمليات، وإرسال البيانات، وتوجيه المستخدم خلال رحلته داخل الموقع الإلكتروني.

التمثيل المرئي

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

يُستخدم الزر الممتلئ (Primary) لإبراز الإجراء الرئيسي في الصفحة، ويعتمد على اللون الأساسي ليكون أكثر وضوحًا وتميزًا عن بقية العناصر.

يتميز الزر ذو الإطار بدرجة إبراز أقل من الزر الرئيسي، ويُستخدم للإجراءات الاختيارية أو عندما يكون الإجراء أقل أهمية مقارنةً بإجراء رئيسي آخر.

يُعد الزر ذو الخلفية الخفيفة بديلًا للزر ذي الإطار، ويتمتع بنفس مستوى الأولوية، ويُستخدم عادةً للإجراءات الثانوية أو الاختيارية.

يتمتع زر الرابط بأقل مستوى من الأولوية، ويُستخدم غالبًا داخل البطاقات أو عناصر المحتوى كوسيلة للتنقل إلى صفحة أو محتوى آخر.

أنواع الأزرار

الزر الرئيسي

يُستخدم للإجراء الرئيسي في الصفحة.

الزر الثانوي

يُستخدم للإجراءات الثانوية أو بجانب الزر الرئيسي.

الزر الثالث

يُستخدم للإجراءات البسيطة التي تتطلب درجة إبراز أقل.

مكونات الأزرار