This is the legacy documentation of Project-level Custom Applications, which is in maintenance mode. Visit the new documentation for Org-level Custom Applications.


Info Dialog


Info dialogs are controlled components used to show more information about a particular feature, UI element, etc. They are mainly composed of text paragraphs.


import { InfoDialog } from '@commercetools-frontend/application-components';
<InfoDialog title="Lorem ipsus" isOpen={isOpen} onClose={handleClose}>
<Spacings.Stack scale="m">
<Text.Body>{'Lorem ipsus ...'}</Text.Body>
<Text.Body>{'Lorem ipsus ...'}</Text.Body>


titlestring--The title of the Info Dialog.
isOpenboolean--Indicates whether the dialog is open or closed. The parent component needs to manage this state.
onClosefunction--Called when the dialog closes: click on overlay, click on close button, press ESC.
childrennode--Content rendered within the dialog. If the content is long in height (depending on the screen size) a scrollbar will appear.
sizestring-m, l, scalelHorizontal width of the dialog card.
zIndexnumber--1000The z-index value to be applied to the overlay container. It is useful if you have stacking modals.
getParentSelectorfunction---The function should return an HTML element that will be used as the parent container to hold the modal DOM tree. If no function is provided, it's expected that an HTML element with the id="parent-container" is present in the DOM. In the NODE_ENV=test environment, the default HTML element is body.