Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

Choose a version:

Button

The Button component triggers actions or events, such as opening dialogs or navigating to other pages. Use Button to let merchants perform specific tasks or initiate interactions throughout the POS interface.

Buttons provide clear calls-to-action that guide merchants through workflows, enable form submissions, and trigger important operations. They support various visual styles, tones, and interaction patterns to communicate intent and hierarchy within the interface.

Support

Targets (24)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the Button component.

Anchor to isDisabled isDisabled boolean: Whether the button can be tapped.
Anchor to isLoading isLoading boolean: Whether the button is displaying an animated loading state.
Anchor to onPress onPress () => void: The callback that's executed when the user taps the button.
Anchor to title title string: The text set on the button. When using a button for action (menu item) targets, the title will be ignored. The text on the menu item will be the extension's description.
Anchor to type type: The type of button to render. Determines the appearance of the button.

'primary' - Creates a prominent call-to-action button with high visual emphasis for the most important action on a screen

'basic' - Provides a standard button appearance for secondary actions and general interactions

'destructive' - Displays a warning-styled button for actions that delete, remove, or cause irreversible changes

'plain' - Deprecated as of POS 10.0.0. Using this option will automatically default to 'basic'

Anchor to ExamplesExamples

Anchor to Show a buttonShow a button

Display a button that responds to user interactions. This example shows a button that displays a toast notification when pressed, demonstrating how to handle button taps and provide immediate feedback to merchants.

Show a button

import React from 'react'

import { Button, Navigator, Screen, reactExtension, useApi } from '@shopify/ui-extensions-react/point-of-sale'

const ModalComponent = () => {

const api = useApi()

return (

<Button title="Press me!" onPress={() => api.toast.show('Button tapped!')} />

</Screen>

</Navigator>

)

}

export default reactExtension('pos.home.modal.render', () => {

return <ModalComponent />

})

import {

Button,

Navigator,

Screen,

extension,

} from '@shopify/ui-extensions/point-of-sale';

export default extension(

'pos.home.modal.render',

(root, api) => {

const button = root.createComponent(Button, {

title: 'Press me!',

onPress: () => {

api.toast.show('Button tapped!');

});

const screen = root.createComponent(Screen, {

name: 'Home',

title: 'Home',

});

screen.append(button);

const navigator =

root.createComponent(Navigator);

navigator.append(screen);

root.append(navigator);

);

React

import React from 'react'
import { Button, Navigator, Screen, reactExtension, useApi } from '@shopify/ui-extensions-react/point-of-sale'

const ModalComponent = () => {
  const api = useApi()
  return (
    <Navigator>
      <Screen title="Home" name="Home">
        <Button title="Press me!" onPress={() => api.toast.show('Button tapped!')} />
      </Screen>
    </Navigator>
  )
}

export default reactExtension('pos.home.modal.render', () => {
  return <ModalComponent />
})

TS

import {
  Button,
  Navigator,
  Screen,
  extension,
} from '@shopify/ui-extensions/point-of-sale';

export default extension(
  'pos.home.modal.render',
  (root, api) => {
    const button = root.createComponent(Button, {
      title: 'Press me!',
      onPress: () => {
        api.toast.show('Button tapped!');
      },
    });

    const screen = root.createComponent(Screen, {
      name: 'Home',
      title: 'Home',
    });
    screen.append(button);

    const navigator =
      root.createComponent(Navigator);

    navigator.append(screen);

    root.append(navigator);
  },
);

Anchor to Best practicesBest practices

Choose appropriate variants and tones: Use primary variant for the most important action on a screen, secondary for supporting actions, and tertiary for less prominent options. Apply critical tone for destructive actions like "Delete order," success for positive actions like "Complete sale," and caution or warning for actions requiring attention.
Provide loading states for async operations: Set the loading property to true during async operations.
Use the command system for component control: Use commandFor and command properties to control modals, overlays, and other components without complex event handlers.
Structure button hierarchies clearly: Place primary and secondary actions together using consistent spacing and visual hierarchy. Position destructive actions separately or use confirmation patterns to prevent accidental activation.

Anchor to LimitationsLimitations

Button titles must be plain strings. HTML, markdown, or rich text formatting isn't supported.
Loading states replace all button content with a spinner. Custom loading indicators or partial content updates aren't supported.
Complex button layouts or nested interactive components within buttons aren't supported.

Was this page helpful?

Supported targets

Supported targets

Anchor to PropertiesProperties

ButtonType

Anchor to ExamplesExamples

Anchor to Show a buttonShow a button

React

TS

Anchor to Best practicesBest practices

Anchor to LimitationsLimitations