Choose a version:

Dialog
component

A dialog is a high-priority, intentionally disruptive message that requires action from the merchant before they can continue using POS.

Anchor to dialogDialog

Anchor to title title string required: The text displayed in the title of the dialog.
Anchor to actionText actionText string required: The text displayed in the primary action button of the dialog.
Anchor to onAction onAction () => void required: A callback that performs when the action is triggered.
Anchor to isVisible isVisible boolean required: Whether the dialog should be presented.
Anchor to content content string: The text displayed in the body of the dialog.
Anchor to secondaryActionText secondaryActionText string: The text displayed in the secondary action section of the dialog.
Anchor to showSecondaryAction showSecondaryAction boolean: Whether a secondary action displays.
Anchor to type type: Determines the dialog’s appearance and function.
Anchor to onSecondaryAction onSecondaryAction () => void: A callback that is executed when the secondary action is triggered.

DialogProps

title
The text displayed in the title of the dialog.
```
string
```
content
The text displayed in the body of the dialog.
```
string
```
actionText
The text displayed in the primary action button of the dialog.
```
string
```
secondaryActionText
The text displayed in the secondary action section of the dialog.
```
string
```
showSecondaryAction
Whether a secondary action displays.
```
boolean
```
type
Determines the dialog’s appearance and function.
```
DialogType
```
onAction
A callback that performs when the action is triggered.
```
() => void
```
onSecondaryAction
A callback that is executed when the secondary action is triggered.
```
() => void
```
isVisible
Whether the dialog should be presented.
```
boolean
```

export interface DialogProps {
  /**
   * The text displayed in the title of the dialog.
   */
  title: string;

  /**
   * The text displayed in the body of the dialog.
   */
  content?: string;

  /**
   * The text displayed in the primary action button of the dialog.
   */
  actionText: string;

  /**
   * The text displayed in the secondary action section of the dialog.
   */
  secondaryActionText?: string;

  /**
   * Whether a secondary action displays.
   */
  showSecondaryAction?: boolean;

  /**
   * Determines the dialog’s appearance and function.
   */
  type?: DialogType;

  /**
   * A callback that performs when the action is triggered.
   */
  onAction: () => void;

  /**
   * A callback that is executed when the secondary action is triggered.
   */
  onSecondaryAction?: () => void;

  /**
   * Whether the dialog should be presented.
   */
  isVisible: boolean;
}

DialogType

'default' | 'alert' | 'error' | 'destructive'

Was this section helpful?

Dialog example

import React, {useState} from 'react';

import {

Button,

Dialog,

Screen,

reactExtension,

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

const SmartGridModal = () => {

const [visible, setVisible] = useState(false);

const handlePrimaryAction = () => {

setVisible(false);

console.log('Primary action pressed');

};

const handleSecondaryAction = () => {

setVisible(false);

console.log('Secondary action pressed');

};

return (

<Button

title="Show dialog"

onPress={() => setVisible(true)}

<Dialog

type="error"

title="Dialog title"

content="Dialog content"

actionText="Primary action"

onAction={handlePrimaryAction}

secondaryActionText="Secondary action"

onSecondaryAction={handleSecondaryAction}

isVisible={visible}

</Screen>

);

};

export default reactExtension(

'pos.home.modal.render',

() => <SmartGridModal />,

);

examples

Dialog example

React

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

const SmartGridModal = () => {
  const [visible, setVisible] = useState(false);

  const handlePrimaryAction = () => {
    setVisible(false);
    console.log('Primary action pressed');
  };

  const handleSecondaryAction = () => {
    setVisible(false);
    console.log('Secondary action pressed');
  };

  return (
    <Screen name="Dialog" title="Dialog Title">
      <Button
        title="Show dialog"
        onPress={() => setVisible(true)}
      />
      <Dialog
        type="error"
        title="Dialog title"
        content="Dialog content"
        actionText="Primary action"
        onAction={handlePrimaryAction}
        secondaryActionText="Secondary action"
        onSecondaryAction={handleSecondaryAction}
        isVisible={visible}
      />
    </Screen>
  );
};

export default reactExtension(
  'pos.home.modal.render',
  () => <SmartGridModal />,
);

TS

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

export default extension(
  'pos.home.modal.render',
  (root) => {
    const mainScreen = root.createComponent(
      Screen,
      {
        name: 'Dialog',
        title: 'Dialog Title',
      },
    );

    const button = root.createComponent(Button, {
      title: 'Show dialog',
      onPress: () =>
        dialog.updateProps({visible: true}),
    });

    const handlePrimaryAction = () => {
      dialog.updateProps({visible: false});
      console.log('Primary action pressed');
    };

    const handleSecondaryAction = () => {
      dialog.updateProps({visible: false});
      console.log('Secondary action pressed');
    };

    const dialog = root.createComponent(Dialog, {
      type: 'error',
      title: 'Dialog title',
      content: 'Dialog content',
      actionText: 'Primary action',
      onAction: handlePrimaryAction,
      secondaryActionText: 'Secondary action',
      onSecondaryAction: handleSecondaryAction,
      isVisible: false,
    });

    mainScreen.append(button);
    mainScreen.append(dialog);
    root.append(mainScreen);
  },
);

Preview

Anchor to guidelinesGuidelines

A dialog appears on top of the view the merchant is currently looking at.
When a dialog appears, the merchant can only interact with the buttons in the dialog and nothing else in the view.
A scrim is used to dim the UI in the background, using the surfaceBackground color set to 60% transparency.
Dialogs always include at least one action, two actions at most.
Buttons in dialogs work best when stacked to accommodate for longer translated content.
When buttons are displayed side-by-side, the primary action is on the right. When buttons are stacked, the primary action is at the top.
For buttons that initiate irreversible actions, the text should be displayed in "destructive" (red) state.

Was this section helpful?

Anchor to content-guidelinesContent guidelines

For confirmation dialogs, the header should be formed as a question that re-emphasizes the action being taken. Don't write: "Are you sure?"

✅ Log out of Shopify POS?
❌ Are you sure you want to log out of Shopify POS?
❌ You’re about to log out of Shopify POS

For confirmation dialogs, the primary button should clearly confirm the action while the secondary button should cancel the action with "Cancel":

✅ [Primary button] Log out
❌ [Primary button] Yes

For errors, the header should clearly communicate the problem rather than the solution (use the body and button to communicate the solution):

✅ [Header] Transaction declined
❌ [Header] Retry transaction

For informational dialogs where there's no action for the merchant to take but to acknowledge the message, the sole button should be "OK":

✅ [Button] OK
❌ [Button] Understood
❌ [Button] Dismiss

Was this section helpful?

Dialogcomponent

Anchor to dialogDialog

DialogProps

DialogType

examples

Dialog example

React

TS

Preview

Anchor to guidelinesGuidelines

Anchor to content-guidelinesContent guidelines

Dialog
component