# Button Buttons are used for actions, such as “Add”, “Continue”, “Pay now”, or “Save”. ### Basic Button ```tsx import { reactExtension, Button, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.block.render', () => <Extension />, ); function Extension() { return ( <Button onPress={() => { console.log('onPress event'); }} > Pay now </Button> ); } ``` ```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); }); ``` ## ButtonProps ### ButtonProps ### accessibilityLabel 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 The role of the button that will be rendered. `button`: renders a regular button. `submit`: renders a button that submits a form. ### activateAction Sets the action the `activateTarget` should take when this pressable is activated. Supported actions by component: | Component | Supported Actions | Default ('auto') | |---------------|-------------------|-------------------| | [`ClipboardItem`](/docs/api/checkout-ui-extensions/latest/clipboarditem) | 'copy' | 'copy' | ### activateTarget 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 Specify the color treatment of the Button. ### disabled Disables the button, disallowing any interaction. ### id A unique identifier for the component. ### inlineAlignment Specifies the inline alignment of the content. ### kind 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 Replaces content with a loading indicator. ### loadingLabel Accessible label for the loading indicator when user prefers reduced motion. This value is only used if `loading` is true. ### onPress Callback that is run when the button is pressed. ### overlay An overlay component to render when the user interacts with the component. ### submit Allows the button to submit a form. ### to Destination URL to link to. ### toggles The component's identifier whose visibility will be toggled when this component is actioned. ### ButtonAccessibilityRole 'button' | 'submit' ### Appearance 'base' | 'accent' | 'decorative' | 'interactive' | 'subdued' | 'info' | 'success' | 'warning' | 'critical' | 'monochrome' ### InlineAlignment 'start' | 'center' | 'end' ## Related - [Link](link)