## Feature Examples

### Structure
- description: The custom modal layout can include the following: - `title` (required) - `subtitle` - `content` (required) - `sideActions` - `footnote` To add supplementary actions, like a "Don't show this again" checkbox, use `sideActions`. To include additional information, add a `footnote`, e.g., "By sending an invite, you agree to the Wix Terms of Use."
- example:
```jsx
<CustomModalLayout
  primaryButtonText="Save"
  secondaryButtonText="Cancel"
  onCloseButtonClick={() => {}}
  title="Title"
  subtitle="Subtitle"
  footnote={
    <StorybookComponents.Placeholder>Footnote</StorybookComponents.Placeholder>
  }
  sideActions={
    <StorybookComponents.Placeholder>
      Side actions
    </StorybookComponents.Placeholder>
  }
  content={
    <StorybookComponents.Placeholder height="240px">
      Content
    </StorybookComponents.Placeholder>
  }
/>;
```

### Height and width
- description: By default, modals grow with their content, but they'll never extend higher than the user's viewport (with 48 px top and bottom padding). Control a custom modal's height with these two properties: - `height` fixes height in pixels. - `maxHeight` sets a custom max height in pixels. When modal content extends below the user's viewport, `height` or `maxHeight`, content scrolls vertically with a fixed header and footer. Control a custom modal's width with `width` property. Minimum width of a modal is 510px., maximum width is 1254px.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <CustomModalLayout
    primaryButtonText="Save"
    secondaryButtonText="Cancel"
    onCloseButtonClick={() => {}}
    secondaryButtonOnClick={() => {}}
    primaryButtonOnClick={() => {}}
    title="Auto height (default)"
    content={<Box height="180px" />}
  />

  <CustomModalLayout
    height="360px"
    primaryButtonText="Save"
    secondaryButtonText="Cancel"
    onCloseButtonClick={() => {}}
    secondaryButtonOnClick={() => {}}
    primaryButtonOnClick={() => {}}
    title="Height is fixed at 360 px"
    content={<Box height="360px" />}
  />
</StorybookComponents.Stack>;
```

### Content padding
- description: Remove the default 30 px left and right content padding with the `removeContentPadding` prop. This property can be used to show components with built-in padding like `<Page/>` or `<Table/>`.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <CustomModalLayout
    primaryButtonText="Save"
    secondaryButtonText="Cancel"
    onCloseButtonClick={() => {}}
    title="Default content padding"
    content={<StorybookComponents.Placeholder height="60px" />}
  />
  <CustomModalLayout
    removeContentPadding
    primaryButtonText="Save"
    secondaryButtonText="Cancel"
    onCloseButtonClick={() => {}}
    title="No content padding"
    content={<StorybookComponents.Placeholder height="60px" />}
  />
</StorybookComponents.Stack>;
```

### Theme
- description: Control the component style with `theme` prop: - `standard` is the default used in all common cases. - `premium` is used to promote Premium features. - `destructive` is for actions that have a destructive effect on user data, like delete. For short warning messages, use the `<MessageModalLayout/>` in a destructive theme instead.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <CustomModalLayout
    primaryButtonText="Save"
    secondaryButtonText="Cancel"
    onCloseButtonClick={() => {}}
    title="Standard (default)"
    content={<StorybookComponents.Placeholder height="60px" />}
  />
  <CustomModalLayout
    theme="premium"
    primaryButtonText="Upgrade"
    secondaryButtonText="Cancel"
    onCloseButtonClick={() => {}}
    title="Premium"
    content={<StorybookComponents.Placeholder height="60px" />}
  />
  <CustomModalLayout
    theme="destructive"
    primaryButtonText="Delete"
    secondaryButtonText="Cancel"
    onCloseButtonClick={() => {}}
    title="Destructive"
    content={<StorybookComponents.Placeholder height="60px" />}
  />
</StorybookComponents.Stack>;
```

### Header and footer dividers
- description: Control visibility of both the header and footer dividers with the `showHeaderDivider` and `showFooterDivider` props. - `auto` is the default that shows header divider only when content is scrolled and always shows the footer divider. - `true` always shows the dividers. - `false` always hides the dividers.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <CustomModalLayout
    primaryButtonText="Save"
    secondaryButtonText="Cancel"
    onCloseButtonClick={() => {}}
    title="Auto (default)"
    height="240px"
    content={<StorybookComponents.Placeholder height="300px" />}
  />
  <CustomModalLayout
    showFooterDivider
    showHeaderDivider
    primaryButtonText="Save"
    secondaryButtonText="Cancel"
    onCloseButtonClick={() => {}}
    title="Always show dividers"
    height="240px"
    content={<StorybookComponents.Placeholder height="300px" />}
  />
  <CustomModalLayout
    showFooterDivider={false}
    showHeaderDivider={false}
    primaryButtonText="Save"
    secondaryButtonText="Cancel"
    onCloseButtonClick={() => {}}
    title="Hide dividers"
    height="240px"
    content={<StorybookComponents.Placeholder height="300px" />}
  />
</StorybookComponents.Stack>;
```

### Help and close buttons
- description: Add a help button with the `onHelpButtonClick` prop. Use it to direct users to support sources, for example, the Wix Help Center. The close button is required for all modals.
- example:
```jsx
<CustomModalLayout
  primaryButtonText="Save"
  secondaryButtonText="Cancel"
  onCloseButtonClick={() => {}}
  onHelpButtonClick={() => {}}
  title="Title"
  content={<StorybookComponents.Placeholder height="60px" />}
/>;
```

### Side actions
- description: Add supplementary actions in the `sideActions` container.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <CustomModalLayout
    primaryButtonText="Save"
    secondaryButtonText="Cancel"
    onCloseButtonClick={() => {}}
    title="Title"
    sideActions={
      <StorybookComponents.Placeholder>
        Side actions
      </StorybookComponents.Placeholder>
    }
    content={<StorybookComponents.Placeholder height="60px" />}
  />
  <CustomModalLayout
    primaryButtonText="Save"
    secondaryButtonText="Cancel"
    onCloseButtonClick={() => {}}
    title="Title"
    sideActions={<Checkbox>Don’t show this again</Checkbox>}
    content={<StorybookComponents.Placeholder height="60px" />}
  />
  <CustomModalLayout
    onCloseButtonClick={() => {}}
    title="Title"
    sideActions={
      <StorybookComponents.Stack justifyContent="space-between">
        <Button priority="secondary" size="small">
          Cancel
        </Button>
        <StorybookComponents.Stack gap="8px" justifyContent="flex-end">
          <Button
            priority="secondary"
            size="small"
            prefixIcon={<Icons.DismissSmall />}
          >
            Reject
          </Button>
          <Button
            priority="secondary"
            size="small"
            prefixIcon={<Icons.TimeSmall />}
          >
            Keep for later
          </Button>
          <Button
            priority="secondary"
            size="small"
            prefixIcon={<Icons.ConfirmSmall />}
          >
            Approve
          </Button>
        </StorybookComponents.Stack>
      </StorybookComponents.Stack>
    }
    content={<StorybookComponents.Placeholder height="60px" />}
  />
</StorybookComponents.Stack>;
```

### Footnote
- description: Add supplementary text and links into the `footnote` container. Footnote also has a `footnoteSkin` property, that provides a `light` skin, that can be used fore busier modal layouts.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <CustomModalLayout
    primaryButtonText="Save"
    secondaryButtonText="Cancel"
    onCloseButtonClick={() => {}}
    title="Title"
    footnote={
      <StorybookComponents.Placeholder>
        Footnote
      </StorybookComponents.Placeholder>
    }
    content={<StorybookComponents.Placeholder height="60px" />}
  />

  <CustomModalLayout
    primaryButtonText="Save"
    secondaryButtonText="Cancel"
    onCloseButtonClick={() => {}}
    title="Title"
    footnote={
      <Text size="small">
        By continuing, you agree to the <a>Wix Terms of Use</a>
      </Text>
    }
    content={<StorybookComponents.Placeholder height="60px" />}
  />
  <CustomModalLayout
    primaryButtonText="Save"
    secondaryButtonText="Cancel"
    onCloseButtonClick={() => {}}
    title="Title"
    footnoteSkin="light"
    footnote={
      <Text size="small">
        By continuing, you agree to the <a>Wix Terms of Use</a>
      </Text>
    }
    content={<StorybookComponents.Placeholder height="60px" />}
  />
</StorybookComponents.Stack>;
```

### Title and subtitle
- description: Add short text to summarize modal content with the `title` and `subtitle` props. Both `title` and `subtitle` are nodes, so they can contain other components. For example, add inline `<TextButton/>` linking to relevant information in a subtitle.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <CustomModalLayout
    primaryButtonText="Save"
    secondaryButtonText="Cancel"
    onCloseButtonClick={() => {}}
    title="Title (required)"
    subtitle="Subtitle (optional)"
    content={<StorybookComponents.Placeholder height="60px" />}
  />
  <CustomModalLayout
    primaryButtonText="Save"
    secondaryButtonText="Cancel"
    onCloseButtonClick={() => {}}
    title="Title"
    subtitle={
      <StorybookComponents.Stack gap="6px">
        <Text secondary>Subtitle</Text>
        <TextButton underline="always">Inline text button</TextButton>
      </StorybookComponents.Stack>
    }
    content={<StorybookComponents.Placeholder height="60px" />}
  />
</StorybookComponents.Stack>;
```

### 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/>`](#/component/button) props via the `primaryButtonProps` and `secondaryButtonProps`.
- example:
```jsx
<CustomModalLayout
  primaryButtonText="Approve"
  primaryButtonProps={{ prefixIcon: <Icons.ConfirmSmall /> }}
  secondaryButtonText="Reject"
  secondaryButtonProps={{ prefixIcon: <Icons.DismissSmall /> }}
  onCloseButtonClick={() => {}}
  title="Title"
  content={<StorybookComponents.Placeholder height="60px" />}
/>;
```

### Disabled primary action
- description: Disable a primary action using the `disabled` prop in `primaryButtonProps`. Add an explanation in a tooltip about why this action is not allowed with `primaryButtonTooltipProps`. Use any of the `<Tooltip/>` props to style the tooltip.
- example:
```jsx
<CustomModalLayout
  primaryButtonText="Save"
  primaryButtonProps={{ disabled: true }}
  primaryButtonTooltipProps={{ content: 'Tells users why they cannot Save' }}
  secondaryButtonText="Cancel"
  onCloseButtonClick={() => {}}
  title="Title"
  content={<StorybookComponents.Placeholder height="60px" />}
/>;
```

## Developer Examples

### Vertical overflow
- description: Modal headers and footers can cut content outlines when placed next to the top or bottom content areas. Set vertical `overflowY` prop to `none` to show the full outline.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <CustomModalLayout
    primaryButtonText="Save"
    secondaryButtonText="Cancel"
    onCloseButtonClick={() => {}}
    title="Title"
    content={<Input placeholder="Click here to see the default outlines" />}
  />
  <CustomModalLayout
    primaryButtonText="Save"
    secondaryButtonText="Cancel"
    onCloseButtonClick={() => {}}
    title="Title"
    overflowY="none"
    content={
      <Input placeholder="Click here to see the outlines with overflowY prop" />
    }
  />
</StorybookComponents.Stack>;
```

### Modal with overlays
- description: By default, modals do not allow content to overflow. Use `popoverProps`, `appendTo` and `dynamicWidth` props to display overlays as intended. For more guidance, read about the `<Popover/>` component.
- example:
```jsx
() => {
  const [shown, setShown] = React.useState(false);

  return (
    <Card>
      <Card.Header
        title="Allow using coupons"
        subtitle="Let visitors use coupons to get discounts & special deals."
        suffix={
          <Button
            size="small"
            priority="secondary"
            onClick={() => setShown(true)}
          >
            Apply Coupon
          </Button>
        }
      />
      <Modal
        isOpen={shown}
        onRequestClose={() => setShown(false)}
        shouldCloseOnOverlayClick
        screen="desktop"
      >
        <CustomModalLayout
          primaryButtonText="Apply"
          primaryButtonOnClick={() => setShown(false)}
          secondaryButtonText="Cancel"
          secondaryButtonOnClick={() => setShown(false)}
          onCloseButtonClick={() => setShown(false)}
          title="Apply a coupon"
          overflowY="none"
          content={
            <FormField label="Select coupon">
              <Dropdown
                popoverProps={{
                  appendTo: 'scrollParent',
                  dynamicWidth: true,
                }}
                options={[
                  { id: 0, value: 'None' },
                  { id: 1, value: 'SUMMER15' },
                  { id: 2, value: 'BACKTOSCHOOL' },
                  { id: 3, value: 'AUGUST10' },
                  { id: 4, value: 'OUTWITHTHEOLD' },
                ]}
                placeholder="Select from the list"
              />
            </FormField>
          }
        />
      </Modal>
    </Card>
  );
};
```

### Mobile
- description: On mobile `CustomModalLayout` maps to `FullScreenModalLayout` for cases where complex or multi-step flows are included If the layout is simple, short, up to one step - use `Drawer` _To see the change, toggle 'Enable mobile support' in the top bar of Storybook._
- example:
```jsx
() => {
  const [complexOpen, setComplexOpen] = React.useState(false);
  const [simpleOpen, setSimpleOpen] = React.useState(false);
  const [step, setStep] = React.useState(1);
  const { mobile } = React.useContext(WixDesignSystemContext);

  // Complex form state
  const [projectName, setProjectName] = React.useState('');
  const [category, setCategory] = React.useState(null);
  const [template, setTemplate] = React.useState('starter');
  const [visibility, setVisibility] = React.useState('public');
  const [features, setFeatures] = React.useState({
    comments: false,
    seo: true,
    analytics: false,
  });
  const [notifications, setNotifications] = React.useState(true);
  const [agreed, setAgreed] = React.useState(false);

  // Simple form state
  const [tagName, setTagName] = React.useState('');
  const [tagColor, setTagColor] = React.useState('blue');
  const [pinned, setPinned] = React.useState(false);

  const categoryOptions = [
    { id: 'blog', value: 'blog', label: 'Blog' },
    { id: 'portfolio', value: 'portfolio', label: 'Portfolio' },
    { id: 'ecommerce', value: 'ecommerce', label: 'E-Commerce' },
    { id: 'docs', value: 'docs', label: 'Documentation' },
  ];

  const toggleFeature = (key) => (e) =>
    setFeatures((f) => ({ ...f, [key]: e.target.checked }));

  const stepTitles = {
    1: 'Project Setup',
    2: 'Configuration',
    3: 'Review & Confirm',
  };

  const SummaryRow = ({ label, value }) => (
    <Box align="space-between" verticalAlign="middle" gap="SP4">
      <Text size="small" style={{ flexShrink: 0 }}>
        {label}
      </Text>
      <Text size="small" align="right">
        {value}
      </Text>
    </Box>
  );

  const stepContent = {
    1: (
      <Box direction="vertical" gap="SP4">
        <FormField label="Project name" required>
          <Input
            placeholder="My awesome project"
            value={projectName}
            onChange={(e) => setProjectName(e.target.value)}
          />
        </FormField>
        <FormField label="Category">
          <Dropdown
            placeholder="Select a category"
            options={categoryOptions}
            selectedId={category}
            onSelect={(opt) => setCategory(opt.id)}
          />
        </FormField>
        <FormField label="Start from">
          <RadioGroup
            value={template}
            onChange={(value) => setTemplate(String(value))}
          >
            <RadioGroup.Radio value="blank">
              Blank — start from scratch
            </RadioGroup.Radio>
            <RadioGroup.Radio value="starter">
              Starter template — basic structure included
            </RadioGroup.Radio>
            <RadioGroup.Radio value="advanced">
              Advanced template — full setup with sample content
            </RadioGroup.Radio>
          </RadioGroup>
        </FormField>
      </Box>
    ),
    2: (
      <Box direction="vertical" gap="SP4" width="100%">
        <FormField label="Visibility">
          <RadioGroup
            value={visibility}
            onChange={(value) => setVisibility(String(value))}
          >
            <RadioGroup.Radio value="public">
              Public — anyone can view
            </RadioGroup.Radio>
            <RadioGroup.Radio value="private">
              Private — only you
            </RadioGroup.Radio>
            <RadioGroup.Radio value="team">Team — invite only</RadioGroup.Radio>
          </RadioGroup>
        </FormField>
        <Divider />
        <FormField label="Enable features">
          <Box direction="vertical" gap="SP2">
            <Checkbox
              checked={features.comments}
              onChange={toggleFeature('comments')}
            >
              Comments
            </Checkbox>
            <Checkbox checked={features.seo} onChange={toggleFeature('seo')}>
              SEO optimization
            </Checkbox>
            <Checkbox
              checked={features.analytics}
              onChange={toggleFeature('analytics')}
            >
              Analytics dashboard
            </Checkbox>
          </Box>
        </FormField>
        <Divider />
        <Box align="space-between" verticalAlign="middle">
          <Box direction="vertical">
            <Text weight="normal">Email notifications</Text>
            <Text size="tiny" secondary>
              Get updates on project activity
            </Text>
          </Box>
          <ToggleSwitch
            checked={notifications}
            onChange={(e) => setNotifications(e.target.checked)}
          />
        </Box>
      </Box>
    ),
    3: (
      <Box direction="vertical" width="100%" gap="SP4">
        <Box width="100%" direction="vertical" gap="SP3">
          <SummaryRow label="Name" value={projectName || '—'} />
          <SummaryRow
            label="Category"
            value={categoryOptions.find((o) => o.id === category)?.label || '—'}
          />
          <SummaryRow label="Template" value={template} />
          <Divider />
          <SummaryRow label="Visibility" value={visibility} />
          <SummaryRow
            label="Features"
            value={
              Object.entries(features)
                .filter(([, v]) => v)
                .map(([k]) => k)
                .join(', ') || 'None'
            }
          />
          <SummaryRow
            label="Notifications"
            value={notifications ? 'On' : 'Off'}
          />
        </Box>
        <Checkbox
          checked={agreed}
          onChange={(e) => setAgreed(e.target.checked)}
        >
          I agree to the terms and conditions
        </Checkbox>
      </Box>
    ),
  };

  const openComplex = () => {
    setStep(1);
    setComplexOpen(true);
  };
  const closeComplex = () => setComplexOpen(false);
  const next = () => (step < 3 ? setStep(step + 1) : closeComplex());
  const back = () => setStep(step - 1);
  const isNextDisabled = step === 3 && !agreed;

  const closeSimple = () => setSimpleOpen(false);

  const simpleContent = (
    <Box direction="vertical" gap="SP4">
      <FormField label="Tag name" required>
        <Input
          placeholder="e.g. Urgent"
          value={tagName}
          onChange={(e) => setTagName(e.target.value)}
        />
      </FormField>
      <FormField label="Color">
        <RadioGroup
          value={tagColor}
          onChange={(value) => setTagColor(String(value))}
        >
          <RadioGroup.Radio value="blue">Blue</RadioGroup.Radio>
          <RadioGroup.Radio value="green">Green</RadioGroup.Radio>
          <RadioGroup.Radio value="red">Red</RadioGroup.Radio>
        </RadioGroup>
      </FormField>
      <Checkbox checked={pinned} onChange={(e) => setPinned(e.target.checked)}>
        Pin to top
      </Checkbox>
    </Box>
  );

  return (
    <Box padding="20px" gap="SP3">
      <Button onClick={openComplex}>Complex form</Button>
      <Button priority="secondary" onClick={() => setSimpleOpen(true)}>
        Simple form
      </Button>

      {/* Complex form — FullScreenModalLayout on mobile, CustomModalLayout on desktop */}
      {mobile ? (
        <Modal
          isOpen={complexOpen}
          onRequestClose={closeComplex}
          screen="mobile"
        >
          <FullScreenModalLayout>
            <FullScreenModalLayout.Header
              startNode={
                <CloseButton skin="dark" size="large" onClick={closeComplex} />
              }
            >
              <Text>Step {step} of 3</Text>
            </FullScreenModalLayout.Header>
            <FullScreenModalLayout.Content padding>
              <Box direction="vertical" gap="SP4">
                <Heading size="small">{stepTitles[step]}</Heading>
                {stepContent[step]}
              </Box>
            </FullScreenModalLayout.Content>
            <FullScreenModalLayout.Footer>
              <Box direction="horizontal" width="100%" gap="SP2" padding="SP4">
                {step > 1 ? (
                  <Button priority="secondary" onClick={back} fullWidth>
                    Back
                  </Button>
                ) : (
                  <Button priority="secondary" onClick={closeComplex} fullWidth>
                    Cancel
                  </Button>
                )}
                <Button onClick={next} fullWidth>
                  {step < 3 ? 'Next' : 'Finish'}
                </Button>
              </Box>
            </FullScreenModalLayout.Footer>
          </FullScreenModalLayout>
        </Modal>
      ) : (
        <Modal isOpen={complexOpen} onRequestClose={closeComplex}>
          <CustomModalLayout
            width="600px"
            title={stepTitles[step]}
            subtitle={`Step ${step} of 3`}
            content={<Box paddingBottom="12px">{stepContent[step]}</Box>}
            primaryButtonText={step < 3 ? 'Next' : 'Finish'}
            primaryButtonOnClick={next}
            primaryButtonProps={{ disabled: isNextDisabled }}
            secondaryButtonText={step > 1 ? 'Back' : undefined}
            secondaryButtonOnClick={step > 1 ? back : undefined}
            onCloseButtonClick={closeComplex}
          />
        </Modal>
      )}

      {/* Simple form — Drawer on mobile, CustomModalLayout on desktop */}
      {mobile ? (
        <Drawer open={simpleOpen} onClose={closeSimple}>
          <Box direction="vertical" gap="SP4" padding="SP5">
            <Heading size="small">Create tag</Heading>
            {simpleContent}
            <Box gap="SP2">
              <Button priority="secondary" onClick={closeSimple} fullWidth>
                Cancel
              </Button>
              <Button onClick={closeSimple} fullWidth>
                Create
              </Button>
            </Box>
          </Box>
        </Drawer>
      ) : (
        <Modal isOpen={simpleOpen} onRequestClose={closeSimple}>
          <CustomModalLayout
            title="Create tag"
            content={<Box paddingBottom="12px">{simpleContent}</Box>}
            primaryButtonText="Create"
            primaryButtonOnClick={closeSimple}
            secondaryButtonText="Cancel"
            secondaryButtonOnClick={closeSimple}
            onCloseButtonClick={closeSimple}
          />
        </Modal>
      )}
    </Box>
  );
};
```

## Common Use Case Examples

### Modal with no content padding
- description: Remove default content padding when displaying a `<Table/>`, `<Page/>` or other content with built-in or custom padding.
- example:
```jsx
() => {
  const [shown, setShown] = React.useState(false);
  const [copy, setCopy] = React.useState(false);

  const data = [
    { name: 'User 1', plan: 'Gold', email: 'user1@mail.com' },
    { name: 'User 2', plan: 'Silver', email: 'user2@mail.com' },
    { name: 'User 3', plan: 'Gold', email: 'user3@mail.com' },
    { name: 'User 4', plan: 'Gold', email: 'user4@mail.com' },
    { name: 'User 5', plan: 'Bronze', email: 'user5@mail.com' },
    { name: 'User 6', plan: 'Bronze', email: 'user6@mail.com' },
    { name: 'User 7', plan: 'Gold', email: 'user7@mail.com' },
    { name: 'User 8', plan: 'Bronze', email: 'user8@mail.com' },
  ];
  const columns = [
    { title: 'Name', render: (row) => row.name },
    { title: 'Plan', render: (row) => row.plan },
    { title: 'Email', render: (row) => row.email },
  ];

  return (
    <Card>
      <Card.Header
        title="Send coupons to your members"
        subtitle="Select members who will receive a new coupon via email."
        suffix={
          <Button
            size="small"
            priority="secondary"
            onClick={() => setShown(true)}
          >
            Send Coupons
          </Button>
        }
      />
      <Modal
        isOpen={shown}
        onRequestClose={() => setShown(false)}
        shouldCloseOnOverlayClick
        screen="desktop"
      >
        <CustomModalLayout
          title="Send coupons to members"
          subtitle="Select members who will receive coupons via email."
          onCloseButtonClick={() => setShown(false)}
          primaryButtonOnClick={() => setShown(false)}
          secondaryButtonOnClick={() => setShown(false)}
          width="720px"
          maxHeight="480px"
          removeContentPadding
          primaryButtonText="Send"
          secondaryButtonText="Cancel"
          sideActions={
            <Checkbox
              size="small"
              checked={copy}
              onChange={() => setCopy(!copy)}
            >
              Send copy Email to myself
            </Checkbox>
          }
          content={
            <Table data={data} columns={columns} showSelection>
              <Table.Content />
            </Table>
          }
        />
      </Modal>
    </Card>
  );
};
```

### Modal with multiple actions
- description: If a modal has more than two actions, use `sideActions` container to group them. Cancel button is required and should always be positioned on the left side of the action list.
- example:
```jsx
() => {
  const [shown, setShown] = React.useState(false);

  return (
    <Layout>
      <Cell span={6}>
        <Card>
          <Box
            direction="vertical"
            gap="1"
            paddingTop="2"
            paddingLeft="4"
            paddingRight="4"
            paddingBottom="2"
          >
            <Text secondary>From name:</Text>
            <Text weight="bold">User 1</Text>
            <Text secondary>Reply-to email:</Text>
            <Text weight="bold">User1@mail.com</Text>
          </Box>
          <Divider />
          <Box
            paddingTop="2"
            paddingLeft="4"
            paddingRight="4"
            paddingBottom="2"
            align="center"
          >
            <TextButton onClick={() => setShown(true)}>
              Confirm Email
            </TextButton>
          </Box>
          <Modal
            isOpen={shown}
            onRequestClose={() => setShown(false)}
            shouldCloseOnOverlayClick
            screen="desktop"
          >
            <CustomModalLayout
              primaryButtonText="Confirm"
              secondaryButtonText="Change Details"
              onCloseButtonClick={() => setShown(false)}
              secondaryButtonOnClick={() => setShown(false)}
              primaryButtonOnClick={() => setShown(false)}
              overflowY="none"
              width="600px"
              title="Confirm your email address"
              content={
                <Layout>
                  <Cell>
                    <Text>
                      To make changes to your sender details, please confirm
                      your email address.
                      <br />A confirmation code was sent to{' '}
                      <b>user1@mail.com</b>.
                    </Text>
                  </Cell>
                  <Cell span={6}>
                    <FormField label="Confirmation Code">
                      <Input placeholder="XX-XXX-XX" />
                    </FormField>
                  </Cell>
                  <Cell>
                    <Text>
                      Didn't get the code? <a>Send again</a>
                    </Text>
                  </Cell>
                </Layout>
              }
              sideActions={
                <Button
                  onClick={() => setShown(false)}
                  priority="secondary"
                  size="small"
                >
                  Cancel
                </Button>
              }
            />
          </Modal>
        </Card>
      </Cell>
    </Layout>
  );
};
```

### Modal with a page inside
- description: When a `<Page/>` can be accessed from multiple entry points, show it in a modal to keep users in the main flow. Make the modal as large as possible and structure content within cards. If other modals can be triggered, make them significantly smaller to communicate their hierarchy.
- example:
```jsx
() => {
  const [shown, setShown] = React.useState(false);

  return (
    <Card>
      <Card.Header
        title="Pricing plans"
        subtitle="Let clients book this service with a plan."
        suffix={
          <Button
            size="small"
            priority="secondary"
            prefixIcon={<Icons.AddSmall />}
            onClick={() => setShown(true)}
          >
            Create New Plan
          </Button>
        }
      />
      <Modal
        isOpen={shown}
        onRequestClose={() => setShown(false)}
        shouldCloseOnOverlayClick
        screen="desktop"
      >
        <CustomModalLayout
          primaryButtonText="Create Plan"
          secondaryButtonText="Cancel"
          onCloseButtonClick={() => setShown(false)}
          onHelpButtonClick={() => {}}
          secondaryButtonOnClick={() => setShown(false)}
          primaryButtonOnClick={() => setShown(false)}
          removeContentPadding
          title="Create new pricing plan"
          content={
            <Page>
              <Page.Content>
                <Box marginTop={5} display="block">
                  <Layout>
                    <Cell span={12}>
                      <Card>
                        <Card.Header
                          title="Plan info"
                          subtitle="Give your plan a name and tell customers what it includes"
                        />
                        <Card.Divider />
                        <Card.Content>
                          <Layout>
                            <Cell span={6}>
                              <FormField
                                label="Name this plan"
                                required
                                charCount={20}
                              >
                                <Input placeholder="e.g., Silver Membership" />
                              </FormField>
                            </Cell>
                            <Cell span={6}>
                              <FormField label="Add a tagline" charCount={60}>
                                <Input placeholder="e.g., Perfect for beginners" />
                              </FormField>
                            </Cell>
                            <Cell span={12}>
                              <AddItem size="tiny">
                                Add what this plan includes
                              </AddItem>
                            </Cell>
                          </Layout>
                        </Card.Content>
                      </Card>
                    </Cell>
                    <Cell span={12}>
                      <Card>
                        <Card.Header
                          title="Connect and manage benefits"
                          subtitle="Set up how your benefits work in this plan."
                        />
                        <Card.Divider />
                        <Box
                          display="block"
                          borderRadius={8}
                          paddingBottom="8px"
                        >
                          <SelectableAccordion
                            type="checkbox"
                            items={[
                              {
                                title: 'Bookings Services',
                                subtitle:
                                  'Offer services as a membership or package with this plan.',
                                content: (
                                  <StorybookComponents.Placeholder>
                                    Booking Services content
                                  </StorybookComponents.Placeholder>
                                ),
                              },
                              {
                                title: 'Video Channels',
                                subtitle:
                                  'Offer access to your Video Channel with this plan.',
                                content: (
                                  <StorybookComponents.Placeholder>
                                    Video Channels content
                                  </StorybookComponents.Placeholder>
                                ),
                              },
                              {
                                title: 'Blog Subscriptions',
                                subtitle: 'Give exclusive access to posts.',
                                content: (
                                  <StorybookComponents.Placeholder>
                                    Blog Subscriptions content
                                  </StorybookComponents.Placeholder>
                                ),
                              },
                              {
                                title: 'Forum Subscriptions',
                                subtitle:
                                  'Give exclusive access to forum categories.',
                                content: (
                                  <StorybookComponents.Placeholder>
                                    Forum Subscriptions content
                                  </StorybookComponents.Placeholder>
                                ),
                              },
                              {
                                title: 'Events Memberships',
                                subtitle:
                                  'Add ticket discount and ticket limit for your events.',
                                content: (
                                  <StorybookComponents.Placeholder>
                                    Events Memberships content
                                  </StorybookComponents.Placeholder>
                                ),
                              },
                              {
                                title: 'Online Programs',
                                subtitle:
                                  'Allow participation in different programs with this plan.',
                                content: (
                                  <StorybookComponents.Placeholder>
                                    Online Programs content
                                  </StorybookComponents.Placeholder>
                                ),
                              },
                              {
                                title: 'Groups',
                                subtitle:
                                  'Give clients access to exclusive groups.',
                                content: (
                                  <StorybookComponents.Placeholder>
                                    Groups content
                                  </StorybookComponents.Placeholder>
                                ),
                              },
                            ]}
                          />
                        </Box>
                      </Card>
                    </Cell>
                  </Layout>
                </Box>
              </Page.Content>
            </Page>
          }
        />
      </Modal>
    </Card>
  );
};
```

### Modal with marketing layout
- description: Focus users' attention on feature promotions with modals. Use them sparingly and only after users intentionally open the promotional content. For example, use a custom modal layout with a `<MarketingLayout/>` inside.
- example:
```jsx
() => {
  const [shown, setShown] = React.useState(false);

  return (
    <Card>
      <Card.Header
        title="Add Logo to your website"
        subtitle="Customize your website to match the colors and style of your logo."
        suffix={
          <Button
            size="small"
            priority="secondary"
            onClick={() => setShown(true)}
          >
            Connect Website
          </Button>
        }
      />
      <Modal
        isOpen={shown}
        onRequestClose={() => setShown(false)}
        shouldCloseOnOverlayClick
        screen="desktop"
      >
        <CustomModalLayout
          width="720px"
          removeContentPadding
          onCloseButtonClick={() => setShown(false)}
          content={
            <Card>
              <MarketingLayout
                size="medium"
                title="Wix unlimited website Premium plan"
                description="Get a customizable website, designed to match the colors and style of your logo."
                actions={
                  <Button onClick={() => setShown(false)}>Add to Cart</Button>
                }
                image={
                  <Box height="156px">
                    <Image src="MarketingIllustration1.png" transparent />
                  </Box>
                }
              />
            </Card>
          }
        />
      </Modal>
    </Card>
  );
};
```

## Accessibility Examples

### Using modals
- description: Users with disabilities have difficulty interacting with modals, so use them sparingly, and only for specific purposes. - Use modals to confirm an action, or to perform subtasks that aren't the primary tasks on the page. - Don't use modals to save space on a page. Consider using expand/collapse functionality instead. - Avoid opening multiple modals one after the other as it can disorient the users. Consider using a separate flow.
- example:
```jsx
() => {
  const [shown, setShown] = React.useState(false);

  return (
    <Card>
      <Card.Header
        title="Plan policies"
        subtitle="Add your own terms and conditions for this plan."
        suffix={
          <TextButton
            size="small"
            prefixIcon={<Icons.AddSmall />}
            onClick={() => setShown(true)}
          >
            Add Policy
          </TextButton>
        }
      />
      <Modal
        isOpen={shown}
        onRequestClose={() => setShown(false)}
        shouldCloseOnOverlayClick
        screen="desktop"
      >
        <CustomModalLayout
          primaryButtonText="Add Policy"
          secondaryButtonText="Cancel"
          onCloseButtonClick={() => setShown(false)}
          secondaryButtonOnClick={() => setShown(false)}
          primaryButtonOnClick={() => setShown(false)}
          overflowY="none"
          width="600px"
          title="Add new pricing plan policy"
          content={
            <Layout>
              <Cell>
                <FormField label="Policy title">
                  <Input placeholder="Enter title here" />
                </FormField>
              </Cell>
              <Cell>
                <FormField label="Terms & Conditions">
                  <InputArea
                    placeholder="e.g., Free trial, renewal, cancellation, and refunds."
                    rows={6}
                    maxLength={1000}
                    hasCounter
                    resizable
                  />
                </FormField>
              </Cell>
            </Layout>
          }
        />
      </Modal>
    </Card>
  );
};
```

### Heading structure
- description: All modals must have a logical, descending heading structure that doesn't skip levels. - Use `<h2>` for the main modal heading. - Use `<h3>` for subsequent headings within the modal. - Don't skip heading levels.
- example:
```jsx
() => {
  const [shown, setShown] = React.useState(false);

  return (
    <>
      <Button
        size="small"
        priority="secondary"
        prefixIcon={<Icons.PreviewSmall />}
        onClick={() => setShown(true)}
      >
        Click to see a modal
      </Button>
      <Modal
        isOpen={shown}
        onRequestClose={() => setShown(false)}
        shouldCloseOnOverlayClick
        screen="desktop"
      >
        <CustomModalLayout
          primaryButtonText="Save"
          secondaryButtonText="Cancel"
          onCloseButtonClick={() => setShown(false)}
          onHelpButtonClick={() => {}}
          secondaryButtonOnClick={() => setShown(false)}
          primaryButtonOnClick={() => setShown(false)}
          removeContentPadding
          title="Modal title as H2"
          content={
            <Page>
              <Page.Content>
                <Box marginTop={5} display="block">
                  <Layout>
                    <Cell span={12}>
                      <Card>
                        <Card.Header title="Card title as H3" />
                        <Card.Divider />
                        <Card.Content>
                          <StorybookComponents.Placeholder>
                            <Box
                              verticalAlign="middle"
                              align="center"
                              height="180px"
                            >
                              <Text>Card content</Text>
                            </Box>
                          </StorybookComponents.Placeholder>
                        </Card.Content>
                      </Card>
                    </Cell>
                  </Layout>
                </Box>
              </Page.Content>
            </Page>
          }
        />
      </Modal>
    </>
  );
};
```