# Component: Initiate Checkout Button

**Available from:** Release 106

**Purpose:** The Initiate Checkout Button can be used to guide customers from a Cart page to a Checkout page, ensuring a seamless transition from browsing to purchasing. It preserves all items in the basket and retains tracking information.

{% embed url="<https://69c2cf3a42a094f3cd354b8d-ojozztnsdo.chromatic.com/?path=/story/shop-components-checkout-initiate-checkout-button--default&full=1&shortcuts=false&singleStory=true&embed=true>" %}

*Button with default colour and button label.*

### How navigation is determined:

The destination of the checkout navigation is determined in one of two ways:

1. **Checkout URL Prop:** If a URL is provided in the *Checkout URL* property of the component, the button navigates customers to this URL when clicked.
2. **Offers in the Basket:** If no URL is defined in the *Checkout URL property*, the button navigates based on the checkout configuration of the offers present in the basket:
   * **Single offer in the basket**: The button redirects customers to the checkout configuration on the offer.
   * **Multiple offers in the basket:** The button redirects customers to the checkout configuratino of the first offer in the basket.

If there are no offers in the basket, the button is disabled and non-clickable to prevent unnecessary actions.

> **Note:** The *Checkout URL* property takes precedence. If this URL is defined, it overrides navigation based on the basket contents.

## Props

| **Prop Label** | **Type** | **Default Value**    | **Info**                                                                                                                         |
| -------------- | -------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| Button Label   | string   | Continue to checkout | Defines the call-to-action (CTA) text displayed on the button.                                                                   |
| Checkout URL   | string   |                      | If you don't want the button to navigate to the checkout URL from the offer configuration, specify the desired destination here. |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.limio.com/components/component-library/cart-components/component-initiate-checkout-button.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.