الرقاقة · SDAIA Design System

شريحة

عنصر تفاعلي مدمج للوسوم والمرشّحات والتحديدات. متوفّر بأنماط ناعم وصُلب، وثلاثة أحجام، وشكل مستدير، وحالات محدَّد ومعطَّل.

Loading demo: chip-real-world

npx sdaia-ui@latest add chip

import { Chip } from "@/components/ui/chip"

<Chip style="soft" size="medium" />

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

Loading demo: chip-soft

شريحة بخلفية ممتلئة.

Loading demo: chip-solid

شريحة بزوايا مستديرة بالكامل.

Loading demo: chip-rounded

شريحة في الحالة المحدَّدة.

Loading demo: chip-selected

الشريحة متوفّرة بأحجام كبير ومتوسط وصغير.

Loading demo: chip-sizes

شريحة في الحالة المعطَّلة، تمنع التفاعل.

Loading demo: chip-disabled

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

Prop	Type	Default	Required
variant	'soft' \| 'solid' \| 'neutral' \| 'outline'	'soft'	optional
size	'sm' \| 'md' \| 'lg'	'md'	optional
rounded	boolean	true	optional
disabled	boolean	false	optional
selected	boolean	false	optional
leadingIcon	ReactNode	-	optional
trailingIcon	ReactNode	-	optional
onLeadingIconClick	(e: MouseEvent<HTMLSpanElement> \| KeyboardEvent<HTMLSpanElement>) => void	-	optional
onTrailingIconClick	(e: MouseEvent<HTMLSpanElement> \| KeyboardEvent<HTMLSpanElement>) => void	-	optional
trailingIconLabel	string	'Remove'	optional
leadingIconLabel	string	-	optional
avatar	boolean	false	optional
avatarSrc	string	default SaudiAvatar from sdaia-assets	optional
as	ElementType	'button'	optional
children	ReactNode	-	optional
dir	"ltr" \| "rtl"	—	optional