Status

import { Status } from 'twenty-ui/primitives/data-display';

export const RecordStatus = () => <Status color="green">Active</Status>;

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

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}
    disabled={isUpdating}
    onClick={onChangeStatus}
    aria-label="Change record status"
  >
    {isUpdating ? 'Updating' : 'In progress'}
  </Status>
);