---
title: CartLineQuantityAdjustButton
description: >-
  The <CartLineQuantityAdjustButton/> component renders a span (or another
  element / component that can be customized by the as prop) with the cart
  line's quantity.
api_version: 2026-04
source_url:
  html: >-
    https://shopify.dev/docs/api/hydrogen-react/latest/components/cart/cartlinequantityadjustbutton
  md: >-
    https://shopify.dev/docs/api/hydrogen-react/latest/components/cart/cartlinequantityadjustbutton.md
api_name: hydrogen-react
---

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

  **'increase' | 'decrease' | 'remove'**

  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/docs/api/hydrogen-react/2026-04/hooks/usecartLine)

[CartLineQuantity](https://shopify.dev/docs/api/hydrogen-react/2026-04/components/cart/cartlinequantity)

***