---
title: Button
description: >-
  Buttons are used primarily for actions, such as “Add”, “Close”, “Cancel”, or
  “Save”.
api_name: product-subscription-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/product-subscription-extensions/components/button
  md: >-
    https://shopify.dev/docs/api/product-subscription-extensions/components/button.md
---

# Button

Deprecated

Product subscription app extensions won't be supported as of February 9, 2026. You should migrate existing product subscription app extensions to [purchase options extensions](https://shopify.dev/docs/apps/build/purchase-options/purchase-options-extensions).

Buttons are used primarily for actions, such as “Add”, “Close”, “Cancel”, or “Save”.

##### JavaScript

```ts
import {extend, Button} from '@shopify/admin-ui-extensions';

extend('Playground', (root) => {
  const button = root.createComponent(Button, {
    title: 'Settings',
    kind: 'primary',
    appearance: 'critical',
    size: 'large',
    inlineSize: 'fill',
    accessibilityLabel: 'open settings',
    disabled: false,
    onPress: () => console.log('Pressed'),
  });

  root.appendChild(button);
  root.mount();
});
```

##### React

```jsx
import React from 'react';
import {extend, render, Button} from '@shopify/admin-ui-extensions-react';

function App() {
  return (
    <Button
      title="Settings"
      kind="primary"
      appearance="critical"
      size="large"
      inlineSize="fill"
      accessibilityLabel="open settings"
      disabled={false}
      onPress={() => console.log('Pressed')}
    />
  );
}

extend(
  'Playground',
  render(() => <App />),
);
```

***

## Guidelines

* Buttons will wrap their content if placed inside a `Stack` component, otherwise they will expand to the width of the container
* Buttons wrap their content, regardless of the container they are placed in

| ✅ Do | 🛑 Don't |
| - | - |
| Align buttons vertically | Buttons should not be stacked horizontally |
| Use short, succinct titles that describe an action | |
| Use an icon to supplement the title of the button | |
| Use only a single primary Button per section | |
| Primary buttons should be before secondary buttons | |

For more guidelines, refer to Polaris' [Button best practices](https://polaris.shopify.com/components/actions/button#best-practices).

***