---
title: ButtonGroup
description: Learn more about the ButtonGroup action set in App Bridge.
api_name: app-bridge
source_url:
  html: >-
    https://shopify.dev/docs/api/app-bridge/previous-versions/actions/buttongroup
  md: >-
    https://shopify.dev/docs/api/app-bridge/previous-versions/actions/buttongroup.md
---

ExpandOn this page

* [Example code](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/buttongroup.md#example-code)
* [Create a button group](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/buttongroup.md#create-a-button-group)
* [Subscribe to updates](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/buttongroup.md#subscribe-to-updates)
* [Unsubscribe](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/buttongroup.md#unsubscribe)
* [Unsubscribe from button group actions only](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/buttongroup.md#unsubscribe-from-button-group-actions-only)
* [Update options](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/buttongroup.md#update-options)
* [Update buttons](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/buttongroup.md#update-buttons)

# ButtonGroup

Use the `ButtonGroup` action set to group together `Button` action set instances. You can pass this action set into your app’s `TitleBar` action set. The `ButtonGroup` action set does not provide functionality outside of the `TitleBar` action set. If you need a standard button group component in your app, use a [Polaris React button group](https://polaris-react.shopify.com/components/actions/button-group).

***

## Example code

Create an app and import the `Button` and `ButtonGroup` modules 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](https://shopify.dev/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, ButtonGroup} from '@shopify/app-bridge/actions';


const app = createApp(config);
```

***

## Create a button group

Generate a primary button with the label `More actions` and two buttons with the label `Settings` and `Help`:

```js
const button1 = Button.create(app, {label: 'Settings'});
const button2 = Button.create(app, {label: 'Help'});
const myGroupButton = ButtonGroup.create(app, {label: 'More actions', buttons: [button1, button2]});
```

***

## Subscribe to updates

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

```js
// Using the same button group as above
const updateUnsubscribe = myGroupButton.subscribe(ButtonGroup.Action.UPDATE, data => {
// Do something when the button group is updated
// The data is in the following shape: {id: string, label: string, buttons: [{id: string, label: string, disabled: boolean,} ...]}
});


// Unsubscribe
updateUnsubscribe();
```

***

## Unsubscribe

You call `unsubscribe` to remove all subscriptions on the button group and its children:

```js
const button1 = Button.create(app, {label: 'Settings'});
const button2 = Button.create(app, {label: 'Help'});
const myGroupButton = ButtonGroup.create(app, {label: 'More actions', buttons: [button1, button2]});
// Using the same button group as above
myGroupButton.subscribe(ButtonGroup.Action.UPDATE, data => {
// Do something when the button group is updated
// The data is in the following format: {id: string, label: string, buttons: [{id: string, label: string, disabled: boolean} ...]}
});


button1.subscribe(Button.Action.CLICK, () => {
//Do something with the click action
});


button2.subscribe(Button.Action.CLICK, () => {
//Do something with the click action
});


// Unsubscribe from the button group update action
// Unsubscribe from button1 and button2 click actions
myGroupButton.unsubscribe();
```

***

## Unsubscribe from button group actions only

You call `unsubscribe` with `false` to remove only button group subscriptions while leaving child subscriptions intact. For example, you might want to unsubscribe from the button group but keep button listeners so that the buttons can be reused in a different actions (such as a modal).

```js
const button1 = Button.create(app, {label: 'Settings'});
const button2 = Button.create(app, {label: 'Help'});
const myGroupButton = ButtonGroup.create(app, {label: 'More actions', buttons: [button1, button2]});
// Using the same button group as above
myGroupButton.subscribe(ButtonGroup.Action.UPDATE, data => {
// Do something when the button group is updated
// The data is in the following format: {id: string, label: string, buttons: [{id: string, label: string, disabled: boolean} ...]}
});


button1.subscribe(Button.Action.CLICK, () => {
//Do something with the click action
});


button2.subscribe(Button.Action.CLICK, () => {
//Do something with the click action
});


// Unsubscribe from only the button group update action
myGroupButton.unsubscribe(false);


// Reuse button1 and button2 in a modal
const modalOptions = {
title: 'My Modal',
message: 'Hello world!',
footer: {secondary: [button1, button2]},
};


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

***

## Update options

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

```js
const button1 = Button.create(app, {label: 'Settings'});
const button2 = Button.create(app, {label: 'Help'});
const myGroupButton = ButtonGroup.create(app, {label: 'More actions', buttons: [button1, button2]});
myGroupButton.set({disabled: true});
```

***

## Update buttons

You can update buttons attached to a button group. Any updates made to the button group's children automatically trigger an `update` action on the button group.

```js
const button1 = Button.create(app, {label: 'Settings'});
const button2 = Button.create(app, {label: 'Help'});
const myGroupButton = ButtonGroup.create(app, {label: 'More actions', buttons: [button1, button2]});
button1.set({disabled: true});
```

***

* [Example code](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/buttongroup.md#example-code)
* [Create a button group](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/buttongroup.md#create-a-button-group)
* [Subscribe to updates](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/buttongroup.md#subscribe-to-updates)
* [Unsubscribe](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/buttongroup.md#unsubscribe)
* [Unsubscribe from button group actions only](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/buttongroup.md#unsubscribe-from-button-group-actions-only)
* [Update options](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/buttongroup.md#update-options)
* [Update buttons](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/buttongroup.md#update-buttons)