وسم
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". Override for i18n. |
إمكانية الوصول
Tag نص، فيُقرأ ضمن المحتوى. الأيقونات aria-hidden، والتسمية هي التي تحمل المعنى.
لزر الإغلاق اسم متاح يتضمّن نص الوسم، وتحقّق ألوان الدرجات متطلّبات التباين في الوضعين الفاتح والداكن.