> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

---
id: 3608a404-2b13-4cd8-8b92-8fdf9b0c7b7c
---

# CrmAssociationStageTracker

> Learn about the CrmAssociationStageTracker component for use in UI extensions.

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.

<Frame>
  <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2023_2024/crmAssociatedStageTracker-example.gif" alt="crmAssociatedStageTracker-example" />
</Frame>

```jsx theme={null}
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"]}
    />
  );
};
```

## Props

| Prop                | Type    | Description                                                                                                                                                                                                                                                                                                                                                     |
| ------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `associationLabels` | Array   | If provided, will only request a list of associated records with the specified label (case sensitive).                                                                                                                                                                                                                                                          |
| `filters`           | Array   | If provided, the component will request a list of associated records that match the specified criteria. Learn more about [filtering in CRM data components](/apps/developer-platform/add-features/ui-extensions/ui-components/crm-data-components/overview#filtering-data).                                                                                     |
| `objectTypeId`      | String  | The numeric ID of the type of associated object to display data from (e.g., `0-1` for contacts). See [complete list](/guides/crm/understanding-the-crm#object-type-ids) of object IDs.                                                                                                                                                                          |
| `properties`        | Array   | The properties of the associated records to display, up to four.                                                                                                                                                                                                                                                                                                |
| `showProperties`    | Boolean | Whether to display the properties below the progress indicator. When set to `false`, properties will not display.                                                                                                                                                                                                                                               |
| `sort`              | Array   | If 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:<ul><li>`columnName`: the column to sort by.</li><li>`direction`: the direction to sort by. Can be either `1` (ascending) or `-1` (descending). By default, order is ascending.</li></ul> |

## Related components

* [CrmPropertyList](/apps/developer-platform/add-features/ui-extensions/ui-components/crm-data-components/crm-property-list)
* [CrmDataHighlight](/apps/developer-platform/add-features/ui-extensions/ui-components/crm-data-components/crm-data-highlight)
* [CrmReport](/apps/developer-platform/add-features/ui-extensions/ui-components/crm-data-components/crm-report)
* [CrmStageTracker](/apps/developer-platform/add-features/ui-extensions/ui-components/crm-data-components/crm-stage-tracker)