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 button](https://polaris.shopify.com/components/actions/button). ## Example 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](/docs/api/app-bridge/previous-versions/app-bridge-from-npm/app-setup#initialize-shopify-app-bridge-in-your-app). ```js import createApp from '@shopify/app-bridge'; import {Button} from '@shopify/app-bridge/actions'; const app = createApp(config); ``` ## Create a button Create a primary button with the label `Save`: ```js const myButton = Button.create(app, {label: 'Save'}); ``` ## Subscribe 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: ```js 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(); ``` ## Dispatch click action ```js const myButton = Button.create(app, {label: 'Save'}); myButton.dispatch(Button.Action.CLICK); ``` ## Dispatch click action with a payload ```js 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`); }); ``` ## Attach buttons to a modal You can attach buttons to other actions such as modals. To learn more about modals, see [Modal](/docs/api/app-bridge/previous-versions/actions/modal). ```js 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); ``` ## Button style You can change the style of the button by passing the `style` property. Buttons support a single alternate style, the `Danger` style: ```js const myButton = Button.create(app, {label: 'Delete', style: Button.Style.Danger}); ``` ## Update 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: ```js const myButton = Button.create(app, {label: 'Save'}); myButton.set({disabled: true}); ``` ## Unsubscribe You call `unsubscribe` to remove all current subscriptions on the button: ```js const myButton = Button.create(app, {label: 'Save'}); myButton.subscribe(Button.Action.CLICK, data => { // Do something with the click event }); myButton.unsubscribe(); ```