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

> Afișează o stare denumită cu un indicator colorat și feedback de încărcare opțional.

## Prezentare generală

`Status` combină un punct colorat, o etichetă text și un indicator de încărcare opțional. Folosește-l pentru stările fluxului de lucru sau ale înregistrărilor. Folosește [Tag](https://docs.twenty.com/ro/ui/primitives/data-display/tag.md) pentru o categorie fără indicatorul de stare.

**Light**

[Exemplu de Status (light)](https://storybook.twenty.com/iframe.html?id=ui-data-display-status--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Exemplu de Status (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)

## Utilizare

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

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

`color` este obligatoriu și utilizează paleta temei. Eticheta comunică semnificația independent de culoare. Elementul implicit este întotdeauna un `span`, inclusiv atunci când este furnizat un handler de clic nativ; `weight="medium"` îi evidențiază textul.

## Încărcare și anunțuri

**Light**

[Stare în timpul salvării (light)](https://storybook.twenty.com/iframe.html?id=ui-data-display-status--loading\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Stare în timpul salvării (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` afișează un indicator de încărcare decorativ după etichetă și setează implicit `aria-busy` la `true`. Furnizează explicit `aria-busy` atunci când fluxul de lucru înconjurător deține această stare. Componenta nu adaugă o regiune live și nu își modifică automat textul. Menține montat un container `role="status"` atunci când actualizările trebuie anunțate tehnologiei asistive și oferă o etichetă care descrie starea curentă.

## Modifică o stare

```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>
);
```

Compune un owner interactiv prin `render`. Plasează handlerul său de clic, atributele native, ref și starea disabled pe acel owner. Un buton real oferă activare prin focalizare, indicator, Enter și Space. `Status.loading` afișează progresul; transmite `disabled` butonului atunci când acțiunea trebuie să aștepte. Pentru navigare, redă un link cu destinația sa, cum ar fi `<a href="/records" />`. Ownerii nativi păstrează aspectul Status. Elementele copil Node păstrează textul, traducerile și linkurile intenționate deținute de apelant.

## Proprietăți

Tipurile și valorile implicite sunt generate din tipurile publice ale componentei. Sunt acceptate și atributele native, precum și gestionarii de evenimente.

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