## Feature Examples

### Skin
- description: Use different `skin` to set the overall look of the modal and its action buttons: - For general cases use `standard`(default). - Promote Premium features with `premium`. - To inform users of the negative implications of an action, like loss of data, use `destructive` .
- 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: Add a help button with the `onHelpButtonClick` prop. Use it to direct users to support. Close button is required for all modals. Control its function with the`onCloseButtonClick` prop. Both can be customised with `closeButtonProps` and `helpButtonProps`.
- 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: Add visuals to the left side of the content to support main modal messages using the `illustration` prop. Use 120x120 px illustrations and coordinate the skin with the theme of the modal. _Note_: For Wix products, browse all available illustrations or request a new one on [Wix UX Illustrations](https://www.wixuxillustrations.com/).
- 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: Add supplementary actions in the `sideActions` container.
- 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: Add supplementary text and/or links into the `footnote` container. Use the `footnoteSkin` prop to define it as `neutral` (default) or `light`.
- 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: Add short text to summarize modal content using the `title` prop. Use optional `subtitle` prop to add secondary text below the modal title.
- 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: Specify labels for primary and secondary actions with `primaryButtonText` and `secondaryButtonText` props. For additional styling, like adding a prefix icon, use any available `<Button/>` props in `primaryButtonProps` and `secondaryButtonProps`. Use the `actionsSize` prop to control the size of the primary and secondary action buttons.
- 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: On mobile, `MessageModal` maps to `Drawer` for context-sensitive confirmations (e.g., seeing what is being deleted). When context is less important, use `ModalMobileLayout` for standalone confirmations. _To see the change, toggle 'Enable mobile support' in the top bar of Storybook._
- 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: Use the `destructive` theme to bring more attention to modals that confirm irreversible actions. Use the [`<Text/>`](#/component/text) component props to style the modal content.
- 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: Use a message modal to inform users that their changes won't be saved if the action is taken.
- 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: Use the `illustration` prop to support upgrade messages. Illustrations can showcase the features available with upgrades.
- 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>;
```