The custom modal layout can include the following:
title (required)subtitlecontent (required)sideActionsfootnoteTo 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.”
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: ```jsxRemove 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
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 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.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: ```jsxAdd supplementary actions in the sideActions container.
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.
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
Specify labels for primary and secondary actions with primaryButtonText and secondaryButtonText props.
For additional styling, like adding a prefix icon, use any available props via the primaryButtonProps and secondaryButtonProps.
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
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.
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
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 }) => (Remove default content padding when displaying a
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 (When a
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 (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