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

# Stato

> Mostra uno stato denominato con un indicatore colorato e feedback di caricamento facoltativo.

## Panoramica

`Status` combina un punto colorato, un'etichetta di testo e un indicatore di caricamento facoltativo. Usalo per gli stati del workflow o dei record. Usa [Tag](https://docs.twenty.com/it/ui/primitives/data-display/tag.md) per una categoria senza l'indicatore di stato.

**Light**

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

**Dark**

[Esempio di stato (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)

## Utilizzo

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

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

`color` è obbligatorio e utilizza la palette del tema. L'etichetta comunica il significato indipendentemente dal colore. L'elemento predefinito è sempre un `span`, anche quando viene fornito un gestore di clic nativo; `weight="medium"` enfatizza il relativo testo.

## Caricamento e annunci

**Light**

[Stato durante il salvataggio (light)](https://storybook.twenty.com/iframe.html?id=ui-data-display-status--loading\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Stato durante il salvataggio (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` mostra un caricatore decorativo dopo l'etichetta e imposta per impostazione predefinita `aria-busy` su `true`. Fornisci esplicitamente `aria-busy` quando il workflow circostante gestisce quello stato. Il componente non aggiunge una regione live né modifica automaticamente il proprio testo. Mantieni montato un contenitore `role="status"` quando gli aggiornamenti devono essere annunciati alla tecnologia assistiva e fornisci un'etichetta che descriva lo stato corrente.

## Modifica uno stato

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

Componi un proprietario interattivo tramite `render`. Inserisci il relativo gestore di clic, gli attributi nativi, ref e lo stato disabilitato su quel proprietario. Un pulsante reale fornisce l'attivazione tramite focus, puntatore, Invio e Barra spaziatrice. `Status.loading` mostra l'avanzamento; passa `disabled` al pulsante quando l'azione deve attendere. Per la navigazione, esegui il rendering di un link con la relativa destinazione, ad esempio `<a href="/records" />`. I proprietari nativi mantengono l'aspetto di Status. I nodi figli mantengono il testo, le traduzioni e i link intenzionali gestiti dal chiamante.

## Props

I tipi e i valori predefiniti vengono generati dai tipi di componenti pubblici. Sono accettati anche gli attributi nativi e i gestori di eventi.

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