const SideModalExample = () => {return (<SideModalContainer><SideModalButton variant="primary">Open dialog</SideModalButton><SideModal aria-label="Basic Side Modal"><SideModalHeader><SideModalHeading>Heading</SideModalHeading></SideModalHeader><SideModalBody><Paragraph>A Modal is a dialog that appears over the main content and moves the system into a special mode requiring user interaction.</Paragraph><Paragraph>You can compose a Modal content area to support your use case, but elements such as Paragraph and Form Input are commonly used. See examples for common Modal patterns and dos/don'ts.</Paragraph></SideModalBody></SideModal></SideModalContainer>);};render(<SideModalExample />)
The Side Modal component is a non-modal dialog that sits on top of the right side of the page. It is meant for situations like a preview of a record while looking at a table.
Only use one Side Modal on a page
We currenly only support having one Side Modal open on a page. If you have questions, please post a GitHub Discussion.
Side Modal and non-modal dialogs follow these accessibility guidelines:
- There must be a focusable element inside the dialog.
- There should be a close button so screen readers have a specific close action to target.
- A Side Modal is a focus trap, and focus is placed inside it when it's shown.
- A Side Modal must be triggered by an explicit user action, e.g. clicking a button.
Side Panel and Side Modal are both used to display additional content on the side of the main page content. Side Panel is used for content that is not blocking and can be interacted with while the main page content is still visible. Side Panels are designed to remain open while the user completes other tasks in the main content of the page. Side Modals typically need to be closed before the user returns to their main task as the Modal overlays part of the page.
Side Modals are a focus trap and can't be tabbed out of, while the content of Side Panels can be tabbed through and then tabbed out of to return to the main page content.
const SideModalExample = () => {return (<SideModalContainer><SideModalButton variant="primary">Open dialog</SideModalButton><SideModal aria-label="Basic Side Modal"><SideModalHeader><SideModalHeading>Heading</SideModalHeading></SideModalHeader><SideModalBody><Paragraph>A Modal is a dialog that appears over the main content and moves the system into a special mode requiring user interaction.</Paragraph><Paragraph>You can compose a Modal content area to support your use case, but elements such as Paragraph and Form Input are commonly used. See examples for common Modal patterns and dos/don'ts.</Paragraph></SideModalBody></SideModal></SideModalContainer>);};render(<SideModalExample />)
The SideModalFooter component has a justifyContent prop that lets you change how the actions are displayed within the footer. It can be set to flex-start, flex-end, or space-between and the default is flex-end.
const SideModalFooterExample = () => {return (<SideModalContainer><SideModalButton variant="primary">Open dialog</SideModalButton><SideModal aria-label="Basic Side Modal"><SideModalHeader><SideModalHeading>Heading</SideModalHeading></SideModalHeader><SideModalBody><Paragraph>A Modal is a dialog that appears over the main content and moves the system into a special mode requiring user interaction.</Paragraph><Paragraph>You can compose a Modal content area to support your use case, but elements such as Paragraph and Form Input are commonly used. See examples for common Modal patterns and dos/don'ts.</Paragraph></SideModalBody><SideModalFooter><SideModalFooterActions><Button variant="secondary">Secondary action</Button><Button variant="primary">Primary action</Button></SideModalFooterActions></SideModalFooter></SideModal></SideModalContainer>);};render(<SideModalFooterExample />)
The SideModalButton renders a Button component and accepts all of its props, which are listed on the Button page.
const SideModalButtonExample = () => {return (<Box display="flex" flexDirection="row" columnGap="space70"><SideModalContainer><SideModalButton variant="primary">Open dialog</SideModalButton><SideModal aria-label="Basic Side Modal"><SideModalHeader><SideModalHeading>Heading</SideModalHeading></SideModalHeader><SideModalBody><Paragraph>A Modal is a dialog that appears over the main content and moves the system into a special mode requiring user interaction.</Paragraph><Paragraph>You can compose a Modal content area to support your use case, but elements such as Paragraph and Form Input are commonly used. See examples for common Modal patterns and dos/don'ts.</Paragraph></SideModalBody></SideModal></SideModalContainer><SideModalContainer><SideModalButton variant="secondary_icon" size="icon_small"><PlusIcon decorative={false} title="Open side modal" /></SideModalButton><SideModal aria-label="Basic Side Modal"><SideModalHeader><SideModalHeading>Heading</SideModalHeading></SideModalHeader><SideModalBody><Paragraph>A Modal is a dialog that appears over the main content and moves the system into a special mode requiring user interaction.</Paragraph><Paragraph>You can compose a Modal content area to support your use case, but elements such as Paragraph and Form Input are commonly used. See examples for common Modal patterns and dos/don'ts.</Paragraph></SideModalBody></SideModal></SideModalContainer><SideModalContainer><SideModalButton variant="reset" size="reset">Open dialog</SideModalButton><SideModal aria-label="Basic Side Modal"><SideModalHeader><SideModalHeading>Heading</SideModalHeading></SideModalHeader><SideModalBody><Paragraph>A Modal is a dialog that appears over the main content and moves the system into a special mode requiring user interaction.</Paragraph><Paragraph>You can compose a Modal content area to support your use case, but elements such as Paragraph and Form Input are commonly used. See examples for common Modal patterns and dos/don'ts.</Paragraph></SideModalBody></SideModal></SideModalContainer></Box>);};render(<SideModalButtonExample />)
Side Modal comes with the option of "hooking" into the internal state by using the state hook originally provided by Reakit.
Rather than the state be internal to the component, you can use the useSideModalState hook and pass the returned state
to SideModalContainer as the state prop.
This allows you to use certain returned props from the state hook, including functions like hide and show.
It should be noted that when doing so, the state prop takes precedent over the other properties that affect
the state or initial state of the Side Modal. They will be ignored in favour of them being provided as arguments
to the useSideModalState hook.
For full details on how to use the state hook, and what props to provide it, follow the Non-Modal Dialog Primitive documentation.
const SideModalHookExample = () => {const dialog = useSideModalState({});return (<Box display="flex" flexDirection="column" rowGap="space70"><Box><SideModalContainer state={dialog}><SideModalButton variant="primary">Open dialog</SideModalButton><SideModal aria-label="Basic Side Modal"><SideModalHeader><SideModalHeading>Heading</SideModalHeading></SideModalHeader><SideModalBody><Paragraph>A Modal is a dialog that appears over the main content and moves the system into a special mode requiring user interaction.</Paragraph><Paragraph>You can compose a Modal content area to support your use case, but elements such as Paragraph and Form Input are commonly used. See examples for common Modal patterns and dos/don'ts.</Paragraph></SideModalBody></SideModal></SideModalContainer></Box><Box><Button variant="primary" onClick={() => dialog.show()}>Open dialog</Button></Box><Box><Button variant="primary" onClick={() => dialog.hide()}>Close dialog</Button></Box></Box>);};render(<SideModalHookExample />)