> ## 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 = 240}) => <>
Open in Storybook
;
`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.
## Record state
```tsx theme={null}
import { Status } from 'twenty-ui/primitives/data-display';
export const RecordStatus = () => Active;
```
`color` is required and uses the theme palette. The label communicates the meaning independently of the color. The default element is a `span`; `weight="medium"` emphasizes its text.
## Loading and announcements
```tsx theme={null}
import { Status } from 'twenty-ui/primitives/data-display';
type SaveStatusProps = { isSaving: boolean };
export const SaveStatus = ({ isSaving }: SaveStatusProps) => (
{isSaving ? 'Saving' : 'Saved'}
);
```
`loading` shows a loader after the label. 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) => (
{isUpdating ? 'Updating' : 'In progress'}
);
```
`onClick` renders a native button with pointer, Enter, and Space activation. `loading` does not prevent repeat activation; pass `disabled` when the action should wait. If `render` replaces the button with a non-button element, set `nativeButton={false}`.
## Props
Types and defaults are generated from the public component types. Native attributes and event handlers are also accepted.
Theme color used for the status background, text, and loader.
Applies disabled styling and disables activation when `onClick` is supplied.
Shows a loader after the label. Does not disable the control or announce a status change by itself.
Set to `false` when using `render` with an element other than a native button.
Handles activation and renders a native button by default. Without it, the default element is a span.
Replaces the default element. Required when `nativeButton` is `false`.
Font weight of the label.