---
title: CartLineQuantityAdjustButton
description: >2-

      The `<CartLineQuantityAdjustButton/>` component renders a `span` (or another element / component that can be customized by the `as` prop) with the cart line's quantity.

  It must be a descendent of a `<CartLineProvider/>` component, and uses the
  `useCartLine()` hook internally.
    
api_version: 2023-04
api_name: hydrogen-react
source_url:
  html: >-
    https://shopify.dev/docs/api/hydrogen-react/2023-04/components/cartlinequantityadjustbutton
  md: >-
    https://shopify.dev/docs/api/hydrogen-react/2023-04/components/cartlinequantityadjustbutton.md
---

# Cart​Line​Quantity​Adjust​Button

The `<CartLineQuantityAdjustButton/>` component renders a `span` (or another element / component that can be customized by the `as` prop) with the cart line's quantity.

It must be a descendent of a `<CartLineProvider/>` component, and uses the `useCartLine()` hook internally.

## Props

* adjust

  "remove" | "increase" | "decrease"

  The adjustment for a cart line's quantity. Valid values: `increase` (default), `decrease`, or `remove`.

Examples

### Examples

* #### Example code

  ##### Description

  I am the default example

  ##### JavaScript

  ```jsx
  import {
    CartLineQuantityAdjustButton,
    CartLineProvider,
    CartProvider,
  } from '@shopify/hydrogen-react';

  export function Example({line}) {
    return (
      <CartProvider>
        <CartLineProvider line={line}>
          <CartLineQuantityAdjustButton adjust="increase">
            Increase
          </CartLineQuantityAdjustButton>
          <CartLineQuantityAdjustButton adjust="decrease">
            Decrease
          </CartLineQuantityAdjustButton>
          <CartLineQuantityAdjustButton adjust="remove">
            Remove
          </CartLineQuantityAdjustButton>
        </CartLineProvider>
      </CartProvider>
    );
  }
  ```

  ##### TypeScript

  ```tsx
  import {
    CartLineQuantityAdjustButton,
    CartLineProvider,
    CartProvider,
  } from '@shopify/hydrogen-react';
  import type {CartLine} from '@shopify/hydrogen-react/storefront-api-types';

  export function Example({line}: {line: CartLine}) {
    return (
      <CartProvider>
        <CartLineProvider line={line}>
          <CartLineQuantityAdjustButton adjust="increase">
            Increase
          </CartLineQuantityAdjustButton>
          <CartLineQuantityAdjustButton adjust="decrease">
            Decrease
          </CartLineQuantityAdjustButton>
          <CartLineQuantityAdjustButton adjust="remove">
            Remove
          </CartLineQuantityAdjustButton>
        </CartLineProvider>
      </CartProvider>
    );
  }
  ```

## Related

[- useCartLine](https://shopify.dev/api/hydrogen-react/hooks/useCartLine)

[- CartLineQuantity](https://shopify.dev/api/hydrogen-react/components/CartLineQuantity)