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

> Show a named state with a colored indicator and optional loading feedback.

export const StoryEmbed = ({storyId, title, height = 120}) => <>
    <Tabs>
      <Tab title="Light">
        <iframe title={`${title} (light)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:light`} width="100%" height={height} loading="lazy" allow="clipboard-write" style={{
  border: 0
}} />
      </Tab>
      <Tab title="Dark">
        <iframe title={`${title} (dark)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:dark`} width="100%" height={height} loading="lazy" allow="clipboard-write" style={{
  border: 0
}} />
      </Tab>
    </Tabs>
    <a href={`https://storybook.twenty.com/?path=/story/${storyId}`}>
      Open in Storybook
    </a>
  </>;

`Status` combines a colored dot, a text label, and an optional loader. Use it for workflow or record states. Use [Tag](/ui/primitives/data-display/tag) for a category without the status indicator.

<StoryEmbed storyId="ui-data-display-status--display" title="Status example" height={90} />

## Usage

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

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

`color` is required and uses the theme palette. The label communicates the meaning independently of the color. The default element is always a `span`, including when a native click handler is supplied; `weight="medium"` emphasizes its text.

## Loading and announcements

<StoryEmbed storyId="ui-data-display-status--loading" title="Status while saving" height={90} />

```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` shows a decorative loader after the label and defaults `aria-busy` to `true`. Supply `aria-busy` explicitly when the surrounding workflow owns that state. The component does not add a live region or change its text automatically. Keep a `role="status"` container mounted when updates should be announced to assistive technology, and provide a label that describes the current state.

## Change a state

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

Compose an interactive owner through `render`. Put its click handler, native attributes, ref, and disabled state on that owner. A real button supplies focus, pointer, Enter, and Space activation. `Status.loading` displays progress; pass `disabled` to the button when the action should wait. For navigation, render a link with its destination, such as `<a href="/records" />`. Native owners retain Status's appearance. Node children preserve caller-owned text, translations, and intentional links.

## Props

Types and defaults are generated from the public component types. Native attributes and event handlers are also accepted.

<ParamField body="color" type="&#x22;amber&#x22; | &#x22;blue&#x22; | &#x22;bronze&#x22; | &#x22;brown&#x22; | &#x22;crimson&#x22; | &#x22;cyan&#x22; | &#x22;gold&#x22; | &#x22;grass&#x22; | &#x22;gray&#x22; | &#x22;green&#x22; | &#x22;iris&#x22; | &#x22;jade&#x22; | &#x22;lime&#x22; | &#x22;mint&#x22; | &#x22;orange&#x22; | &#x22;pink&#x22; | &#x22;plum&#x22; | &#x22;purple&#x22; | &#x22;red&#x22; | &#x22;ruby&#x22; | &#x22;sky&#x22; | &#x22;tomato&#x22; | &#x22;turquoise&#x22; | &#x22;violet&#x22; | &#x22;yellow&#x22;" required>
  Theme color used for the status background, text, and loader.
</ParamField>

<ParamField body="loading" type="boolean" default="false">
  Shows a decorative loader after the label and defaults aria-busy to true. The caller owns announcements and disabled interaction.
</ParamField>

<ParamField body="onClick" type="MouseEventHandler<HTMLSpanElement>">
  Native click handler. Does not change the default span or add keyboard activation.
</ParamField>

<ParamField body="render" type="ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, StatusState>">
  Replaces the default span. Compose a button or link to provide explicit interaction semantics.
</ParamField>

<ParamField body="weight" type="&#x22;medium&#x22; | &#x22;regular&#x22;" default="regular">
  Font weight of the label.
</ParamField>


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