Skip to main content

Button

Use the Button action set to create buttons for other action sets, such as TitleBar and Modal. The Button action set does not provide functionality outside of other App Bridge actions. If you need a standard button component in your app, use a Polaris React button.

Anchor to Example codeExample code

Create an app and import the Button action from @shopify/app-bridge/actions. Note that we'll be referring to this sample application throughout the examples below.

Note

In the following example, config is a valid App Bridge configuration object. Learn more about configuring App Bridge.

import createApp from '@shopify/app-bridge';
import {Button} from '@shopify/app-bridge/actions';

const app = createApp(config);

Anchor to Create a buttonCreate a button

Create a primary button with the label Save:

const myButton = Button.create(app, {label: 'Save'});

Anchor to Subscribe to click actionSubscribe to click action

You can subscribe to button actions by calling subscribe. This returns a function that you can call to unsubscribe from the action:

const myButton = Button.create(app, {label: 'Save'});
const clickUnsubscribe = myButton.subscribe(Button.Action.CLICK, data => {
// Do something with the click event
});

// Unsubscribe to click actions
clickUnsubscribe();

Anchor to Dispatch click actionDispatch click action

const myButton = Button.create(app, {label: 'Save'});
myButton.dispatch(Button.Action.CLICK);

Anchor to Dispatch click action with a payloadDispatch click action with a payload

const myButton = Button.create(app, {label: 'Save'});
// Trigger the action with a payload
myButton.dispatch(Button.Action.CLICK, {message: 'Saved'});

// Subscribe to the action and read the payload
myButton.subscribe(Button.Action.CLICK, data => {
// data = { payload: { message: 'Saved'} }
console.log(`Received ${data.payload.message} message`);
});

Anchor to Attach buttons to a modalAttach buttons to a modal

You can attach buttons to other actions such as modals. To learn more about modals, see Modal.

const okButton = Button.create(app, {label: 'Ok'});
const cancelButton = Button.create(app, {label: 'Cancel'});
const modalOptions = {
title: 'My Modal',
message: 'Hello world!',
footer: {primary: okButton, secondary: [cancelButton]},
};

const myModal = Modal.create(app, modalOptions);

Anchor to Button styleButton style

You can change the style of the button by passing the style property. Buttons support a single alternate style, the Danger style:

const myButton = Button.create(app, {label: 'Delete', style: Button.Style.Danger});

Anchor to Update optionsUpdate options

You can call the set method with partial button options to update the options of an existing button. This automatically triggers the update action on the button and merges the new given options with existing options:

const myButton = Button.create(app, {label: 'Save'});
myButton.set({disabled: true});

Anchor to UnsubscribeUnsubscribe

You call unsubscribe to remove all current subscriptions on the button:

const myButton = Button.create(app, {label: 'Save'});
myButton.subscribe(Button.Action.CLICK, data => {
// Do something with the click event
});

myButton.unsubscribe();
Was this page helpful?