وسم
Tagوسم مضغوط في React للفئات والكلمات المفتاحية، بمجموعة درجات SDGA وثلاثة أحجام وأيقونات ووضع قابل للإزالة. جاهز للاتجاه العربي.
يسمي Tag المحتوى. اختر درجة (تعبئات *-subtle هي مجموعة SDGA)، أضف أيقونات، أو اجعله قابلاً للإزالة بـ dismissible.
متى تستخدمه
استخدم Tag لوسم المحتوى بفئة أو كلمة مفتاحية أو صفة قصيرة مثل "مسودة" أو "الرياض". استخدم StatusTag حين تعبر التسمية عن حالة بنقطة ملونة، وChip حين يبدلها المستخدم.
اجعل الوسم dismissible فقط حين تغير إزالته شيئاً، مثل مرشح مطبق.
أمثلة
الخصائص
الخصائص التي يعرفها Tag. سمات العنصر الأصلي تمر كما هي.
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
variant | "primary" | "secondary" | "outline" | "destructive" | "destructive-subtle" | "default" | "success" | "warning" | "info" | "primary-subtle" | "secondary-subtle" | "success-subtle" | "warning-subtle" | "info-subtle" | "on-color" | ||
size | "sm" | "md" | "lg" | ||
shape | "pill" | "squared" | ||
iconOnly | boolean | ||
outlined | boolean | ||
asChild | boolean | Render as the single child element instead of a <span> (see Button). | |
startIcon | react.ReactNode | Icon rendered before the tag text. Sized to the tag font (0.875em). | |
endIcon | react.ReactNode | Icon rendered after the tag text. Sized to the tag font (0.875em). | |
dismissible | boolean | Render a trailing close button - turns the tag into the DGA "tag/chip"
pattern. Uncontrolled by default: the tag hides itself when the close
button is clicked. Pass open to control visibility yourself.
Not combinable with asChild - the consumer's slotted element (usually an
<a>) would end up with an interactive <button> inside it, which is
invalid HTML. In that combo the close button is suppressed and a dev
warning is logged. | |
open | boolean | Controlled visibility. When provided, onDismiss becomes the only signal. | |
onDismiss | () => void | Fires when the close button is clicked, in both controlled and uncontrolled mode. | |
closeLabel | string | Accessible label on the close button. Defaults to "Dismiss", or "إزالة" when the DgaProvider locale is Arabic. |
إمكانية الوصول
يعرض Tag نصاً عادياً، لذا يقرؤه قارئ الشاشة ضمن المحتوى. تحمل الأيقونات aria-hidden، لذا يجب أن تحمل التسمية المعنى.
لزر الإزالة اسم متاح يتضمن نص الوسم. تحقق ألوان الدرجات متطلبات التباين في الوضعين الفاتح والداكن.