--- title: Button description: 'Buttons are used for actions, such as “Add”, “Continue”, “Pay now”, or “Save”.' api_version: 2025-07 api_name: checkout-ui-extensions source_url: html: >- https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/components/actions/button md: >- https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/components/actions/button.md --- Migrate to Polaris Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04-rc/upgrading-to-2026-04) to upgrade your extension. # Button Buttons are used for actions, such as “Add”, “Continue”, “Pay now”, or “Save”. ### Support Targets (50) ### Supported targets * Checkout::Actions::Render​Before * Checkout::Cart​Line​Details::Render​After * Checkout::Cart​Lines::Render​After * Checkout::Contact::Render​After * Checkout::Customer​Information::Render​After * Checkout::Delivery​Address::Render​Before * Checkout::Dynamic::Render * Checkout::Pickup​Locations::Render​After * Checkout::Pickup​Locations::Render​Before * Checkout::Pickup​Points::Render​After * Checkout::Pickup​Points::Render​Before * Checkout::Reductions::Render​After * Checkout::Reductions::Render​Before * Checkout::Shipping​Method​Details::Render​After * Checkout::Shipping​Method​Details::Render​Expanded * Checkout::Shipping​Methods::Render​After * Checkout::Shipping​Methods::Render​Before * Checkout::Thank​You::Cart​Line​Details::Render​After * Checkout::Thank​You::Cart​Lines::Render​After * Checkout::Thank​You::Customer​Information::Render​After * Checkout::Thank​You::Dynamic::Render * purchase.​checkout.​actions.​render-before * purchase.​checkout.​block.​render * purchase.​checkout.​cart-line-item.​render-after * purchase.​checkout.​cart-line-list.​render-after * purchase.​checkout.​contact.​render-after * purchase.​checkout.​delivery-address.​render-after * purchase.​checkout.​delivery-address.​render-before * purchase.​checkout.​footer.​render-after * purchase.​checkout.​header.​render-after * purchase.​checkout.​payment-method-list.​render-after * purchase.​checkout.​payment-method-list.​render-before * purchase.​checkout.​pickup-location-list.​render-after * purchase.​checkout.​pickup-location-list.​render-before * purchase.​checkout.​pickup-location-option-item.​render-after * purchase.​checkout.​pickup-point-list.​render-after * purchase.​checkout.​pickup-point-list.​render-before * purchase.​checkout.​reductions.​render-after * purchase.​checkout.​reductions.​render-before * purchase.​checkout.​shipping-option-item.​details.​render * purchase.​checkout.​shipping-option-item.​render-after * purchase.​checkout.​shipping-option-list.​render-after * purchase.​checkout.​shipping-option-list.​render-before * purchase.​thank-you.​announcement.​render * purchase.​thank-you.​block.​render * purchase.​thank-you.​cart-line-item.​render-after * purchase.​thank-you.​cart-line-list.​render-after * purchase.​thank-you.​customer-information.​render-after * purchase.​thank-you.​footer.​render-after * purchase.​thank-you.​header.​render-after ## ButtonProps * **accessibilityLabel** **string** A label used for buyers using assistive technologies. When set, any `children` supplied to this component will not be announced to screen reader users. * **accessibilityRole** **ButtonAccessibilityRole** **Default: 'button'** The role of the button that will be rendered. `button`: renders a regular button. `submit`: renders a button that submits a form. * **activateAction** **'auto' | 'copy'** **Default: 'auto' - a default action for the target component.** Sets the action the `activateTarget` should take when this pressable is activated. Supported actions by component: | Component | Supported Actions | Default ('auto') | | - | - | - | | [`ClipboardItem`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/clipboarditem) | 'copy' | 'copy' | * **activateTarget** **string** ID of a component that should respond to activations (e.g. clicks) on this pressable. See `activateAction` for how to control the behavior of the target. * **appearance** **'critical' | 'monochrome'** Specify the color treatment of the Button. * **disabled** **boolean** **Default: false** Disables the button, disallowing any interaction. * **id** **string** A unique identifier for the component. * **inlineAlignment** **InlineAlignment** **Default: 'center'** Specifies the inline alignment of the content. * **kind** **'primary' | 'secondary' | 'plain'** **Default: 'primary'** The type of button that will be rendered. The visual presentation of the button type is controlled by merchants through the Branding API. `primary`: button used for main actions. For example: "Continue to next step". `secondary`: button used for secondary actions not blocking user progress. For example: "Download Shop app". `plain`: renders a button that visually looks like a link. * **loading** **boolean** **Default: false** Replaces content with a loading indicator. * **loadingLabel** **string** Accessible label for the loading indicator when user prefers reduced motion. This value is only used if `loading` is true. * **onPress** **() => void** Callback that is run when the button is pressed. * **overlay** **RemoteFragment** An overlay component to render when the user interacts with the component. * **to** **string** Destination URL to link to. * **toggles** **string** The component's identifier whose visibility will be toggled when this component is actioned. * **submit** **boolean** **deprecated** Allows the button to submit a form. **Deprecated:** use `accessibilityRole="submit"` instead ### ButtonAccessibilityRole ```ts 'button' | 'submit' ``` ### InlineAlignment ```ts 'start' | 'center' | 'end' ``` Examples ## Preview ![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/api/checkout-extensions/post-purchase/components/button-B8xVuFfR.png) ### Examples * #### Basic Button ##### React ```tsx import { reactExtension, Button, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.block.render', () => , ); function Extension() { return ( ); } ``` ##### JS ```js import {extension, Button} from '@shopify/ui-extensions/checkout'; export default extension('purchase.checkout.block.render', (root) => { const button = root.createComponent( Button, {onPress: () => console.log('onPress event')}, 'Pay now', ); root.appendChild(button); }); ``` ## Appearance | Value | Description | | - | - | | `"critical"` | Conveys a problem has arisen. | | `"monochrome"` | Takes the color of its parent. | ## Best Practices **Content Best Practices** * Clearly label each button to accurately represent the action associated with it. * Use strong actionable verbs at the beginning of button text to make it clear to the user what action will occur when the button is clicked. **Hierarchy Best Practices** * Establish a visual hierarchy between buttons to minimize confusion and help users understand which actions are most important. * Use only one high-emphasis button (primary button) per context to make it clear that other buttons have less importance. * Use lower-emphasis buttons for secondary calls to action. * Use primary buttons for actions that progress users through checkout such as “Pay now” or for concluding an action in a modal such as “Apply”. * Use secondary buttons to provide alternative actions to the primary button, without disrupting the primary flow such as “Track your order”. * Use plain buttons for least prominent, non-critical actions such as “Login to your account”. **When to Use Buttons** * Use buttons to communicate actions the user can take. * Use buttons to allow users to interact with the page. **When Not to Use Buttons** * Don’t use buttons as navigational elements. Use links instead when the desired action is to take the user to a new page. ## Related [Component - Link](link)