Buttons
Primary, secondary, outline, text and destructive. Forward arrows point left in Arabic.
ARABIC · RIGHT TO LEFT
Every component, in Arabic and right to left
Preview the Pixels components, patterns and templates exactly as Arabic-speaking users in the UAE and the Middle East will see them: the same tokens, mirrored layouts and Arabic typography.
Arabic typography
IBM Plex Sans Arabic, with taller line heights and no letter spacing, so the letters stay connected.
عنوان رئيسي
32 / 44
عنوان ثانوي
24 / 36
عنوان قسم
18 / 30
نص أساسي لوصف المحتوى بوضوح
15 / 26
نص مساعد وملاحظات صغيرة
13 / 22
Components
The Pixels components with Arabic content and a right-to-left layout. They are live, so try them.
Input fields
Labels, helper and error text sit on the right. Emails stay left-to-right.
Toggles and selection
Switches move from right to left when turned on; labels follow the control.
Tabs and breadcrumbs
Tabs start on the right; breadcrumb chevrons point left. Arrow keys follow reading order.
عرض جميع المشاريع النشطة والمكتملة.
Alerts
The status stripe and icon move to the start of the line, on the right.
تم الحفظتم حفظ التغييرات بنجاح.
تنبيهينتهي اشتراكك خلال ٣ أيام.
تعذّر الدفعتحقق من بيانات البطاقة وحاول مرة أخرى.
Badges, avatars and tooltip
Avatar stacks overlap toward the left. Hover the button to see the tooltip.
جديدنشطقيد المراجعةمرفوض
سمل+٥
فريق التصميم · ٨ أعضاء
Card
Progress fills from right to left; the link arrow points left.
Table and pagination
Columns read right to left; amounts in AED; "Previous" sits on the right.
العميلالمدينةالحالةالمبلغ
شركة النخبةدبيمدفوع٤٬٢٠٠ د.إ
مؤسسة الأفقأبوظبيمعلّق١٬٨٥٠ د.إ
متجر الواحةالشارقةمتأخر٩٥٠ د.إ
Stepper
Steps run from right to left.
- البيانات
- ٢الدفع
- ٣التأكيد
Modal
Title on the right, close button on the left, primary action first.
حذف المشروع؟
سيتم حذف «تطبيق التوصيل» وجميع ملفاته. لا يمكن التراجع عن هذا الإجراء.
Patterns
Common flows built from the same components, in Arabic.
Sign in
Email, password, remember me and forgot password.
مرحباً بعودتك
سجّل الدخول للمتابعة إلى حسابك
Empty state
Icon, message and a clear next action.
لا توجد مشاريع بعد
ابدأ بإنشاء مشروعك الأول ودعوة فريقك للعمل معاً.
Search and filters
Search field, filter chips and a result list.
-
ن
طلب رقم #1042نورة الكعبي · دبيجديد
-
خ
طلب رقم #1039خالد المنصوري · العينقيد الشحن
Templates
A full page template laid out right to left.
Store dashboard
Sidebar on the right, stats and chart reading right to left, actions on the left.
لوحة التحكممرحباً أحمد، إليك ملخص اليوم
الإيرادات48,250 د.إ+٨٪
الطلبات312+١٢٪
عملاء جدد57−٣٪
السبتالأحدالإثنينالثلاثاءالأربعاءالخميسالجمعة
Icons in RTL
Only icons that show direction are mirrored. Each pair shows the English icon, then the Arabic one.
RTL guidelines
Practical rules we follow so the Arabic experience feels native, not just translated.
Mirror the whole layout
Navigation, alignment and column order start on the right. Use logical CSS properties instead of left and right.
margin-inline-start: 16px;
padding-inline: 24px;
text-align: start;Keep numbers and Latin text left-to-right
Phone and card numbers, emails and codes stay left-to-right inside Arabic text.
هاتف: +971 50 123 4567
هاتف: 4567 123 50 971+
Mirror only directional icons
Arrows, back and forward, undo and send are mirrored. Clocks, media controls and logos are not.
Use an Arabic typeface
Raise line height to 1.6 or more and never add letter spacing: it breaks the connected letters.
مرحباً بك
مرحباً بك
Handle mixed text
For fields where people may type Arabic or English, use dir="auto" so each
entry takes the right direction.
Currency and numerals
Place the currency after the amount (4,200 د.إ) and follow the client's choice of Western or Arabic-Indic numerals. Try the switch in the side panel.
تم نسخ الرمز