الوسم

وسم صغير يُستخدم لتصنيف العنصر أو تصفيته أو إبرازه.

Loading demo: tag-real-world

التثبيت

npx sdaia-ui@latest add tag

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

<Tag>Label</Tag>

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

Loading demo: tag-size

الوسم الافتراضي النصي فقط.

Loading demo: tag-default

استخدم `action="أيقونة"` لإضافة أيقونة لاحقة إلى الوسم.

Loading demo: tag-with-icon

استخدم `action="Count"` لعرض عدد رقمي داخل الوسم.

Loading demo: tag-with-count

استخدم `leading="Dot"` لعرض نقطة حالة قبل التسمية.

Loading demo: tag-with-dot

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

Prop	Type	Default	Required
label	string	'Label'	optional
size	'sm' \| 'md' \| 'lg'	'lg'	optional
leading	'default' \| 'icon' \| 'country' \| 'avatar' \| 'dot'	'default'	optional
action	'text-only' \| 'icon' \| 'count'	'text-only'	optional
leadingIcon	ReactNode	-	optional
trailing	boolean	true	optional
count	number	4	optional
avatarSrc	string	'/images/avatar.webp'	optional
flagSrc	string	'/svgs/SaudiFlag.svg'	optional
dotColor	string	'rgba(37,147,95,1)'	optional
onClose	() => void	-	optional
disabled	boolean	false	optional