# Dialog

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

```tsx
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);
  },
);

```

## Dialog

### DialogProps

### actionText

value: `string`

The text displayed in the primary action button of the dialog.

### content

value: `string`

The text displayed in the body of the dialog.

### isVisible

value: `boolean`

Whether the dialog should be presented.

### onAction

value: `() => void`

A callback that performs when the action is triggered.

### onSecondaryAction

value: `() => void`

A callback that is executed when the secondary action is triggered.

### secondaryActionText

value: `string`

The text displayed in the secondary action section of the dialog.

### showSecondaryAction

value: `boolean`

Whether a secondary action displays.

### title

value: `string`

The text displayed in the title of the dialog.

### type

value: `DialogType`

Determines the dialog’s appearance and function.