> ## 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.

# شارة

> اعرض معلومات مضمنة موجزة بمحتوى يقدمه المستدعي.

## نظرة عامة

تعرض `Badge` معلومات مضمنة موجزة، بما في ذلك التسميات القصيرة والأعداد. استخدم [Tag](https://docs.twenty.com/ar/ui/primitives/data-display/tag.md) للفئات، و[Chip](https://docs.twenty.com/ar/ui/primitives/data-display/chip.md) لعناصر التحكم الموجزة، أو [Status](https://docs.twenty.com/ar/ui/primitives/data-display/status.md) لحالة مسماة مع مؤشر.

**Light**

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

**Dark**

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

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

## استخدام

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

export const PreviewLabel = () => <Badge>Preview</Badge>;
```

مرر نصًا أو أرقامًا أو عقدًا كعناصر فرعية. تعرض الشارة المحتوى الذي توفره ولا تضيف أي تنسيق للعدد أو قواعد للظهور. العنصر الافتراضي هو `span` غير تفاعلي.

## مع أيقونة

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

export const AttachmentLabel = () => (
  <Badge>
    <IconPaperclip size={12} aria-hidden />
    Attachment
  </Badge>
);
```

الأيقونات هي عقد فرعية عادية. امنح الأيقونات الزخرفية `aria-hidden` واحتفظ بتسمية مرئية لشرح المحتوى.

## المظهر

**Light**

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

**Dark**

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

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

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

export const BadgeAppearances = () => (
  <Text style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
    <Badge size="sm" color="tertiary" shape="pill">
      Preview
    </Badge>
    <Badge size="md" color="inherit">
      In review
    </Badge>
    <Badge size="xs" color="primary" shape="circle">
      3
    </Badge>
    <Badge size="xs" color="secondary" shape="circle">
      12
    </Badge>
    <Badge color="accent">Last used</Badge>
  </Text>
);
```

يقبل `size` القيم `xs` أو `sm` أو `md`. يقبل `color` القيم `tertiary` و`inherit` و`primary` و`secondary` و`accent`. يقترن تنسيق `accent` بتعبئة accent-tertiary ونص accent11 في كلا النسقين. تحتفظ معالجة `primary` الصلبة بتعبئتها الزرقاء ونصها ذي اللون المميز. يقبل `shape` القيمة `pill` أو `circle`. القيم الافتراضية هي `sm` و`tertiary` و`pill`. تتميز المعالجة الدائرية بعرض ثابت يساوي ارتفاعها. استخدم `pill` للمحتوى الأطول، بما في ذلك الأعداد المختصرة.

**Light**

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

**Dark**

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

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

**Light**

[شارات ذات لون مميز ناعمة في السمتين الفاتحة والداكنة (light)](https://storybook.twenty.com/iframe.html?id=ui-data-display-badge--accent\&viewMode=story\&globals=colorScheme:light)

**Dark**

[شارات ذات لون مميز ناعمة في السمتين الفاتحة والداكنة (dark)](https://storybook.twenty.com/iframe.html?id=ui-data-display-badge--accent\&viewMode=story\&globals=colorScheme:dark)

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

## الأعداد والظهور

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

type InboxButtonProps = {
  count: number;
};

export const InboxButton = ({ count }: InboxButtonProps) => (
  <Button aria-label={`Inbox, ${count} unread messages`}>
    Inbox
    {count > 0 && (
      <Badge size="xs" color="primary" shape="pill" aria-hidden>
        {count > 99 ? '99+' : count}
      </Badge>
    )}
  </Button>
);
```

يتولى تطبيقك مسؤولية تنسيق الأرقام والاختصارات والتقييد وظهور الصفر والتسميات المترجمة. ضمّن المعنى الكامل في الاسم المتاح لعنصر التحكم المحيط عندما يكون عدده المضغوط زخرفيًا. يمكن للشارة المستقلة استخدام سمات الإتاحة الأصلية، بما في ذلك `aria-label` أو `aria-labelledby`.

## التركيب الأصلي

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

export const BuildStatus = () => {
  const badgeRef = useRef<HTMLSpanElement>(null);

  return (
    <Badge ref={badgeRef} title="Current build status" data-build="preview">
      Preview
    </Badge>
  );
};
```

تستهدف السمات الأصلية ومعالجات الأحداث و`className` و`style` و`ref` عنصر الجذر الفعلي. يقبل `render` عنصرًا أو دالة رد نداء من خلال تركيب Base UI. اختر مالكًا أصليًا مناسبًا للمحتوى التفاعلي:

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

export const ReleaseLink = () => (
  <Badge render={<Button href="#release-notes" size="sm" />}>
    Release notes
  </Badge>
);
```

يتولى Button المعروض سلوك التنقل ودلالات الرابط. تحتفظ الشارة بوضعها الافتراضي التقديمي ولا تستنتج التفاعل من محتواها.

## الإزاحة

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

**children** `ReactNode`

Caller-provided text, numbers, icons, or other inline content.

**color** `"accent" | "inherit" | "primary" | "secondary" | "tertiary"` (default: tertiary)

Neutral tertiary, inherited text, solid primary accent, soft accent tint, or secondary treatment.

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

Replaces the default span. Native props, handlers, and the ref target the rendered element.

**shape** `"circle" | "pill"` (default: pill)

Rounded pill label or fixed circle with width equal to its height. Use pill for longer content.

**size** `"md" | "sm" | "xs"` (default: sm)

Compact height, font size, and spacing: xs, sm, or md.


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