> ## 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` объединяет цветную точку, текстовую метку и необязательный индикатор загрузки. Используйте его для состояний рабочих процессов или записей. Используйте [Tag](https://docs.twenty.com/ru/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`. Разместите его обработчик клика, нативные атрибуты, ref и состояние disabled на этом элементе-владельце. Настоящая кнопка поддерживает активацию с помощью фокуса, указателя, Enter и Space. `Status.loading` отображает ход выполнения; передайте `disabled` кнопке, когда действие должно ждать. Для навигации отрисуйте ссылку с её назначением, например `<a href="/records" />`. Нативные элементы-владельцы сохраняют внешний вид Status. Дочерние элементы Node сохраняют текст, переводы и намеренно добавленные ссылки, принадлежащие вызывающему коду.

## Свойства

Типы и значения по умолчанию генерируются из публичных типов компонента. Также принимаются нативные атрибуты и обработчики событий.

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