## Feature Examples


### Skin
- description: <p>Use different <code>skin</code> to set the overall look of the modal and its action buttons:</p><li>For general cases use <code>standard</code>(default).</li><li>Promote Premium features with <code>premium</code>.</li><li>To inform users of the negative implications of an action, like loss of data, use <code>destructive</code> .</li>
- example: 
```jsx 
<StorybookComponents.Stack flexDirection="column">
  <MessageModalLayout
    skin="standard"
    onCloseButtonClick={() => {}}
    primaryButtonText="Leave Page"
    secondaryButtonText="Cancel"
    title="Leave page?"
    content={
      <Text>When you leave this page, you'll lose unsaved changes.</Text>
    }
  />
  <MessageModalLayout
    skin="premium"
    onCloseButtonClick={() => {}}
    primaryButtonText="Upgrade"
    secondaryButtonText="Not Now"
    title="Upgrade to accept payments"
    content={
      <Text>To accept payments, upgrade to the Business Basic plan.</Text>
    }
  />
  <MessageModalLayout
    skin="destructive"
    onCloseButtonClick={() => {}}
    primaryButtonText="Delete"
    secondaryButtonText="Cancel"
    title="Delete category?"
    content={
      <Text>
        You're about to delete the <b>Yoga</b> category. Posts inside this
        category will also be deleted.
      </Text>
    }
  />
</StorybookComponents.Stack>;
```

### Help and close buttons
- description: <p>Add a help button with the <code>onHelpButtonClick</code> prop. Use it to direct users to support.</p><p></p><p>Close button is required for all modals. Control its function with the<code>onCloseButtonClick</code> prop.</p><p></p><p>Both can be customised with <code>closeButtonProps</code> and <code>helpButtonProps</code>.</p>
- example: 
```jsx 
<MessageModalLayout
  onCloseButtonClick={() => {}}
  onHelpButtonClick={() => {}}
  primaryButtonText="Leave Page"
  secondaryButtonText="Cancel"
  title="Leave page?"
  content={<Text>When you leave this page, you'll lose unsaved changes.</Text>}
/>;
```

### Illustration
- description: <p>Add visuals to the left side of the content to support main modal messages using the <code>illustration</code> prop.</p><p></p><p>Use 120x120 px illustrations and coordinate the skin with the theme of the modal.  </p><p></p><p><em>Note</em>: For Wix products, browse all available illustrations or request a new one on <a href="https://www.wixuxillustrations.com/">Wix UX Illustrations</a>.</p>
- example: 
```jsx 
<StorybookComponents.Stack flexDirection="column">
  <MessageModalLayout
    illustration="generic_report.svg"
    onCloseButtonClick={() => {}}
    primaryButtonText="Report"
    secondaryButtonText="Cancel"
    title="Report as spam?"
    content={<Text>Messages marked as spam are blocked from your inbox.</Text>}
  />
  <MessageModalLayout
    illustration="generic_upgrade.svg"
    theme={'premium'}
    onCloseButtonClick={() => {}}
    primaryButtonText="Upgrade"
    secondaryButtonText="Not Now"
    title="Start accepting online payments"
    content={
      <Text>
        Upgrade your site to a Business Basic plan to start accepting payments.
      </Text>
    }
  />
  <MessageModalLayout
    illustration="generic_trash.svg"
    theme={'destructive'}
    onCloseButtonClick={() => {}}
    primaryButtonText="Delete"
    secondaryButtonText="Cancel"
    title="Delete category"
    content={
      <Text>
        You're about to delete the <b>Yoga</b> category. Posts inside this
        category will also be deleted.
      </Text>
    }
  />
</StorybookComponents.Stack>;
```

### Side actions
- description: <p>Add supplementary actions in the <code>sideActions</code> container.</p>
- example: 
```jsx 
<StorybookComponents.Stack flexDirection="column">
  <MessageModalLayout
    onCloseButtonClick={() => {}}
    primaryButtonText="Leave Page"
    secondaryButtonText="Cancel"
    title="Leave page?"
    content={
      <Text>When you leave this page, you'll lose unsaved changes.</Text>
    }
    sideActions={
      <StorybookComponents.Placeholder>
        Side actions
      </StorybookComponents.Placeholder>
    }
  />
  <MessageModalLayout
    onCloseButtonClick={() => {}}
    primaryButtonText="Leave Page"
    secondaryButtonText="Cancel"
    title="Leave page?"
    content={
      <Text>When you leave this page, you'll lose unsaved changes.</Text>
    }
    sideActions={<Checkbox>Don't show this again</Checkbox>}
  />
</StorybookComponents.Stack>;
```

### Footnote
- description: <p>Add supplementary text and/or links into the <code>footnote</code> container.</p><p>Use the <code>footnoteSkin</code> prop to define it as <code>neutral</code> (default) or <code>light</code>.</p>
- example: 
```jsx 
<StorybookComponents.Stack flexDirection="column">
  <MessageModalLayout
    onCloseButtonClick={() => {}}
    primaryButtonText="Invite All"
    secondaryButtonText="Cancel"
    title="Invite all site members"
    content={<Text>You're about to send invites to all site members.</Text>}
    footnote={
      <StorybookComponents.Placeholder>
        Footnote
      </StorybookComponents.Placeholder>
    }
  />
  <MessageModalLayout
    onCloseButtonClick={() => {}}
    primaryButtonText="Invite All"
    secondaryButtonText="Cancel"
    title="Invite all site members"
    content={<Text>You're about to send invites to all site members.</Text>}
    footnote={
      <Text size="small">
        By sending an invite, you agree to the <a>Wix Terms of Use.</a>
      </Text>
    }
  />
  <MessageModalLayout
    onCloseButtonClick={() => {}}
    primaryButtonText="Invite All"
    secondaryButtonText="Cancel"
    title="Invite all site members"
    footnoteSkin="light"
    footnote={
      <Text size="small">
        By sending an invite, you agree to the <a>Terms of Use</a>.
      </Text>
    }
    content={
      <Text>
        You're about to send invites to all site members.
      </Text>
    }
  />
</StorybookComponents.Stack>;
```

### Title and subtitle
- description: <p>Add short text to summarize modal content using the <code>title</code> prop.</p><p>Use optional <code>subtitle</code> prop to add secondary text below the modal title.</p>
- example: 
```jsx 
<MessageModalLayout
  onCloseButtonClick={() => {}}
  primaryButtonText="Leave Page"
  secondaryButtonText="Cancel"
  title="Leave page?"
  content={<Text>When you leave this page, you'll lose unsaved changes.</Text>}
/>;
```

### Action buttons
- description: <p>Specify labels for primary and secondary actions with <code>primaryButtonText</code> and <code>secondaryButtonText</code> props.</p><p></p><p>For additional styling, like adding a prefix icon, use any available <code><Button/></code> props in <code>primaryButtonProps</code> and <code>secondaryButtonProps</code>.</p><p></p><p>Use the <code>actionsSize</code> prop to control the size of the primary and secondary action buttons.</p>
- example: 
```jsx 
<MessageModalLayout
  onCloseButtonClick={() => {}}
  primaryButtonText="Invite All"
  primaryButtonProps={{ prefixIcon: <Icons.EmailSendSmall /> }}
  secondaryButtonText="Cancel"
  title="Invite all site members"
  content={<Text>You're about to send invites to all site members.</Text>}
/>;
```




## Developer Examples


### Mobile 
- description: <p>On mobile, <code>MessageModal</code> maps to <code>Drawer</code> for context-sensitive confirmations (e.g., seeing what is being deleted). </p><p></p><p>When context is less important, use <code>ModalMobileLayout</code> for standalone confirmations.</p><p></p><p><em>To see the change, toggle 'Enable mobile support' in the top bar of Storybook.</em></p>
- example: 
```jsx 
() => {
    const [contextOpen, setContextOpen] = React.useState(false);
    const [confirmOpen, setConfirmOpen] = React.useState(false);
    const { mobile } = React.useContext(WixDesignSystemContext);

    const deleteTitle = 'Delete category?';
    const deleteContent =
      "You're about to delete the Yoga category. Posts inside this category will also be deleted.";

    const confirmTitle = 'Move 3 products?';
    const confirmContent = 'You will change the location of the products. Once moved, the products will be found in New products category.';

    return (
      <Box gap="12px">
        <Button skin="destructive" onClick={() => setContextOpen(true)}>
          Context is important
        </Button>
        <Button onClick={() => setConfirmOpen(true)}>
          Standalone confirmation
        </Button>

        {/* First modal: Drawer on mobile, MessageModalLayout on desktop */}
        {mobile ? (
          <Drawer open={contextOpen} onClose={() => setContextOpen(false)} dismissible={false}>
            <Box direction="vertical" gap="SP4" padding="24px">
              <Heading size="small">{deleteTitle}</Heading>
              <Text>{deleteContent}</Text>
              <Box direction="vertical" gap="SP2">
                <Button skin="destructive" onClick={() => setContextOpen(false)} fullWidth>
                  Delete
                </Button>
                <Button priority="secondary" onClick={() => setContextOpen(false)} fullWidth>
                  Cancel
                </Button>
              </Box>
            </Box>
          </Drawer>
        ) : (
          <Modal isOpen={contextOpen} onRequestClose={() => setContextOpen(false)} shouldCloseOnOverlayClick>
            <MessageModalLayout
              theme="destructive"
              title={deleteTitle}
              primaryButtonText="Delete"
              primaryButtonOnClick={() => setContextOpen(false)}
              secondaryButtonText="Cancel"
              secondaryButtonOnClick={() => setContextOpen(false)}
              onCloseButtonClick={() => setContextOpen(false)}
            >
              <Text>{deleteContent}</Text>
            </MessageModalLayout>
          </Modal>
        )}

        {/* Second modal: ModalMobileLayout on mobile, MessageModalLayout on desktop */}
        {mobile ? (
          <Modal isOpen={confirmOpen} onRequestClose={() => setConfirmOpen(false)}>
            <ModalMobileLayout
              title={<Text weight="bold">{confirmTitle}</Text>}
              onCloseButtonClick={() => setConfirmOpen(false)}
              content={<Text>{confirmContent}</Text>}
              footer={
                <Box direction="vertical" gap="SP2">
                  <Button onClick={() => setConfirmOpen(false)} fullWidth>
                    Confirm
                  </Button>
                  <Button priority="secondary" onClick={() => setConfirmOpen(false)} fullWidth>
                    Cancel
                  </Button>
                </Box>
              }
            />
          </Modal>
        ) : (
          <Modal isOpen={confirmOpen} onRequestClose={() => setConfirmOpen(false)} shouldCloseOnOverlayClick>
            <MessageModalLayout
              title={confirmTitle}
              primaryButtonText="Confirm"
              primaryButtonOnClick={() => setConfirmOpen(false)}
              secondaryButtonText="Cancel"
              secondaryButtonOnClick={() => setConfirmOpen(false)}
              onCloseButtonClick={() => setConfirmOpen(false)}
            >
              <Text>{confirmContent}</Text>
            </MessageModalLayout>
          </Modal>
        )}
      </Box>
    );
  };
```


    


## Common Use Case Examples


### Warn about destructive changes
- description: <p>Use the <code>destructive</code> theme to bring more attention to modals that confirm irreversible actions.  </p><p></p><p>Use the <code><Text/></code><a href="https://www.wix-style-react.com/storybook/?path=/story/components-typography-text--text"></a> component props to style the modal content.</p>
- example: 
```jsx 
<MessageModalLayout
  theme={'destructive'}
  onCloseButtonClick={() => {}}
  primaryButtonText="Delete"
  secondaryButtonText="Cancel"
  title="Delete category?"
>
  <Text>
    You're about to delete the <b>Yoga</b> category. Posts inside this category
    will also be deleted.
  </Text>
</MessageModalLayout>;
```

### Alert users to unsaved changes
- description: <p>Use a message modal to inform users that their changes won't be saved if the action is taken. </p>
- example: 
```jsx 
<MessageModalLayout
  primaryButtonText="Leave Page"
  secondaryButtonText="Cancel"
  title="Leave page?"
  onCloseButtonClick={() => {}}
>
  <Text>When you leave this page, you'll lose unsaved changes.</Text>
</MessageModalLayout>;
```

### Promote Premium features
- description: <p>Use the <code>illustration</code> prop to support upgrade messages. Illustrations can showcase the features available with upgrades.</p>
- example: 
```jsx 
<MessageModalLayout
  onCloseButtonClick={() => {}}
  theme={'premium'}
  primaryButtonText="Upgrade"
  secondaryButtonText="Not Now"
  title="Upgrade to accept payments"
  illustration={'generic_upgrade.svg'}
>
  <Text>
    Upgrade your site to a Business Basic plan to start accepting payments.
  </Text>
</MessageModalLayout>;
```