# 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

### 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.
### appearance
Specify the color treatment of the Button.
### submit
Allows the button to submit a form.
### to
Destination URL to link to. If this value is set, the button will render as a Link.
### inlineAlignment
Specifies the inline alignment of the content.
### 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.
### 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.
### disabled
Disables the button, disallowing any interaction.
### onPress
Callback that is run when the button is pressed.
### overlay
An overlay component to render when the user interacts with the component.
### toggles
The component's identifier whose visibility will be toggled when this component is actioned.
### id
A unique identifier for the component.
### Appearance

'base' | 'accent' | 'decorative' | 'interactive' | 'subdued' | 'info' | 'success' | 'warning' | 'critical' | 'monochrome'
### InlineAlignment

'start' | 'center' | 'end'
### ButtonAccessibilityRole

'button' | 'submit'
## Related
- [Link](link)