مرجع داخلي — Internal reference

Button System

The unified button system for BrightAI — every button on the production site resolves to .btn + a variant + a size + a state. All variants share the same base (44px height, 350ms transition, 2px focus ring offset 2px). Tap targets ≥ 44px on every size to meet WCAG 2.5.5 AAA. Page is fully indexable (REPORTS-SEO-FOUNDATION).

نظام الأزرار الموحّد في BrightAI. كل زر على الموقع يستخدم .btn كنقطة بداية مع variant واحد من القائمة تحت. أحجام: sm 36px، md 44px (الافتراضي)، lg 52px، xl 60px. الـ focus ring موحّد: 2px brand color مع offset 2px.

01 · Base

Base button

The foundation: .btn alone gives you a neutral, accessible button with no variant color. Rarely used directly — start with a variant below.

رابط بستايل زر

02 · Variants

Button variants

Six semantic variants plus the legacy .btn--glow. Each variant defines background, text color, and border — never override these manually.

.btn--primary الـ CTA الأساسي

.btn--secondary إجراء ثانوي

.btn--ghost إجراء خفيف

.btn--outline حد فقط

.btn--whatsapp تواصل واتساب

تواصل واتساب

.btn--danger إجراء مدمر

.btn--glow legacy — gradient + glow

.btn--accent success / confirm

03 · Sizes

Size ladder

Four sizes — sm 36px, md 44px (default, AAA), lg 52px, xl 60px (hero). Every size meets WCAG 2.5.5 AAA tap target on the height axis; horizontal padding scales proportionally.

.btn--sm 36px / 12px

.btn--md 44px / 16px (default)

.btn--lg 52px / 24px

.btn--xl 60px / 32px (hero)

04 · States

Button states

Five states — default, hover (mouse over), active (pressed), focus (keyboard), disabled, and loading (in-flight async). The loading state shows a spinner and disables clicks.

default

hover (mouse over)

active (pressed)

focus (keyboard)

disabled

loading (with spinner)

loading + outline

loading + ghost

05 · Icon buttons

Icon + label + icon-only

Three patterns: icon+label (button text with leading icon), icon trailing (chevron after text), and icon-only (square aspect for compact toolbars). Every pattern respects the same size ladder.

Icon + label (in-row)

Icon-only (square aspect)

06 · Real-world

Real-world combinations

The system in context — hero CTAs, in-row actions, full-width mobile stacks, and dialog confirmations.

Hero CTA pair (xl + md)

تحدث مع المبيعات

In-row actions (sm)

Full-width mobile stack (md + block)

WhatsApp CTA (lg)

تواصل مباشر عبر واتساب

Loading state in context (form submit)

07 · Legacy

Legacy aliases

Old class names preserved for HTML compatibility. All aliases resolve to the canonical .btn + variant + size.

Legacy class	Canonical	Status
`.btn-primary` (single dash)	`.btn--primary`	✅ preserved
`.btn-secondary`	`.btn--secondary`	✅ preserved
`.btn-ghost`	`.btn--ghost`	✅ preserved
`.btn-accent`	`.btn--accent`	✅ preserved
`.glow-btn`	`.btn--glow`	✅ preserved
`.home-cta-primary`	`.btn--glow .btn--primary`	✅ preserved
`.home-cta-secondary`	`.btn--secondary`	✅ preserved
`.wa-btn`	`.btn--whatsapp`	✅ preserved

Aliases are kept indefinitely for HTML compatibility — they're used in 81+ existing page elements. New code should use canonical names (.btn--primary over .btn-primary).