# Dialog A dialog is a high-priority, intentionally disruptive message that requires action from the merchant before they can continue using POS. ### Dialog example ```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 The text displayed in the primary action button of the dialog. ### content The text displayed in the body of the dialog. ### isVisible Whether the dialog should be presented. ### onAction A callback that performs when the action is triggered. ### onSecondaryAction A callback that is executed when the secondary action is triggered. ### secondaryActionText The text displayed in the secondary action section of the dialog. ### showSecondaryAction Whether a secondary action displays. ### title The text displayed in the title of the dialog. ### type Determines the dialog’s appearance and function. ### DialogType 'default' | 'alert' | 'error' | 'destructive'