# CartLinePrice


    `@deprecated` Use `Money` instead.

To migrate, use the `priceType` prop that matches the corresponding property on the `CartLine` object:

- `regular`: `cartLine.cost.totalAmount`

- `compareAt`: `cartLine.cost.compareAtAmountPerQuantity`

For example

Before:

`<CartLinePrice data={cartLine} priceType="regular" />`

After:

`<Money data={cartLine.cost.totalAmount} />`

The `CartLinePrice` component renders a `Money` component for the cart line merchandise's price or compare at price.
  

```jsx
import {CartLinePrice} from '@shopify/hydrogen-react';

export default function ProductCartLinePrice({cartLine}) {
  return <CartLinePrice data={cartLine} priceType="compareAt" />;
}

```

```tsx
import {CartLinePrice} from '@shopify/hydrogen-react';
import type {CartLine} from '@shopify/hydrogen-react/storefront-api-types';

export default function ProductCartLinePrice({cartLine}: {cartLine: CartLine}) {
  return <CartLinePrice data={cartLine} priceType="compareAt" />;
}

```

## Props

### CartLinePricePropsForDocs

### data

value: `PartialObjectDeep<CartLine, { recurseIntoArrays: true; }>`

A [CartLine object](https://shopify.dev/api/storefront/reference/objects/CartLine).

### priceType

value: `"regular" | "compareAt"`

The type of price. Valid values:`regular` (default) or `compareAt`.

### as

value: `AsType`

An HTML tag or React Component to be rendered as the base element wrapper. The default is `div`.

### withoutCurrency

value: `boolean`

Whether to remove the currency symbol from the output.

### withoutTrailingZeros

value: `boolean`

Whether to remove trailing zeros (fractional money) from the output.

### measurement

value: `PartialObjectDeep<UnitPriceMeasurement, { recurseIntoArrays: true; }>`

A [UnitPriceMeasurement object](https://shopify.dev/api/storefront/latest/objects/unitpricemeasurement).

### measurementSeparator

value: `ReactNode`

Customizes the separator between the money output and the measurement output. Used with the `measurement` prop. Defaults to `'/'`.

## Related

- [Money](/api/hydrogen-react/components/money)