Cart
component
The component renders a button that redirects to the checkout URL for the cart.
Must be a descendent of a component.
Anchor to propsProps
- Anchor to childrenchildrenReactNoderequired
Any ReactNode elements.
- AsType
Provide a React element or component to render as the underlying button. Note: for accessibility compliance, almost always you should use a
buttonelement, or a component that renders an underlying button.- Anchor to defaultOnClickdefaultOnClick(event?: MouseEvent<HTMLButtonElement, MouseEvent>) => boolean | void
A default
behavior- Ref<HTMLButtonElement>
A
refto the underlying button
CartCheckoutButtonPropsForDocs
- as
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.
AsType - children
Any ReactNode elements.
ReactNode - defaultOnClick
A default `onClick` behavior
(event?: MouseEvent<HTMLButtonElement, MouseEvent>) => boolean | void - buttonRef
A `ref` to the underlying button
Ref<HTMLButtonElement>
export interface CartCheckoutButtonPropsForDocs<
AsType extends React.ElementType = 'button',
> extends Omit<CustomBaseButtonProps<AsType>, 'onClick'> {}Was this section helpful?
Example code
import {CartCheckoutButton} from '@shopify/hydrogen-react';
export default function ProductCartCheckoutButton() {
return <CartCheckoutButton />;
}
examples
Example code
description
I am the default example
JavaScript
import {CartCheckoutButton} from '@shopify/hydrogen-react'; export default function ProductCartCheckoutButton() { return <CartCheckoutButton />; }TypeScript
import {CartCheckoutButton} from '@shopify/hydrogen-react'; export default function ProductCartCheckoutButton() { return <CartCheckoutButton />; }