# CartCost


    The `CartCost` component renders a `Money` component with the cost associated with the `amountType` prop.

If no `amountType` prop is specified, then it defaults to `totalAmount`.

Depends on `useCart()` and must be a child of `<CartProvider/>`
  

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

export default function CartTotals() {
  return (
    <>
      <div>
        Subtotal: <CartCost amountType="subtotal" />
      </div>
      <div>
        Tax: <CartCost amountType="tax" />
      </div>
      <div>
        Total: <CartCost />
      </div>
    </>
  );
}

```

```tsx
import {CartCost} from '@shopify/hydrogen-react';

export default function CartTotals() {
  return (
    <>
      <div>
        Subtotal: <CartCost amountType="subtotal" />
      </div>
      <div>
        Tax: <CartCost amountType="tax" />
      </div>
      <div>
        Total: <CartCost />
      </div>
    </>
  );
}

```

## Props

### CartCostPropsForDocs

### amountType

value: `'total' | 'subtotal' | 'tax' | 'duty'`

A string type that defines the type of cost needed. Valid values: `total`, `subtotal`, `tax`, or `duty`.

### as

value: `ComponentGeneric`

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

### children

value: `React.ReactNode`

Any `ReactNode` elements.

### measurement

value: `PartialDeep<UnitPriceMeasurement, {recurseIntoArrays: true}>`

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

### measurementSeparator

value: `ReactNode`

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

### 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.