Button

Deprecated

Product subscription app extensions won't be supported as of December 3, 2025. You should migrate existing product subscription app extensions to purchase options extensions.

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

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();

});

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 />),

);

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();
});

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 />),
);

Anchor to GuidelinesGuidelines

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.

Was this page helpful?