---
title: CartCheckoutButton
description: >-
  The CartCheckoutButton component renders a button that redirects to the
  checkout URL for the cart.
api_version: 2026-04
source_url:
  html: >-
    https://shopify.dev/docs/api/hydrogen-react/latest/components/cart/cartcheckoutbutton
  md: >-
    https://shopify.dev/docs/api/hydrogen-react/latest/components/cart/cartcheckoutbutton.md
api_name: hydrogen-react
---

# Cart​Checkout​Button

The `CartCheckoutButton` component renders a button that redirects to the checkout URL for the cart.

Must be a descendent of a `CartProvider` component.

#### Props

* **children**

  **ReactNode**

  **required**

  Any ReactNode elements.

* **as**

  **AsType**

  Provide a React element or component to render as the underlying button. Note: for accessibility compliance, almost always you should use a `button` element, or a component that renders an underlying button.

* **button​Ref**

  **Ref\<HTMLButtonElement>**

  A `ref` to the underlying button

* **default​On​Click**

  **(event?: MouseEvent\<HTMLButtonElement, MouseEvent>) => boolean | void**

  A default `onClick` behavior

Examples

### Examples

* #### Example code

  ##### Description

  I am the default example

  ##### JavaScript

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

  export default function ProductCartCheckoutButton() {
    return <CartCheckoutButton />;
  }
  ```

  ##### TypeScript

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

  export default function ProductCartCheckoutButton() {
    return <CartCheckoutButton />;
  }
  ```

***