Button​

The Button UI component is used to perform actions such as Add, Continue, Pay Now, or Save when clicked.

Preview​

Code example​

render('Checkout::Dynamic::Render', () => {
  return <Button onPress={() => console.log('onPress event')}>Pay now</Button>;
});

ButtonProps​

kind?​

The type of the button. Valid values are:

• primary: Main button
• secondary: Secondary button

size?​

The size of the button.

to?​

The URL where the customer is redirected to after clicking the button. If you specify this property, the button will be rendered as a link.

loading?​

Indicates whether to render the loading indicator. Valid values are:

• true: Indicates rendering the loading indicator.
• false: Indicates not rendering the loading indicator.

accessibilityLabel?​

A label for this component. Configuring this feature directly sets the aria-label attribute, providing accessibility information for screen readers.

accessibilityRole?​

Set the button role.

disabled?​

Indicates whether the button is disabled for any interaction. Valid values are:

• true: Indicates the button is disabled.
• false: Indicates the button is interactive.

onPress?​

The callback triggered when the button is pressed.

onMouseEnter?​

The callback triggered when a mouse enters the button.

appearance?​

The appearance style of the button.