الشارة

يعرض شارة أو مكوّناً يشبه الشارة.

Loading demo: badge-real-world

التثبيت

npx sdaia-ui@latest add badge

import { Badge } from "@/components/ui/badge"

<Badge>Label</Badge>

استخدم خاصية `size` لتغيير حجم الشارة.

Loading demo: badge-size

الشارة الناعمة الافتراضية بلون محايد.

Loading demo: badge-default

استخدم `style="Solid"` للحصول على شارة ممتلئة عالية التباين.

Loading demo: badge-solid

استخدم `color="Primary"` لتطبيق اللون الأساسي للهوية البصرية.

Loading demo: badge-primary

استخدم `color="Error"` للإشارة إلى حالة حرجة أو خطأ.

Loading demo: badge-destructive

استخدم `pill={true}` للحصول على شارة بشكل كبسولة مستديرة بالكامل.

Loading demo: badge-pill

استخدم `iconOnly={true}` لعرض الشارة بأيقونة فقط بدون نص.

Loading demo: badge-icon

خصائص مكوّن Badge.

Prop	Type	Default	Required
children	ReactNode	-	optional
size	'sm' \| 'md' \| 'lg'	'md'	optional
variant	'soft' \| 'solid'	'soft'	optional
color	'neutral' \| 'primary' \| 'secondary' \| 'tertiary' \| 'info' \| 'warning' \| 'error'	'neutral'	optional
pill	boolean	false	optional
iconOnly	boolean	false	optional
leadingIcon	ReactNode	-	optional
trailingIcon	ReactNode	-	optional