Note
This component uses Portals internally, which requires React 16
Note
This component uses ZLevel context internally, which requires React 16

Usage

Props

NameTypeRequiredDefaultDescription
childrennodefalse
Children to be rendered
classNamestringfalse
Additional classNames
onClickOverlayfunctionfalse
callback for clicking the overlay
openbooleanfalsefalse
Modal open state
placementoneOffalsecenter
Vertical placement of the modal
oneOf: ['center', 'top']

placement

Modal.Header

NameTypeRequiredDefaultDescription
childrennodefalse
Children to be rendered
classNamestringfalse
Additional classNames
onClosefunctionfalse
The dismiss onClick callback

Modal.Body

NameTypeRequiredDefaultDescription
childrennodefalse
Children to be rendered
classNamestringfalse
Additional classNames
noSideSpacingbooleanfalsefalse
Removes left, right paddings from the modal body when true

Modal.Footer

NameTypeRequiredDefaultDescription
childrennodefalse
Children to be rendered
classNamestringfalse
Additional classNames

Modal.FooterSummary

NameTypeRequiredDefaultDescription
childrennodefalse
Children to be rendered
classNamestringfalse
Additional classNames

Currently using a Footer Summary requires a max width set on the footer or modal.

Modal.FooterNotation

NameTypeRequiredDefaultDescription
childrennodefalse
Children to be rendered
classNamestringfalse
Additional classNames

Modal.FooterButtons

NameTypeRequiredDefaultDescription
childrennodefalse
Children to be rendered
classNamestringfalse
Additional classNames

Overflow

ConfirmModal

NameTypeRequiredDefaultDescription
childrennodefalse
Children to be rendered
classNamestringfalse
Additional classNames
onClickOverlayfunctionfalse
callback for clicking the overlay
openbooleanfalsefalse
Modal open state
placementoneOffalsecenter
Vertical placement of the modal
oneOf: ['center', 'top']
headlinestringfalse''
Headline message