Modal Dialog
Alert dialogs can be disruptive because they require users to take an action before returning to the application; they should be used thoughtfully and sparingly.
import { AlertDialog, BlankDialog, ContentDialog, InfoDialog, FormDialog, PassiveDialog } from '@balance-web/modal-dialog';Alert Dialog
size
AlertDialog can have three sizes: small medium large
Acknowledgment
Confirmation
If the confirm action is asynchronous, you may also pass a loading property
with the confirm action options to influence the button state.
Critical Confirmation
Info Dialog
You can use any of our Spot or Hero illustrations in the illustration prop.
size
InfoDialog can have three sizes: small medium large
Form Dialog
subTitle
Show a sub title that will show underneath the title.
Content Dialog
showSectionDivider
Show a divider below the header and above the footer. If false the divider will be hidden. Default is true.
size
ContentDialog can have three sizes: small medium large
Sections
The content dialog is composed of three distinct zones: A header, the body, and a footer.
Overflow
The content dialog will fill the available vertical space. When this happens the "body" section will become scrollable.
Passive Dialog
size
PassiveDialog can have three sizes: small medium large
Blank Dialog
Has no opinions about content, render whatever you need as children.
fullScreen
Fills the viewport and lays the children out as a flex column, for a page-sized task such as a document preview. Give the scrolling region flexGrow={1}.