Button

Button is used primarily for actions, such as "Continue", "Apply", or "Pay".

Anchor to ExampleExample

import {extend, Button} from '@shopify/post-purchase-ui-extensions';

extend('Checkout::PostPurchase::Render', (root) => {

const button = root.createComponent(

Button,

{

// eslint-disable-next-line no-console

onPress: () => console.log('Pressed!'),

'Press me',

);

root.appendChild(button);

});

import {render, useExtensionApi, Button} from '@shopify/post-purchase-ui-extensions-react';

render('Checkout::PostPurchase::Render', () => <App />);

function App() {

const {extensionPoint} = useExtensionApi();

return (

<Button

onPress={() => {

// eslint-disable-next-line no-console

console.log(`Extension point: ${extensionPoint}`);

}}

Log extension point to console

</Button>

);

}

import {extend, Button} from '@shopify/post-purchase-ui-extensions';

extend('Checkout::PostPurchase::Render', (root) => {
  const button = root.createComponent(
    Button,
    {
      // eslint-disable-next-line no-console
      onPress: () => console.log('Pressed!'),
    },
    'Press me',
  );

  root.appendChild(button);
});

import {render, useExtensionApi, Button} from '@shopify/post-purchase-ui-extensions-react';

render('Checkout::PostPurchase::Render', () => <App />);

function App() {
  const {extensionPoint} = useExtensionApi();

  return (
    <Button
      onPress={() => {
        // eslint-disable-next-line no-console
        console.log(`Extension point: ${extensionPoint}`);
      }}
    >
      Log extension point to console
    </Button>
  );
}

Anchor to PropsProps

optional = ?

Name	Type	Description
submit?	`boolean`	Allows the button to submit a form
to?	`string`	Destination to link to, renders a Link
subdued?	`boolean`	Renders a visually subdued button
plain?	`boolean`	Renders a button that visually looks like a Link
loading?	`boolean`	Replaces content with a loading indicator
loadingLabel?	`string`	Accessible label for the loading indicator when user prefers reduced motion
disabled?	`boolean`	Disables the button, disallowing any interaction
onPress?	`() => void`	Callback when pressed

Anchor to Best practicesBest practices

Button labels should be clear so customers can predict what the results of interacting with a button will be.
Use primary buttons for actions that will progress the customer through checkout, such as "Continue to shipping", and "Pay now".
Use secondary buttons for actions that you want to draw attention to, but are not primary, such as "Track your order".
Use plain buttons when you want the appearance of a text link, but the hit area of a button. Works well alongside other buttons to create hierarchies such as "Continue" and "Return to cart".

Anchor to Related componentsRelated components

ButtonGroup: A button group controls the layout for two or more stacked buttons such as "Continue" and "Return to cart", and adds the necessary spacing between them.
Link: Link makes text interactive so customers can perform an action, such as navigating to another location.

Was this page helpful?