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

# الحالة

> اعرض حالة مسماة مع مؤشر ملوّن وملاحظات تحميل اختيارية.

## نظرة عامة

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

**Light**

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

**Dark**

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

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

## استخدام

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

export const RecordStatus = () => (
  <Status color="red" weight="medium">
    Urgent
  </Status>
);
```

`color` مطلوب ويستخدم لوحة ألوان النسق. تنقل التسمية المعنى بصورة مستقلة عن اللون. العنصر الافتراضي هو دائمًا `span`، بما في ذلك عند توفير معالج نقر أصلي؛ تؤكد `weight="medium"` نصه.

## التحميل والإعلانات

**Light**

[الحالة أثناء الحفظ (light)](https://storybook.twenty.com/iframe.html?id=ui-data-display-status--loading\&viewMode=story\&globals=colorScheme:light)

**Dark**

[الحالة أثناء الحفظ (dark)](https://storybook.twenty.com/iframe.html?id=ui-data-display-status--loading\&viewMode=story\&globals=colorScheme:dark)

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

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

type SaveStatusProps = { isSaving: boolean };

export const SaveStatus = ({ isSaving }: SaveStatusProps) => (
  <div role="status">
    <Status color={isSaving ? 'blue' : 'green'} loading={isSaving}>
      {isSaving ? 'Saving' : 'Saved'}
    </Status>
  </div>
);
```

يعرض `loading` أداة تحميل زخرفية بعد التسمية ويضبط `aria-busy` افتراضيًا على `true`. وفّر `aria-busy` صراحةً عندما يكون سير العمل المحيط مسؤولًا عن تلك الحالة. لا يضيف المكوّن منطقة حية ولا يغيّر نصه تلقائيًا. أبقِ حاوية `role="status"` مركّبة عندما ينبغي الإعلان عن التحديثات للتقنية المساعدة، وقدّم تسمية تصف الحالة الحالية.

## تغيير حالة

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

type ChangeStatusActionProps = {
  isUpdating: boolean;
  onChangeStatus: () => void;
};

export const ChangeStatusAction = ({
  isUpdating,
  onChangeStatus,
}: ChangeStatusActionProps) => (
  <Status
    color="blue"
    loading={isUpdating}
    render={
      <button
        type="button"
        disabled={isUpdating}
        onClick={onChangeStatus}
        aria-label="Change record status"
      />
    }
  >
    {isUpdating ? 'Updating' : 'In progress'}
  </Status>
);
```

أنشئ عنصرًا مالكًا تفاعليًا عبر `render`. ضع معالج النقر والسمات الأصلية والمرجع وحالة التعطيل على ذلك العنصر المالك. يوفر الزر الحقيقي التركيز والتنشيط بالمؤشر وبمفتاح Enter وبمفتاح Space. يعرض `Status.loading` التقدم؛ مرّر `disabled` إلى الزر عندما يجب أن ينتظر الإجراء. للتنقل، اعرض رابطًا بوجهته، مثل `<a href="/records" />`. تحتفظ العناصر المالكة الأصلية بمظهر Status. تحافظ العقد الفرعية على النص والترجمات والروابط المقصودة التي يملكها المستدعي.

## الإزاحة

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

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

Theme color used for the status background, text, and loader.

**loading** `boolean` (default: false)

Shows a decorative loader after the label and defaults aria-busy to true. The caller owns announcements and disabled interaction.

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

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

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

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

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