البناء · جديد

الوسم

يصف شيئًا بحالة أو فئة (مدفوع، معلّق، متأخر). غير تفاعلي: لا تجعله يبدو قابلًا للضغط.

المعاينة

المعكوسة هي المحتوى الإنجليزي نفسه من اليمين إلى اليسار، لتفصل خطأ الاتجاه عن خطأ الترجمة.

قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.

npx shadcn@latest add @ritla/tag

import { Tag } from "@/components/ui/tag";

<Tag color="success" iconLeading={CheckCircleIcon}>Paid</Tag>

خمسة ألوان بنمطين subtle وsolid، ومقاسان، وأيقونة في البداية أو النهاية، أو علم بـflag.

الخاصية	النوع	الافتراضي	الوصف
`children`	`ReactNode`		خاصية Label: الكلمة تحمل الحالة لا اللون.
`color`	`"gray" \| "brand" \| "success" \| "warning" \| "error"`	`"gray"`	خاصية Color.
`styling`	`"subtle" \| "solid"`	`"subtle"`	خاصية Styling.
`size`	`"sm" \| "md"`	`"md"`	خاصية Size.
`iconLeading / iconTrailing`	`IconComponent`		خاصية Style = Leading icon / Trailing icon.
`flag`	`string`		خاصية Style = Flag: رمز الدولة (يحتاج `@kanz/flags`).

الأرقام: الأرقام في الوسم تتبع numerals عبر formatNumber.
الخط العربي: ‏label-14 (أو label-12 في الصغير) بوزن Medium؛ الوسم يطول مع السطر العربي.