> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# علامة

> ضع تسمية على فئة أو سمة باستخدام لون النسق وأيقونة اختيارية.

## نظرة عامة

استخدم `Tag` للفئات أو الأولويات أو السمات القصيرة الأخرى. احتفظ بتسمية نصية حتى لا يعتمد المعنى على اللون. استخدم [الحالة](https://docs.twenty.com/ar/ui/primitives/data-display/status.md) عندما تحتاج إلى مؤشر حالة وملاحظات التحميل.

**Light**

[مثال على Tag (light)](https://storybook.twenty.com/iframe.html?id=ui-data-display-tag--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[مثال على Tag (dark)](https://storybook.twenty.com/iframe.html?id=ui-data-display-tag--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-data-display-tag--display)

## استخدام

```tsx theme={null}
import { Tag } from 'twenty-ui/primitives/data-display';

export const PriorityTag = () => <Tag color="red">Urgent</Tag>;
```

`color` مطلوب ويقبل لون نسق أو `transparent`. العنصر الافتراضي يكون دائمًا `span`، بما في ذلك عند توفير معالج نقر أصلي. أضف أيقونة زخرفية باستخدام `startIcon`؛ يوفر الملصق معناه المتاح.

## الأشكال

**Light**

[أشكال الشارة (light)](https://storybook.twenty.com/iframe.html?id=ui-data-display-tag--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[أشكال الشارة (dark)](https://storybook.twenty.com/iframe.html?id=ui-data-display-tag--catalog\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-data-display-tag--catalog)

```tsx theme={null}
import { Tag } from 'twenty-ui/primitives/data-display';

export const CategoryTags = () => (
  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
    <Tag color="blue" variant="soft">
      Customer
    </Tag>
    <Tag color="green" variant="solid">
      Partner
    </Tag>
    <Tag color="orange" variant="outline">
      Prospect
    </Tag>
    <Tag color="transparent" variant="outline" borderStyle="dashed">
      Unassigned
    </Tag>
  </div>
);
```

`soft` هو نمط العرض الافتراضي. يبرز `solid` الملصق، ويضيف `outline` حدودًا، ويزيل `ghost` الخلفية. استخدم `borderStyle="dashed"` مع `outline` و`weight="medium"` للحصول على ملصق أقوى.

## ألوان

**Light**

[ألوان سمة الشارة (light)](https://storybook.twenty.com/iframe.html?id=ui-data-display-tag--colors\&viewMode=story\&globals=colorScheme:light)

**Dark**

[ألوان سمة الشارة (dark)](https://storybook.twenty.com/iframe.html?id=ui-data-display-tag--colors\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-data-display-tag--colors)

أبقِ التسمية ذات معنى من دون الاعتماد على لونها. يقارن الكتالوج المعالجة الناعمة الافتراضية؛ وتتوفر لوحة الألوان نفسها للأشكال الأخرى.

## تصفية حسب علامة

```tsx theme={null}
import { Tag } from 'twenty-ui/primitives/data-display';

type CategoryFilterProps = {
  selected: boolean;
  onToggle: () => void;
};

export const CategoryFilter = ({ selected, onToggle }: CategoryFilterProps) => (
  <Tag
    color="blue"
    variant={selected ? 'solid' : 'outline'}
    render={<button type="button" aria-pressed={selected} onClick={onToggle} />}
  >
    Customer
  </Tag>
);
```

أنشئ مالكًا تفاعليًا عبر `render`. ضع معالج النقر والسمات الأصلية والمرجع وحالة التعطيل على ذلك المالك. يوفر الزر الحقيقي التركيز والتنشيط بمفتاحَي Enter وSpace. تنتمي حالة التحديد إلى تطبيقك؛ استخدم `aria-pressed` للتبديل ونمط عرض مرئي للحالة المحددة. للتنقل، اعرض رابطًا مع وجهته، مثل `<a href="/records" />`. يحتفظ المالكون الأصليون بمظهر Tag.

## تسميات طويلة

افتراضيًا، يقوم `truncate={true}` باقتطاع تسميات السلاسل النصية المقيّدة ويعرض نصها الكامل في تلميح عند التمرير. اضبط `truncate={false}` للاحتفاظ بالتسمية كاملةً بعرضها الطبيعي من دون تلميح أداة، حتى عندما يكون عنصرها الأصل أضيق. يتولى تخطيط العنصر الأصل الالتفاف والتمرير والاقتصاص.

```tsx theme={null}
import { Tag } from 'twenty-ui/primitives/data-display';

export const FullCategoryLabel = () => (
  <Tag color="green" truncate={false}>
    Enterprise customer
  </Tag>
);
```

يبقى محتوى العناصر الفرعية لـ Node مملوكًا للمستدعي، لذا أنشئ نصها وترجماتها وروابطها المقصودة مباشرةً.

## الإزاحة

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

**borderStyle** `"dashed" | "solid"` (default: solid)

Border style used by the outline variant.

**color** `"amber" | "blue" | "bronze" | "brown" | "crimson" | "cyan" | "gold" | "grass" | "gray" | "green" | "iris" | "jade" | "lime" | "mint" | "orange" | "pink" | "plum" | "purple" | "red" | "ruby" | "sky" | "tomato" | "transparent" | "turquoise" | "violet" | "yellow"` *required*

Theme color for the tag, or `transparent` for an unfilled label.

**onClick** `MouseEventHandler\<HTMLSpanElement\>`

Native click handler. Does not change the default span or add keyboard activation.

**render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, TagState\>`

Replaces the default span. Compose a button or link to provide explicit interaction semantics.

**startIcon** `ReactNode`

Decorative icon before the label. Hidden from assistive technology.

**truncate** `boolean` (default: true)

Truncates constrained string labels and exposes the full text in a tooltip. Set to `false` to keep the full label at its natural width without a tooltip, even inside a narrower parent.

**variant** `"ghost" | "outline" | "soft" | "solid"` (default: soft)

Visual treatment of the tag background and border.

**weight** `"medium" | "regular"` (default: regular)

Font weight of the label.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.