Last modified: August 22, 2025
The CrmAssociationStageTracker component renders a lifecycle or pipeline stage progress bar and a list of properties. Use this component to show stage progress for records associated with the currently displaying record. Each component instance can fetch data from one type of object (contacts, companies, deals, tickets, or custom objects). You can specify association labels to only display data from associated CRM records with that assigned label. You can also edit the property values inline.
crmAssociatedStageTracker-example
import { CrmAssociationStageTracker } from '@hubspot/ui-extensions/crm';

const Extension = () => {
  return (
    <CrmAssociationStageTracker
      objectTypeId="0-3"
      properties={['dealname', 'closed_won_reason', 'hs_acv', 'hs_arr']}
      showProperties={true}
      associationLabels={['Decision maker']}
    />
  );
};
PropTypeDescription
objectTypeIdStringThe numeric ID of the type of associated object to display data from (e.g., 0-1 for contacts). See complete list of object IDs.
propertiesArrayThe properties of the associated records to display, up to four.
showPropertiesBooleanWhether to display the properties below the progress indicator. When set to false, properties will not display.
associationLabelsArrayIf provided, will only request a list of associated records with the specified label (case sensitive).
filtersArrayIf provided, the component will request a list of associated records that match the specified criteria. Learn more about filtering in CRM data components.
sortArrayIf provided, overrides the default sorting rules used in the search query. In the array, you’ll include an object for the column you want to sort by, which specifies:
  • columnName: the column to sort by.
  • direction: the direction to sort by. Can be either 1 (ascending) or -1 (descending). By default, order is ascending.